Forum Moderators: open
The page consists of a left table that is 200 px wide and includes absolutely positioned text navigation. The right table fills the rest of the page with thumbnails.
I put this in the head:
function load() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hide').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hide.visibility = 'hidden';
}
else { // IE 4
document.all.hide.style.visibility = 'hidden';
}
}
}
And this after the left table and before the thumbnails table in the body:
<div id="hide" style="position: absolute; left:201px; top:0px; background-color: #525252; layer-background-color: #525252; height: 100%;"></div>
Thank you
If you need to test it on a slow modem stickymail me and I'll try it at home.
If it's not working, what happens?
It looks like you're trying to hide your images with a 'screen' layer. The best way to do it would be to put a div around your pictures with style="visibility:hidden". Then in the load function (called from the body onload event <body onload="load()">) set the visibility of your surrounding div to visible.
Let me know if I'm off on the wrong track.
<edited to turn off smilies>
(edited by: tedster at 4:30 pm (utc) on May 9, 2002)
So if I set the div that surrounds the images to become visible in the body tag it would cover them until they’re all loaded and ready for viewing?
J
PS If you're images could take a while to load you might want to have another div saying 'loading' or something that shows until the page loads... otherwise the user might think they've hit a blank page! enjoy ;)
I'm obviously doing something wrong because it shows the images in IE6 with a 3px high white line across the bottom of the thumbnails table. The images don't show at all in NN4 and NN6.
<head>
<SCRIPT LANGUAGE="JavaScript">
function load() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('cover').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.cover.visibility = 'visible';
}
else { // IE 4
document.all.cover.style.visibility = 'visible';
}
}
}
</script>
</head>
<body onLoad="load()">
<The left table set to width: 200px and height: 99.5%>
The div around the thumbnails table:
<div id="cover" style="visibility: hidden; position: absolute; left:201px; top:0px; background-color: #ffffff; layer-background-color: #ffffff; height: 99.5%;">
<The table here>
</div>
absolute; left:201px;
Should be:
absolute: left:201px;
The results are almost the same, the difference is IE6 shows the images with a large white border.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function showonload() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('images').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.images.visibility = 'visible';
}
else { // IE 4
document.all.images.style.visibility = 'visible';
}
}
}
</script>
</head>
<body onLoad="showonload()">
The div around the thumbnails table:
<div id="images" style="visibility: hidden; position: absolute; left:201px; top:0px;">
The table here containing your images
</div>
</body>
</html>
