Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How to hide and show a div?

P

puffnstuff

macrumors 65816
Original poster
Jan 2, 2008
1,469
0
So I have divs with images in them. The main page displays one div w/ image and I have buttons each displaying a different div w/ an image.

In order to keep all the divs w/ images from showing up on the homepage I did this
HTML: 
<body onload="HideDIV('name')"

problem is if the page doesn't load fast enough you will see a quick flash w/ all the images. Any other way to do this?
 
Firstly, if you're using CSS you may want to use visibility:hidden instead of display:none.

Secondly, your onclick event handler will have to set the visibility property to visible. Something like this:

Code: 
function ShowImage(e) {
    document.getElementById(e).style.visibility="visible";
}

Where e is the id of the element you want to make visible.
 
The DOMContentLoaded event will trigger sooner than onLoad, though not all browsers support it. Below is code that will attach your function that you want to run when the page's DOM is loaded. This will likely keep the flash from being visible in browsers that support this event. This will also keep you from needing to add anything to your body tag.

PHP: 
function appendOnLoad(fx){
	try { // For browsers that know DOMContentLoaded (FF, Safari, Opera)
		document.addEventListener("DOMContentLoaded", fx, false);
	} 
	catch (e) { // IE
		window.attachEvent('onload', fx);
	}
}
appendOnLoad(HideDIV('name'));
 
nuxx said:
Firstly, if you're using CSS you may want to use visibility:hidden instead of display:none.

Secondly, your onclick event handler will have to set the visibility property to visible. Something like this:

Code: 
function ShowImage(e) {
    document.getElementById(e).style.visibility="visible";
}

Where e is the id of the element you want to make visible.
Click to expand...

thanks this worked

angelwatt said:
The DOMContentLoaded event will trigger sooner than onLoad, though not all browsers support it. Below is code that will attach your function that you want to run when the page's DOM is loaded. This will likely keep the flash from being visible in browsers that support this event. This will also keep you from needing to add anything to your body tag.

PHP: 
function appendOnLoad(fx){
	try { // For browsers that know DOMContentLoaded (FF, Safari, Opera)
		document.addEventListener("DOMContentLoaded", fx, false);
	} 
	catch (e) { // IE
		window.attachEvent('onload', fx);
	}
}
appendOnLoad(HideDIV('name'));
Click to expand...

alright I will keep this in mind too
 
I actually just did something like this, granted it was for a chat engine but the principal is the same, when visible I set the display to block and when invisible it is set to none. Initially the display is set to none so it never shows up. Heres the code that I used, its a bit different but should help.

Code: 
var slider = document.getElementById('Slider');

function Rise() {
    slider.style.display = 'block';
}

function Fall() {
    slider.style.display = 'none';
   
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back