Why does my JS code act so intermittently?

Question

The JS code below is meant to get the height of the browser and the height of the .banner div. If the banner height is greater than the browser height, append two divs (.title and .social) to the body otherwise don't do anything and leave .title and .social divs where they are.

I'm also wanting the .title and .social divs to fade out when a user scrolls down the page and fade in when they get back to the top of the page.

The problem

This code does work but not all the time. Sometimes it will display correctly other times it won't. By that I mean the height of div.banner can be greater than the height of the browser window yet .title and .social will not be appended to the body. Is there anything wrong with this code that could cause this issue to occur?

$(document).ready(function () {

// fade in/fade out banner titles
$(window).trigger('scroll');

var divs = $('.social, div.banner .title'); 
$(window).scroll(function(){
   if($(window).scrollTop() < 10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});

// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height

if (bannerHeight > windowHeight) {
    $("body").append($('.banner .title'));
    $("body").append($('.social'));

}
else {
    //Display .title and .social in .banner div (as originally in HTML)
}
});

My HTML code that is on page load for reference:

<div class="banner y1">

    <div class="title" id="feature-title">
        <!-- title content here -->
    </div>

    <div class="social" id="feature-social">

        <!-- social content here -->

    </div>
</div>

Are there images loading in those divs? `$(document).ready` fires after the DOM is ready but (often) before the images are fully loaded; if an image isn't loaded completely, its height is computed to be zero. You can resolve this by specifying the height of your image in its HTML attributes. — Blazemonger, Jul 11 '12 at 12:52
I notice you trigger the "scroll" event before binding a scroll handler - is that on purpose? — nnnnnn, Jul 11 '12 at 13:17
@Blazemonger div.banner does contain an image but the height will always be unknown because its a fluid layout (responsive etc.). Can I get around this? — egr103, Jul 11 '12 at 13:23
@nnnnnn No its not on purpose. Would you recommend to switch the order around? — egr103, Jul 11 '12 at 13:23
When you trigger the event only handlers already bound will be called. So if you want your handler to be called then yes, switch them around. — nnnnnn, Jul 11 '12 at 13:30
Yes, you can detect when JUST the image is loaded, but it's complicated because normally the `.load` event isn't fired when images are loaded from cache. See [this question](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) for workarounds. — Blazemonger, Jul 11 '12 at 14:05

score 0 · Answer 1 · answered Jul 11 '12 at 13:29

0

If height changes on images you should use onload method.

http://api.jquery.com/load-event/

answered Jul 11 '12 at 13:29

ymutlu

6,585
4
35
47

Why does my JS code act so intermittently?

1 Answers1