(jquery) prevent div from showing during page load

StackOverflow https://stackoverflow.com/questions/12397199

  •  01-07-2021
  •  | 
  •  

Question

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();
  }
});

Was it helpful?

Solution

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');

OTHER TIPS

It can be as simple as:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Let's hide and show a div</title>

<style type="text/css">
#myHiddenDiv { visibility: hidden; }
</style>

</head>

<body>

<div id="myHiddenDiv">
Hidden until after the script loads. It will be imperceptible in most cases. But if    you comment out or remove the script, the div will indeed be hidden!
</div>


<script type="text/javascript">
document.getElementById('myHiddenDiv').style.visibility = 'visible';
</script>

</body>
</html>

I think it's animating the .hide() event, try style="display:none;" as part of the html for the $("#homiesSlideButton") element.

In the CSS for your div, set the div to have the property

visibility: hidden;

When the page has loaded,

$("#yourDivId").show();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top