Hi Everyone,

 

I have a section of my site that checks the height of my image, (this image is dynamic), then positions my other elements regarding to the height of the image. This works fine, it's not the problem.

 

The problem is everytime my page loads the elements that are positioned dynamically to the image jump up and down for about a second then they rest in their proper position. The code works fine it's just annoying that it diminishes the look of the page. Here's the code:

 

 

 

 
       $(window).load(function() {
 
           // finds the height of the image in the user-details div
            var top = $(".user-details").height();
             top = top + 50;
      
          // reposition the page in relation to the image height
           $("#contact-details").css("top", top);
   
                 var addTop = $(".user-details").height();
                 addTop = addTop + 500;
   
     });
 
 

 

The code works but it's just the fact that for a split second the bottom element jumps up and down on page load. If any one has any idea then let me know.

 

Thanks.

Could you hide the containing div with css, then show it after your using js? You wouldnt see the jump then

Ah but also people with out JS enabled would never see the content... not great!

The event that triggers your script $(window).load happens when all elements of the page are loaded. That's why you page loads first and then repositions the elements.

The problem is that the script needs to measure the height of the user-details class so the script can't be executed before that element is fully loaded and rendered in the browser. For that reason hiding it won't help. The way I see it there are two solutions:

1. Execute the event when the needed elements are loaded but before the entire page is rendered. (WARNING this will make the site apear to load slower).

2. Try to reduce the overall loadtime of the page so that the repositioning happens faster.

I was thinking about using a set timeout method and set it for 1 - 1.5 seconds. It may look better than having elements jump up and down on the screen on plage load. Thank for replying.

have you tried your code with document.ready function?

How about something simple like...

 

<body onload = "document.body.style.visibility='visible';" style="visibility:hidden;">

 

to keep the page from displaying until all of its content has been positioned?