If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

[RESOLVED] Calling script after page has completely finished loading?

Hello everyone.

I'm working on a slideshow for a portfolio-like page. In order to make sure that the portfolio-page never gets higher than the actual page, I'm binding document.resize after document.ready fires (using jQuery). However, this script is not working as it should, and I'm not sure why. The issue I'm having is that when the document loads, and the slideshow fires the first time, the images end up sort of stacked on top of each other, and not side-by-side.

This is where it all starts, sort of. It binds to the event, fires it and then starts up the slideShow.

The first time the slideshow fires, we get this, which looks horrible. Hopefully my code is understandable, I'm quite new to JS and jQuery, but I think there is something else playing here. Sadly, I do not have a webserver where I can put up the page for view right now without exposing my own computer.page.jpg

Anyone have any ideas? My guess is that there is some desync when firing, so that the document is NOT ready when it tries to resize the images and calculate their positions, and then it all gets buggered from there.

are you using the onload event either in your JS or in your HTML body tag?

Ex:

Code:

<body onload="myFunctionToFireAfterPageCompletelyLoads();">

Does this help?

Thx,

LP

I've tried it with an onload originally, but I'm under the impression that this is both outdated and bad practice. I do use a similar function, jQuery's $(document).ready(...). Sadly, it does not seem to quite do the trick here.

Also, where are you loading your js file? I know some of my apps I have to load them very first and sometimes very last, if you load your js right before closing body tag all your HTML elements s/b there before the function fires.

I've always been thaught that CSS is look-n-feel, HTML is layout and the rest is scripts, and it's a philosophy that's served me well. It could very well be a simplification by my teachers to make us not do stupid things when we started.

With that said, I've solved the issue now -- I was incorrectly scoping my variables and trying to do object oriented programming in JS. This lead to some variables not being initiated when used, but instead of erroring like most languages I'm used to; it skipped them over in arithmethics. I found this out by writing a ton of alert(varname) and checking each value by itself, and then correcting these occurences in whichever way was most convenient.