CODEWITHSUNDEEP
javascriptjqueryclickhideshow
Benny
Benny

Reputation: 7

Jquery hide show not working properly

I'm having trouble solving a problem that causes my script to fail.

Here is the code I used. Although it works flawlessly in JsFiddle, when I implement it in my site it doesn't work at all.

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $("#overlay").hide();
    $("#work").click(function(e){
        $("#overlay").toggle();
        e.stopPropagation();
    });
    $(document).click(function(){
        $("#overlay").hide();
    });
    $("#overlay").click(function(e){
        e.stopPropagation();
    });
    </script>
    </head>

    <body>
    <div id="work"></div>
    <div id="overlay"><iframe width="100%" height="100%" src="//www.youtube.com/embed/uQFGkGk4PSc" frameborder="0" allowfullscreen></iframe></div>
    </body>

Link to site

Thanks!

Upvotes: 0

Views: 767

Answers (1)

balzafin
balzafin

Reputation: 1426

You just need to wrap your code like this:

$(document).ready(function() {

    $("#overlay").hide();
    $("#work").click(function(e){
        $("#overlay").toggle();
        e.stopPropagation();
    });
    $(document).click(function(){
        $("#overlay").hide();
    });
    $("#overlay").click(function(e){
        e.stopPropagation();
    });

});

On default, Fiddle runs the code on onLoad and you are placing it in the <head>. You can set the option on the left top corner. I changed it to in <head> and it's not working there either: http://jsfiddle.net/N9cbk/8/

Read more about $( document ).ready() here: http://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 2

Related Questions