Solved

Timing issue with modifying container and image CSS after page load with jQuery/Javascript

Posted on 2014-10-23
17
322 Views
Last Modified: 2014-10-23
I have a Javascript function called updateScreen() which does a number of things, including modifying the CSS of a DIV container and IMG contained within it. Here is the actual Javascript:

if (screenwidth<=568){
	mobilenavoffset=parseInt(nav1midheight-(nav1midheight*nav1scrollpercentage));
	$('div#homebg').css({'top':mobilenavoffset+'px'});
} else {
	$('div#homebg').css({'top':'0'});
}
if (screenratio>1.53){
	$('div#homebg img').css({'width':'100%', 'height':'auto', 'top':'-'+homebgheightoffset+'px', 'left':'0'});
} else {
	$('div#homebg img').css({'width':'auto', 'height':'100%', 'top':'0', 'left':'-'+homebgwidthoffset+'px'});
}

Open in new window


There are a few calculations and other things in the function prior to all this. Anyway, I call this function on page load, window resize, scroll, touchmove and orientation change, and it does what I want.

What is not working is the "on page load" call. Inside of my normal jQuery "on page load", I have this (among other things):

$(function(){
   updateScreen();
});

Open in new window


However, the CSS updates don't happen until I scroll or resize the window. I verified that the function is being called on page load, its just not applying the CSS.

My first thought is that the function is being called too quickly. Is this a possibility? I'm wondering what other things I should be checking for, to see what the issue might be. I would appreciate any advice to steer me in the right direction.

Thank you!
0
Comment
Question by:bbdesign
  • 10
  • 6
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40399784
What is updateScreen();

How and when is this called
if (screenwidth<=568){
0
 

Author Comment

by:bbdesign
ID: 40399805
updateScreen() is the function that contains the first block of code in my original question.

The jQuery CSS functions are called differently depending on the value of the "screenwidth" variable. As I said, updateScreen() is called on:

Page Load
Window Resize
Scroll
Touchmove
OrientationChange
0
 
LVL 58

Expert Comment

by:Gary
ID: 40399865
Where is you onload code?

Have you a link?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40399878
Why would you not use media queries to apply the alternate CSS?

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 40399884
^^^^
Good point
0
 

Author Comment

by:bbdesign
ID: 40399948
Because CSS media queries don't allow me to do the calculations required. I've tried that route, for a long time, and only Javascript seems to do exactly what I want.
0
 

Author Comment

by:bbdesign
ID: 40399956
0
 

Author Comment

by:bbdesign
ID: 40399960
To see the issue (I am testing with Firefox), load that page. Then scroll just slightly, and you will see the large background image jump slightly. That jump is what is missing from the On Page Load, it should happen right away instead of waiting for you to scroll the page.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:bbdesign
ID: 40399985
The "top:-XXX" is what its supposed to be doing, I want a negative number there. The problem is that its not doing that on page load. At least for me here, I have to scroll or resize the browser to make that happen. I want it to happen immediately on page load.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40400032
homebgheightoffset is 0 at page load
Could be something to do with their being no image when the script runs.
0
 

Author Comment

by:bbdesign
ID: 40400037
I started experimenting with setTimeout. Instead of just calling the function on page load, I added:

setTimeout(updateScreen, 200) - image did not update
setTimeout(updateScreen, 300) - image did not update
setTimeout(updateScreen, 400) - WORKED
setTimeout(updateScreen, 500) - WORKED
setTimeout(updateScreen, 600) - WORKED
setTimeout(updateScreen, 700) - WORKED

So it seems like between 300 and 400 milliseconds is what it takes for everything to settle down to the point where I can run my script. It creates a noticeable jump, I wish I knew what is going on with this and why I can't do it immediately on page load.
0
 

Author Comment

by:bbdesign
ID: 40400038
You are correct, homebgheightoffset is zero. Maybe that is the problem, I'm checking into that.
0
 

Author Comment

by:bbdesign
ID: 40400057
I found the problem. The function is calculating a value based on an image which is fading in (via jQuery animation). The function is being called before the image is finished fading in, therefore getting an incorrect value. I assume there is no way to get the height of an image before it is faded in? This is my code:

homebgheight=$('div#homebg img').height();

Open in new window


Its either because the image has not finished fading in yet, or because the image has not been loaded by the browser yet, not sure which.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40400078
No, when that script runs there is no image,
You could change the onload to wait for the image to load

$("img.rwdimage").on('load',function(){...
0
 

Author Comment

by:bbdesign
ID: 40400418
I think I have this working now. I would love to hear if you agree this is a good solution:

1. Apply display:none and visibility:hidden to the background image via CSS.
2. On img.rwdimage "load", call updateScreen() which handles all the calculations.
3. Then, set visibility:visible.
4. Fade the image in (removes display:none).

From what I understand, visibility:hidden should allow the image to load but still take up space, therefore I can grab the image's dimensions.

Seems to work so far.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40400422
Yep, visibility hidden just hides it while occupying the same space, while display none 'removes' it from the page
0
 

Author Comment

by:bbdesign
ID: 40400465
I think I'm good for now, thanks for your help.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now