CODEWITHSUNDEEP
jquerytoggle
realph
realph

Reputation: 4671

Why Is toggle() Not Working?

I've got a jsFiddle working how I want: http://jsfiddle.net/6wuUc/64/

But for some reason, when I use the exact same code, I'm not getting the animation when I click the button. Here's the code I'm using on my page.

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" href="_/css/style.css">

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>

</head>

<body>

<div id="video">
    <div class="sublime">
        <p class="sv_play_button">Click</p>
    </div>    
</div>

</body>
</html>

And the CSS:

#video, #video .sv_play_button {position: absolute;}

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;}

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; }

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }​

Anyone got any idea why the toggle() isn't working on my page? Thanks in advance.

Upvotes: 0

Views: 7553

Answers (4)

ammy
ammy

Reputation: 1

You haven't wrapped your jquery in a $(document).ready() which is required to run any jquery events.

Upvotes: 0

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24526

Problem

You haven't wrapped your jquery in a $(document).ready() which is required to run any jquery events.

What is hapenning is that the javascript is attempting to run jquery code before jquery has even been loaded which is why you must wait until the document has loaded (with the use of .ready()).

Your new javascript should look like this:

$(document).ready( function() {
$('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
});

Note: Keep in mind that all your functions must be outside of this or they will not be callable. Also remember that this wrapper is a function so global variables must be defined outside of it.

if you don't have it referenced already, you will need to reference jquery in your head like so:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

References

Upvotes: 6

Fostah
Fostah

Reputation: 2946

You can also just move your script to the bottom of your page right above the </body> tag.

...
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>
</body>

Upvotes: 0

Thomas Jones
Thomas Jones

Reputation: 4962

its not working because you have the script executing before the page is loaded. When your script is running, the element you search for doesnt exist yet, so your jQuery selector doesnt find anything upon which to act.

wrap your function in a document ready block, and you should be all set.

jQuery(function(){
    your code here
})

reference: http://api.jquery.com/jQuery/#jQuery3

toggle also doesnt support the way you're calling it. http://api.jquery.com/toggle/

You can't pass two functions (as far as I can tell), as toggle only shows or hides an element. EDIT: MagicDev points out the toggle event api

Upvotes: 3

Related Questions