I am using a bunch of divisons to make a slide show...I can get them to hide ok by changing the visiblity hidden, but how do I show the hidden div?...I tried the logical thing (change the visiblity to visible) but that didn't work...what is the propert name to show it?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
division styles... 1
- Thread starter mackey333
- Start date
- Thread starter
- #3
-
1
- #4
All those things should work - and display:none is particularly good when you don't want scrollbars to appear - if the hidden element is large and/or placed at bottom of page.
If they are not working you must be leaving somthing out when you try to change them, are you sure to use style? perhaps post your show/hide function.
b2 - benbiddington@surf4nix.com
If they are not working you must be leaving somthing out when you try to change them, are you sure to use style? perhaps post your show/hide function.
b2 - benbiddington@surf4nix.com
- Thread starter
- #5
ok here is a segment of the function and code:
Code:
<script language="javascript">
function timeout() {
setTimeout('doChange', 2000)
}
function doChange() {
document.getElementById('DivImg1').style.visibility = 'hidden';
[b]document.getElementById('DivImg2').style.visibility = 'none';[/b]
}
</script>
</head>
<body bgColor="FF0000" onLoad="timeout()">
<div align="center" id="testDiv1" style="position: relative; background-color: #FFFFFF; height: 100%; width: 100%">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div align="center" id="testImg1">
<img border="0" src="testPic.gif" width="24" height="69">
</div>
<div align="center" id="DivImg2" style: hidden>
<img border="0" src="testPic.gif" width="24" height="69">
</div>
</td>
</tr>
</table>
</div>
</body>- Thread starter
- #6
First of all - the setTimeout piece is not calling anything, you have to specify a function:
function timeout() {
setTimeout('doChange()', 2000)
}
Also - the "none" option is for display - not visibility.
function doChange() {
document.getElementById('DivImg1').style.visibility = 'hidden';
document.getElementById('DivImg1').style.display='none'
}
But I thought you were having trouble showing it again? Try this function if you like - it has a toggle switch, so every time you click the button or whatever - it will either hide or show - depending what it did last time.
var show = true;
function doChange() {
if(!show){
document.getElementById('DivImg1').style.visibility = 'hidden';
document.getElementById('DivImg1').style.display = 'none'
}
else{
document.getElementById('DivImg1').style.visibility = 'visible';
document.getElementById('DivImg1').style.display = 'block'
}
show =(show)?false:true;
}
Also visibility="show" is Netscape's lame idea.
b2 - benbiddington@surf4nix.com
function timeout() {
setTimeout('doChange()', 2000)
}
Also - the "none" option is for display - not visibility.
function doChange() {
document.getElementById('DivImg1').style.visibility = 'hidden';
document.getElementById('DivImg1').style.display='none'
}
But I thought you were having trouble showing it again? Try this function if you like - it has a toggle switch, so every time you click the button or whatever - it will either hide or show - depending what it did last time.
var show = true;
function doChange() {
if(!show){
document.getElementById('DivImg1').style.visibility = 'hidden';
document.getElementById('DivImg1').style.display = 'none'
}
else{
document.getElementById('DivImg1').style.visibility = 'visible';
document.getElementById('DivImg1').style.display = 'block'
}
show =(show)?false:true;
}
Also visibility="show" is Netscape's lame idea.
b2 - benbiddington@surf4nix.com
- Thread starter
- #8
what do you mean the timeout isn't calling anything, you just rewrote what I had, also this is an automatic thing thats why the time out is there, there is more, I just didn't put every function down...ok I will try it with the different code when I get a chance..thanx
- Thread starter
- #9
ok..here is the whole code:
the first img shows up and goes away fine but the others won't show..what did I do now?...i'm starting to get mad now..nothing can be easy..any ideas?
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test</title>
<script language="javascript">
function timeout() {
setTimeout('doChange1()', 3000);
}
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.display = 'none';
setTimeout('doChange2()', 1000)
}
function doChange2() {
document.getElementById('testDivImg2').style.visibility = 'hidden';
document.getElementById('testDivImg3').style.display = 'none';
setTimeout('doChange3()', 1000)
}
function doChange3() {
document.getElementById('testDivImg3').style.visibility = 'hidden';
document.getElementById('testDivImg4').style.display = 'none';
setTimeout('doChange4()', 1000)
}
function doChange4() {
document.getElementById('testDivImg4').style.visibility = 'hidden';
document.getElementById('testDivImg5').style.display = 'none';
setTimeout('doChange5()', 1000)
}
function doChange5() {
document.getElementById('testDivImg5').style.visibility = 'hidden';
document.getElementById('testDivImg6').style.display = 'none';
}
</script>
</head>
<body bgColor="FF0000" onLoad="timeout()">
<div align="center" id="testDiv1" style="position: relative background-color: #FFFFFF; height: 100%; width: 100%">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div align="center" id="testDivImg1" style="position: absolute">
<img border="0" src="testPic1.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg2" style="position: absolute; visibility: hidden">
<img border="0" src="testPic2.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg3" style="position: absolute; visibility: hidden">
<img border="0" src="testPic3.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg4" style="position: absolute; visibility: hidden">
<img border="0" src="testPic4.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg5" style="position: absolute; visibility: hidden">
<img border="0" src="testPic5.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg6" style="position: absolute; visibility: hidden">
<img border="0" src="testPic6.gif" width="24" height="69">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>the first img shows up and goes away fine but the others won't show..what did I do now?...i'm starting to get mad now..nothing can be easy..any ideas?
- Thread starter
- #11
Actually. setTimeout is very annoying to work with, because they are all set at the start - so the way you have done it is one of the only ways to do it, rather than a complex for loop requiring consistent div names etc. (or write a sleep function)
The hiding is working for me. Ohhhh, wait, I see, you have some of your divs hidden - and thsoe ar the ones you are showing - why are you using display:none? Am I right by thinking that in the function below you want to show
testDivImg2? Because at the moment you are hiding it as well as TestDivImg1 - so change it visibility = "visible", instead of display - my apologies, a crossed wire has occured!
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.display = 'none';
setTimeout('doChange2()', 1000)
}
Otherwise, the way you are doing it is the most straight forward that I can see.
b2 - benbiddington@surf4nix.com
The hiding is working for me. Ohhhh, wait, I see, you have some of your divs hidden - and thsoe ar the ones you are showing - why are you using display:none? Am I right by thinking that in the function below you want to show
testDivImg2? Because at the moment you are hiding it as well as TestDivImg1 - so change it visibility = "visible", instead of display - my apologies, a crossed wire has occured!
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.display = 'none';
setTimeout('doChange2()', 1000)
}
Otherwise, the way you are doing it is the most straight forward that I can see.
b2 - benbiddington@surf4nix.com
- Thread starter
- #13
each function is supposed to hide the one that is showing and then show the next one...everything hides fine but doesn't show..do you think maybe it's being overrided by the hidden param. in the div's..should I make them hidden with javascript maybe?
- Thread starter
- #14
ok..now I'm really confused... here is the code...
for some reason everything shows up (doesn't hide) and then as it goes through the functions they disapear one at a time..what is going on?!?
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test page...</title>
<script language="javascript">
function timeout() {
if (document.getElementById) {
document.getElementById('testDivImg2').style.visiblity = 'hidden';
document.getElementById('testDivImg3').style.visiblity = 'hidden';
document.getElementById('testDivImg4').style.visiblity = 'hidden';
document.getElementById('testDivImg5').style.visiblity = 'hidden';
document.getElementById('testDivImg6').style.visiblity = 'hidden';
}
//alert(document.getElementById('testDivImg3').style.visiblity)
setTimeout('doChange1()', 3000);
}
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.display = 'none';
//alert("doChange1: td1 " + document.getElementById('testDivImg1').style.visibilty + " td2" + document.getElementById('testDivImg2').style.display)
setTimeout('doChange2()', 1000)
}
function doChange2() {
document.getElementById('testDivImg2').style.visibility = 'hidden';
document.getElementById('testDivImg3').style.display = 'none';
//alert("doChange2: td2 " + document.getElementById('testDivImg2').style.visibilty + " td3 " + document.getElementByID('testDivImg3').style.display)
setTimeout('doChange3()', 1000)
}
function doChange3() {
document.getElementById('testDivImg3').style.visibility = 'hidden';
document.getElementById('testDivImg4').style.display = 'none';
//alert("doChange3: td4 " + document.getElementById('testDivImg2').style.visibilty + " td4 " + document.getElementByID('testDivImg3').style.display)
setTimeout('doChange4()', 1000)
}
function doChange4() {
document.getElementById('testDivImg4').style.visibility = 'hidden';
document.getElementById('testDivImg5').style.display = 'none';
//alert("doChange4: td4 " + document.getElementById('testDivImg2').style.visibilty + " td5 " + document.getElementByID('testDivImg3').style.display)
setTimeout('doChange5()', 1000)
}
function doChange5() {
document.getElementById('testDivImg5').style.visibility = 'hidden';
document.getElementById('testDivImg6').style.display = 'none';
//alert("doChange5: td5 " + document.getElementById('testDivImg2').style.visibilty + " td6 " + document.getElementByID('testDivImg3').style.display)
}
</script>
</head>
<body bgColor="FF0000" onLoad="timeout()">
<div align="center" id="testDiv1" style="position: relative background-color: #FFFFFF; height: 100%; width: 100%">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div align="center" id="testDivImg1" style="position: absolute">
<img border="0" src="testPic1.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg2" style="position: absolute">
<img border="0" src="testPic2.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg3" style="position: absolute">
<img border="0" src="testPic3.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg4" style="position: absolute">
<img border="0" src="testPic4.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg5" style="position: absolute">
<img border="0" src="testPic5.gif" width="24" height="69">
</div>
<div align="center" id="testDivImg6" style="position: absolute">
<img border="0" src="testPic6.gif" width="24" height="69">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>for some reason everything shows up (doesn't hide) and then as it goes through the functions they disapear one at a time..what is going on?!?
Well display:none says to the browser, effectively the element isn't there - don't even allow space for it. I think in the designation of your div's, you should set their visibility to hidden - Oh, you just have a spelling error in visibility - correct that in the function timeout, then modify your your show/hide functins to be like:
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.visibility = 'visible';
setTimeout('doChange2()', 1000)
}
So this function hides testDivImg1 - and then shows testDivImg2, this is what you mean aye? (No I'm not Canadian)
b2 - benbiddington@surf4nix.com
function doChange1() {
document.getElementById('testDivImg1').style.visibility = 'hidden';
document.getElementById('testDivImg2').style.visibility = 'visible';
setTimeout('doChange2()', 1000)
}
So this function hides testDivImg1 - and then shows testDivImg2, this is what you mean aye? (No I'm not Canadian)
b2 - benbiddington@surf4nix.com
- Thread starter
- #16
Victor- Status
Similar threads
- Locked
- Question