Results 1 to 2 of 2

Thread: JQuery functions not working?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    JQuery functions not working?

    I have some simple jquery functions that aren't working and have no idea why? I'm using Google Chrome Developer and there are no errors generated. Basically, all I'm trying to do do is show a few <div> elements using the "fadeIn" and "slideUp" functions...pretty simple huh? But nooooo....not for me. Anyway, I have copied in the entire .html page and the scripts at the bottom. Appreciate the hlep!

    thanks,

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>BLAKE MCKENNA PHOTOGRAPHY</title>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!--    All Style Sheets-->
        <link rel="stylesheet" href="css/icofont.min.css">
        <link rel="stylesheet" href="css/icofont.css">
        <link type="text/css" rel="stylesheet" href="css/gallery.css">
        <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link type="text/css" rel="stylesheet" href="css/style.css">
    
        <!--    All Javascript/JQuery files-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!--    <script src="scripts/jsscripts.js"></script>       -->
    
        <style>
            #div1 {
                background-image: url("c2_3.png");
                opacity: 0.5;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                background-repeat: no-repeat;
                background-size: cover;
                z-index: -1;
            }
        </style>
    </head>
    
    <body>
        <div id="div1">
            <h2>BLAKE MCKENNA PHOTOGRAPHY</h2>
        </div>
    
        <div style="width: 210px; float: right; margin-top: -170px">
            <p style="float: right; margin-right: 50px"><a href=""><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;&nbsp;Cart</a></p>
            <p style="float: right; margin-right: 40px"><a href=""><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Login</a></p>
        </div>
    
        <div class="nav1">
            <dl class="accordion">
                <dt id="photographer" class="nostyle"><a href=""><i class="fa fa-camera" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;The Photographer</a></dt>
    
                <dt class="nostyle"><a href=""><i class="fa fa-folder" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;Portfolio</a></dt>
                <dd class="marginleft nostyle"><a href="">Landscape</a></dd>
                <dd class="marginleft nostyle"><a href="">Wildlife</a></dd>
                <dd class="marginleft nostyle"><a href="">Portrait</a></dd>
                <dd class="marginleft nostyle"><a href="">Product</a></dd>
    
                <dt class="nostyle"><a href=""><i class="fa fa-file-image-o" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;Gallery</a></dt>
                <dd class="marginleft nostyle"><a href="">Landscape</a></dd>
                <dd class="marginleft nostyle"><a href="">Wildlife</a></dd>
                <dd class="marginleft nostyle"><a href="">Portrait</a></dd>
                <dd class="marginleft nostyle"><a href="">Product</a></dd>
    
                <dt id="dtContactMe" class="nostyle"><a href=""><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;Contact Me</a></dt>
            </dl>
        </div>
    
    
        <div id="thePhotographer">
            <div id="myPhoto">
                <img alt="Blake McKenna" height="280px" width="280px" src="me.png">
            </div>
            <div id="myBio">
                <p>I have been involved in photography my entire adult life. My favorite type of photography would have to be wildlife and nature. I love being out in nature and viewing wildlife in it’s most natural state. Although wildlife and nature are my favorite, I enjoy macro photography as well as landscape and portrait. I try to be as diversified as possible. I have been told by a few professional photographers that I should just pic one or two niches and become an expert at them. My philosophy is “why stop there”?<br><br>
                    Although I have spent the last 30 years as a Software/Web Developer making a very good living, I decided to follow my heart and dream of being a professional photographer…and here I am.
                </p>
            </div>
        </div>
    
    
        <div id="footer">
            <div style="width: 30%; margin-left: 50px; margin-top: -3px">
                <a href="http://www.facebook.com/blake.mckenna.3114" target="_blank"><i class="fa fa-facebook-official socialmedia" aria-hidden="true"></i></a>
                <a href="http://www.instagram.com/blake.mckenna.photography" target="_blank"><i class="fa fa-instagram socialmedia" aria-hidden="true"></i></a>
                <i class="fa fa-twitter socialmedia" aria-hidden="true"></i>
            </div>
    
            <div style="float: right; margin: 0 50px; margin-top: -18px">
                <p>&copy; Copyright 2020 - BLAKE MCKENNA PHOTOGRAPHY</p>
            </div>
        </div>
    
    
        <div id="contactMe" class="mainDiv">
            <h1>Contact Form</h1>
            <br>
            <form action="scripts/mail.php" method="POST">
                <label for="fullname">Full Name</label>
                <br>
                <input id="mail-name" type="text" name="fullname">
                <br>
                <br>
                <br>
    
                <label for="email">E-Mail</label>
                <br>
                <input id="mail-email" type="text" name="email">
                <br>
                <br>
                <br>
    
                <label for="message">Message</label>
                <br>
                <textarea id="mail-message" rows="4" cols="50" name="message"></textarea>
                <br>
                <br>
                <br>
    
                <button id="mail-submit" type="submit" name="submit">Send E-Mail</button>
    
                <p class="form-message"></p>
            </form>
        </div>
    
    
        <script type="text/javascript">
            $(document).ready(function() {
                closeSections();
    
                $("#photographer").click(function() {
                    $("#thePhotographer").slideUp();
                });
    
                $("#dtContactMe").click(function() {
                    $("#contactMe").fadeIn();
                });
    
                (function() {
                    var allPanels = $('.accordion > dd').hide();
    
                    $('.accordion > dt > a').click(function() {
                        allPanels.slideUp();
                        $(this).parent().nextUntil("dt").slideDown();
                        return false;
                    });
                })(jQuery);
            });
        </script>
    
    </body>
    </html>
    Blake

  2. #2

    Re: JQuery functions not working?

    Hii blakemckenna,

    Please refer this site for fadeIn and slideUp function.

    http://mrbool.com/how-to-apply-fade-...h-jquery/26789
    https://stackoverflow.com/questions/...-out-asymmetry

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width