CODEWITHSUNDEEP
jqueryclicktoggle
LT86
LT86

Reputation: 655

jsFiddle jQuery working ... not working on localhost

I have a bit of an issue, been trying to get my head round it for quite some time now. Searched through a lot of topics but haven't found anything that helps me out.

I edited a jsFiddle that I found and designed this simple Toggle navigation:

http://jsfiddle.net/liamtarpey/GzkN4/

Only problem is, I've tried to now integrate it into my website but it's not working, I've cut it down to just a test page to try and figure out the problem but still no luck. I'm using WAMP server to test and all my php and other javascript things work fine.

Here's my HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery Test</title>
        <link rel="stylesheet" href="css/master.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript"></script>
        <script type="text/javascript" src="script.js"></script> 
    </head>

<body>

    <div class="alt-nav">
        <h3>Menu</h3>
            <ul>
                <li><a href="index.php">News</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="press.php">Press</a></li>
                <li><a href="gigs.php">Gigs</a></li>
                <li><a href="music.php">Music</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="videos.php">Videos</a></li>
                <li><a href="shop.php">Shop</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
    </div>  

</body>
</html>

Here's the external .js file

script.js :

$('.alt-nav').click(function() {
        $('ul').slideToggle(550, 'linear');
});?

and finally CSS:

.alt-nav {
    display: block;
    width: 100%;
    background: black;     
    border-bottom: 2px solid #F06;
}
.alt-nav h3, ul {
    color: white;
}
.alt-nav ul {
    display: none;
}

(the ul can be none or just removed, they both should work, this should just hide it on page load).

Thing is it looks fine in the browser but it just does not work, It's completely static as if it's not reading the script whatsoever.

Could someone please help me out with this issue?

Any help would be appreciated. thanks!

Upvotes: 1

Views: 1455

Answers (6)

user694844
user694844

Reputation: 1187

You're using an invalid URL for jQuery.

If you want to use the Google CDN, use //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Upvotes: 2

Zahid Riaz
Zahid Riaz

Reputation: 2889

remove ? symbol from your js file at the end of ready function. Script will work fine for you Place you code in 

$(document).ready(function(){
});

Upvotes: 0

pistache
pistache

Reputation: 6243

Your script.js is loaded before your document is known to the DOM parser. So your selector $('.alt-nav') returns null, and this is why your event is not happening: it is bound to a null object. You need to place your script.js include statement after the body tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery Test</title>
        <link rel="stylesheet" href="css/master.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript">    </script>
    </head>

<body>
    <script type="text/javascript" src="script.js"></script> 
    <div class="alt-nav">
        <h3>Menu</h3>
            <ul>
                <li><a href="index.php">News</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="press.php">Press</a></li>
                <li><a href="gigs.php">Gigs</a></li>
                <li><a href="music.php">Music</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="videos.php">Videos</a></li>
                <li><a href="shop.php">Shop</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
    </div>  

</body>
</html>

Also, remove that ? at the end of script.js

Upvotes: 0

Laurence
Laurence

Reputation: 1713

You need to wrap your script in script.js in a $(document).ready() call:

$(document).ready(function(){ // or $(function(){
    $('.alt-nav').click(function() {
        $('ul').slideToggle(550, 'linear');
    });
});

Here is the jQuery API page about .ready(): http://api.jquery.com/ready/

Upvotes: 0

yodog
yodog

Reputation: 6242

your script.js is being loaded before your document is ready.

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

You can defer your script until window.onload to make sure jQuery is loaded before your script is executed.

<script defer="defer" type="text/javascript" src="script.js"></script>

Upvotes: 0

Related Questions