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.

Enjoy an ad free experience by logging in. Not a member yet? Register.

when page loads it displays hidden area then hides it

Yeah below I have that script that hides these two things then when the approprate link is clicked it shows 1 of the 2 things depending on the link pressed

But the problem comes when what I want to hide contains a whole lot of text with pictures for some strange reason as the page loads it displays all the hidden stuff (text pictures and all) then makes them disapear but i dont want this i want it not to show at all till a link has been pressed

The silent tears of the onload event
It is a public secret that the window.onload event lies at the core of this problem. It will only execute after the whole document, including all page assets like images and objects, is loaded. So if you work with a lot of content, a series of images or a slow server, you will always experience this negative side-effect.

When you apply unobtrusive behavior, the window.onload event by itself is a poor tool. What we ideally would like to use is an event handler that executes as soon as a certain element is loaded, or one that fires after the document structure is read and before any assets are loaded, like Peter-Paul Koch suggested. Unfortunately these events do not exist yet. It seems that developers around the world will keep on hitting this same brick wall, until a set of additional load events are added to the JavaScript specifications.

A band-aid while awaiting the real cure
To solve this display issue, we could add the IDs or classes of our toggleable elements to our CSS file and give it a default display: none; declaration. However by doing this we would breach the accessibility of our document, because when JavaScript is unsupported or disabled, all toggleable elements will be hidden.

The solution is very close. If we would put these style declarations in a separate external CSS file and would call this file from our linked JavaScript file, this would solve both our problems. First the styles that hide the toggleable sections will be loaded as soon as our external JavaScript file is included and executed in the head of our document. Second, this CSS file will only be loaded when JavaScript is available.

So a document.write('<link rel="stylesheet" type="text/css" href="js_hide.css" />'); would do the trick. We should only load this style sheet when there is enough W3C DOM support to add the actual show/hide behavior.

Computer, kill Flanders... Did I hear my name? My ears are burning...
Good start. Now finish the job.