webmonkey237 webmonkey237 - 5 months ago 20
jQuery Question

jQuery - Side panel jumping on page load using cookie

I have a script I have been working on for a slide in/out panel, as a final piece I have incorporated jQuery Cookie which i'm not sure I have done correctly but it works fine when I test it locally however when I reload/refresh the page the panel loads expanded and then quickly shuts, how can I get the cookie to just keep it shut on page load.
Fiddle

$(function () {
if ($.cookie('myCookieName')) {
$('#slideClick').click();
}
});

$('#slideClick').click(function () {
var it = $(this).data('it') || 1;
switch (it) {
case 1:
$(this).parent().animate({ right: '-345px' }, { queue: false, duration: 500 });
$(".slideClose").addClass('hideBtn');
$(".slideOpen").removeClass('hideBtn');
break;
case 2:
$(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
$(".slideOpen").addClass('hideBtn');
$(".slideClose").removeClass('hideBtn');
break;
}
it++;
if (it > 2) it = 1;
$(this).data('it', it);
$.cookie('myCookieName', '1')
});


Thanks

Answer

By calling $('#slideClick').click(), you're telling it to animate, which takes 0.5 seconds. Instead, you may want to immediately hide the panel by doing something like this:

$(function () {
    if ($.cookie('myCookieName')) {
        $('#slideOut').css('right','-345px');
    }
});