...

View Full Version : when page loads it displays hidden area then hides it



tsclan
01-29-2005, 01:17 PM
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

Heres the code I have at the moment



<html>
<script type="text/javascript">
function hideFileInputs(){
for (var i=1;i<=2;i++){
document.getElementById("row"+i+"").style.display="none";
}
}
</script>
<script language=JavaScript>
function hideRow(obj) {
for (var x=1;x<=2;x++){
if (document.getElementById("row"+x+"").style.display == ""){
document.getElementById("row"+x+"").style.display = "none";
}
}
if (document.getElementById(obj).style.display != ""){
document.getElementById(obj).style.display = "";
} else {
document.getElementById(obj).style.display = "none";
}
}

</script>
<body onload="hideFileInputs()">
<div align="center">
<a href="#" onclick="hideRow('row1')">Hide/Show row1</a>
<a href="#" onclick="hideRow('row2')">Hide/Show row2</a>
<br>
<br>
</div>
<form name="form1" method="post" action="">
<div id="row1">
<table width="10" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../images/infobox_03.gif" width="200" height="34"></td>
</tr>
<tr>
<td width="15" background="../images/infobox_05.gif">&nbsp;</td>
<td width="172" background="../images/infobox_06.gif"><span class="bod">GAME SERVERS CONTROLLED<br>
Some Big pics and stuff here <p></p></td>
<td width="13" background="../images/infobox_07.gif">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><img src="../images/infobox_09.gif" width="200" height="31"></td>
</tr>
</table>
</div>
<div id="row2">
<table width="10" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../images/infobox_03.gif" width="200" height="34"></td>
</tr>
<tr>
<td width="15" background="../images/infobox_05.gif">&nbsp;</td>
<td width="172" background="../images/infobox_06.gif"><span class="bod">GAME SERVERS CONTROLLED<br>
This is the max number of game servers that the version can control.
pauhdsfpahfadh -Enter any RCON command and get the results of that command.</p>
<p></p></td>
<td width="13" background="../images/infobox_07.gif">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><img src="../images/infobox_09.gif" width="200" height="31"></td>
</tr>
</table>
</div></form>
<p align="center">This is test text to see what happens </p>
</body>
</html>


Thanks hope you can help

mcdougals4all
01-29-2005, 03:17 PM
It likely has to do with the 'body onload'. The browser's not executing the script until the rest of the page is loaded.

This article explains how to compensate (http://www.bobbyvandersluis.com/articles/unobtrusiveshowhide.php):


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum