Hide UL elements until page loads

hi there i assume this is fairly simple to do! however i cant seem to find a solution that works.

i have links which use shadowbox to load content as an iframe, but in ie if the page is not loaded it takes you direct to the html page instead.

i thought if i could hide the ul elements which contain the links until the page loads this would work.

dows any body know how i can do this with unobtrusive javascript ideally?

	<ul id="cssdropdown">
											<li>
												<a href="index.html" id="home" name="home">Home</a>
											</li>
											<li>
												<a rel="shadowbox;width=800;height=510" class="option" title="Location" href="fla/map.swf">Location</a>
											</li>
											<li>
												<a href="eating.html" id="eating" name="eating">Eating</a>
											</li>
											<li>
												<a href="corporate.html" id="corporate" name="corporate">Corporate &amp; Events</a>
											</li>
											<li>
												<a href="wholesale.html" id="wholesale" name="wholesale">Wholesale</a>
											</li>
											<li>
												<a href="booking.html" id="booking" name="booking">Bookings</a>
											</li>
											<li>
												<a href="contact.html" id="contact" name="contact">Contact</a>
											</li>
										</ul>

Code (markup):

thanks plum

 

I could do it using mootools framework.

 

that's not how it works, really. i am not the best at explaining but here it is in a nutshell:

when you interface with elements that are a part of the document's object model (DOM), there's a need to do so only after the browser fires an event, notifying you it's ready to use the DOM. Until then, it locks it to prevent unauthorised access that may end up in attempts to modify elements as they are still being rendered and analysed, often with unexpected results or even crashes (IE6 has some nasty hotfixes to prevent such)

what does all of that mean in reality? your code attempts to run and query the DOM for children of the "cssdropdown" node in order to include / turn into links. However, with the DOM being unavailable, the selector will return an empty set and it wont attach. I find some browsers tend to release the DOM earlier than others - which is why you may get inconsistent results.

the solution is to bind all calls to the dom into an anonymous wrapper that runs after the "domready" event has been fired. in the main frameworks they can go like so:

$(document).ready(function() {
    // do stuff in jquery
});

window.addEvent("domready", function() {
    // do stuff in mootools
});

PHP:

in your shadowbox, which seems framework independent, usage is setup similarly (http://www.mjijackson.com/shadowbox/doc/usage.html)

<script type="text/javascript" src="shadowbox-base.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'my/skin/dir'); // use the "classic" skin
Shadowbox.loadLanguage('en', 'my/lang/dir'); // use the English language
Shadowbox.loadPlayer(['img', 'qt'], 'my/player/dir'); // use img and qt players

window.onload = Shadowbox.init;

</script>

PHP:

it relies on window.onload as the event which will return a document that's ready to modify -- which can be rather buggy - read http://peter.michaux.ca/articles/the-window-onload-problem-still

on the page linked above, there is a wrapper by dean edwards which can make the onload fire sooner and in a more reliable way for all browsers. there is a substantial difference between an onload and onready - one means the page has finished loading in all of its entities and the other means it has loaded enough to know what is important so we can already start doing what we want w/o affecting it.

ideally, use a framework like mootools or put this into a delayed function like so:

... 
setTimeout(function() {
    shadowbox.init(); 
}, 2000); // delay it by 2 seconds. 

PHP:

good luck

 

that was really informative..

 

interesting thank you very much!