If you goto www.rambocats.com, as the page loads you'll see this bottom-center div showing up for a second or two, then disappears. (Div says "Gallery II" in pink letters). It's supposed to only appear once you've scrolled down to about 2/3 of the page. How do I prevent it from showing during initial load?
Here's the jQuery:
$(document).ready(function(){
var open = false;
$('#homiesSlideButton').click(function() {
if(open === false) {
$('#homiesSlideContent').animate({ height:'610px' });
$(this).css('backgroundPosition', 'bottom left');
$("#homies-wrapper img").peTransitionHilight({ // image highlight/transitions plugin
slideshow:true,
transition:"all",
duration:1500,
delay:4444, boost:0.3
});
open = true;
} else {
$('#homiesSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
$("#homiesSlideButton").hide();
$(window).scroll(function(){
if($(window).scrollTop()>4444){ // position on page when button appears
$("#homiesSlideButton").fadeIn();
}else{
$("#homiesSlideButton").fadeOut();
}
});
$(window).scroll(function(){
if($(window).scrollTop()>4444){ // position on page when button disappears
$("#homiesSlideContent").fadeIn();
}else{
$("#homiesSlideContent").fadeOut();
}
});
What's happening is that it's set to be visible by default, so it shows before the javascript/jquery runs to hide it.
What I tend to do for items that should not be visible from the start is add a CSS class to them that is set to display: none;
or visibility: hidden;
, like so:
.hide {
display: none;
}
then using jquery to remove the class after calling .hide()
. on the element:
$('#elementId').hide().removeClass('hide');