Question

I have a problem. I have copied exactly the same code as I have on my page and it works fine on jsfiddle here. This code doesn’t work when I paste it to html/css/js. Is there any reason that happens? what is wrong with the code?
I’m sure it’s something simple, but I just can’t figure it out. Thank you very much for your help in advance.
BTW: here is a source code if you need one. Need to wait 4 seconds as it will slide down. The X button should hide the wholde div, but it doesn’t. that’s the issue.

the code is here:

     <div id="wrapper">
        <div id="cookies">
            <p>Leed City Wifi uses cookies. By continuing to browse the site you are agreeing to use our cookies: </p>
            <a href="terms-cookies.html">Find out more</a>
            <a href="#" id="close" > <img src="http://content.captive-portal.com/cookies/_images/close.png"/></a>
        </div>        
</div> 

and jquery here:

$(document).ready(function(){
$('#wrapper').hide();
function delay() {
    $('#wrapper').slideDown(500);
}
setTimeout(delay, 500);
});

$(document).ready(function(){
$('#cookies').hide();
function delay() {
    $('#cookies').slideDown(200);
}
setTimeout(delay, 4000);
});


$("#close").click(function() {
 $("#cookies").slideUp(function() {
     window.location.href = "#";
     });
 });

jsfiddle here.
Thank you for your time in advance

Answer 1

Change your delay.js file to this…

$(document).ready(function(){
    $('#wrapper').hide();
    $('#cookies').hide();

    setTimeout(function() {
        $('#wrapper').slideDown(500);
    }, 500);

    setTimeout(function() {
        $('#cookies').slideDown(200);
    }, 4000);

    $("#close").click(function() {
        $("#cookies").slideUp(function() {
            window.location.href = "#";
        });
    });
});

I’ve put it all in one document.ready block, rather than multiple ones, put the functions directly into the timeout calls, and fixed a syntax error with the close click handler (you were missing some closing parenthesis).

Also, the close click handler needed to be assigned during document.ready, which it previously wasn’t. That’s why it worked on jsFiddle, because that used onLoad by default.