I have been developing a website where the content section is loaded dynamically when users click on links in the navigation bar. These links are connected to
jQuery.load(<some HTML page>)One particular page that I'm having trouble with loads into this content area as a photo gallery (let's call it photos.html). Users can scroll through the images, and more photos are loaded dynamically. Here's how it functions:
<div id="scrolling_window">
<div id="container">
<ul id="list">
<!-- Content loaded dynamically. -->
</ul>
<div id="loader">
Page Loaded.
</div>
</div>
</div>
The scrolling_window has a fixed height set in css, while the container expands dynamically to fit all the images.
In my javascript code, there is a function that determines when the bottom of the scrolling window is nearing the end of the container. When this happens, more images are loaded. However, when accessing the gallery page directly by entering the URL manually, everything works fine. But when loading it within the existing page using jQuery.load, it doesn't function correctly.
I discovered that the issue lies in the sizing calculations in the javascript being based on CSS-defined container sizes. Some experimentation led me to these findings:
- Manually opening
photos.htmlin a browser only works if the CSS file is loaded before the javascript file. - When loading the content via jQuery.load, it functions properly if the
scrolling_windowis styled like<div id="scrolling_window" style="height:150px"> - Loading the CSS file on the main page
index.htmlalso solves the issue when viewing the content dynamically.
Essentially, it appears that the CSS file must be loaded prior to executing the javascript...
Therefore, my question is... Is there a way to ensure that when loading an HTML page into an existing <div> element, the referenced CSS on the loaded page is loaded before the javascript runs?