PDA

Volledige versie bekijken : JS div-hide code aanpassen

Pimm
%Europe/Berlin %652 %2005, 16:40
Lo gasten,

Zoals jullie misschien weten, en misschien ook niet ben ik niet zo thuis in JS.
Ik heb de volgende code van het internet gehaald en aangepast:<html><head><script language="javascript">function toggleLayer(whichLayer) {
if (document.getElementById) {
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
} else if (document.all) {
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
} else if (document.layers) {
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}</script>
<style type="text/css">
<!--
div {
margin: 0px 20px 0px 20px;
display: none;
}
-->
</style>
</head>
<body><div id="film1">
Film 1
</div><div id="film2">
Film 2
</div><div id="film3">
Film 3
</div><div id="film4">
Film 4
</div><div id="film5">
Film 5
</div>
<a href="javascript:toggleLayer('film1');">Show film 1!</a><br>
<a href="javascript:toggleLayer('film2');">Show film 2!</a><br>
<a href="javascript:toggleLayer('film3');">Show film 3!</a><br>
<a href="javascript:toggleLayer('film4');">Show film 4!</a><br>
<a href="javascript:toggleLayer('film5');">Show film 5!</a>
</body></html>Dat werkt goed. Als je op een show knop drukt laat hij die zien, maar nu wil ik de functie zo aanpassen dat hij de andere 4 weer hide...
Heeft iemand enig idee hoe je zo iets zou kunnen doen?

Alvast bedankt!
esparadrapo
%Europe/Berlin %598 %2005, 15:21
ik denk dat ik je kan helpen...

als je nu een for-lus in je functie zet


function toggleLayer(film){
for(var i=1; i<5; i++){
if(i == film){
whichLayer="film"+i;
document.all[whichLayer]style.visibility? "": "visible";
}else{
whichLayer="film"+i;
document.all[whichLayer]style.visibility? "": "hidden";

}
}
}

aan je knop...
<a href="javascript:toggleLayer('1');">Show film 1!</a><br> film is dan 1, 2, enzo....


ik heb het wel niet getest, maar denk dat het moet werken, anders laat het weten dan maak ik een voorbeeldje ;-)
esparadrapo
%Europe/Berlin %645 %2005, 16:29
<html><head><script language="javascript">
var temp="";
function toggleLayer(film){

if(temp!=""){
var style2= document.getElementById(temp).style;
style2.visibility="hidden";
}

var whichLayer=film;
var style2 = document.getElementById(whichLayer).style;
style2.visibility="visible";

temp=whichLayer
}
</script>
<style type="text/css">
<!--
div {
margin: 0px 20px 0px 20px;
visibility: hidden;
position:relative;
}
-->
</style>
</head>
<body><div id="film1">
Film 1
</div><div id="film2">
Film 2
</div><div id="film3">
Film 3
</div><div id="film4">
Film 4
</div><div id="film5">
Film 5
</div>
<a href="javascript:toggleLayer('1');">Show film 1!</a><br>
<a href="javascript:toggleLayer('2');">Show film 2!</a><br>
<a href="javascript:toggleLayer('3');">Show film 3!</a><br>
<a href="javascript:toggleLayer('4');">Show film 4!</a><br>
<a href="javascript:toggleLayer('5');">Show film 5!</a>
</body></html>



t is niet nodig dat je zoveel if's gebruikt....
document.getElemantByID() werkt in alle browsers ;-)
Pimm
%Europe/Berlin %901 %2005, 22:38
Je had een foutje achtergelaten in de code (je noemde de div's film-1 t/m 5 maar de function aanroep dingetjes gewoon 1 t/m 5) en omdat ik niet die irritante lege ruimte wilde heb ik nu deze code:<html><head><script language="javascript">
var temp="";
function showfilm(film){
if(temp!=""){
var style2= document.getElementById(temp).style;
style2.display="";
}
var whichLayer=film;
var style2 = document.getElementById(whichLayer).style;
style2.display="block";
temp=whichLayer
}
</script>
<style type="text/css">
<!--
div {
margin: 0px 20px 0px 20px;
display: none;
}
-->
</style>
</head>
<body><div id="1">
Film 1 <a href="javascript:showfilm('0');">(verberg)</a>
</div><div id="2">
Film 2 <a href="javascript:showfilm('0');">(verberg)</a>
</div><div id="3">
Film 3 <a href="javascript:showfilm('0');">(verberg)</a>
</div><div id="4">
Film 4 <a href="javascript:showfilm('0');">(verberg)</a>
</div><div id="5">
Film 5 <a href="javascript:showfilm('0');">(verberg)</a>
</div>
<a href="javascript:showfilm('1');">Show film 1!</a><br>
<a href="javascript:showfilm('2');">Show film 2!</a><br>
<a href="javascript:showfilm('3');">Show film 3!</a><br>
<a href="javascript:showfilm('4');">Show film 4!</a><br>
<a href="javascript:showfilm('5');">Show film 5!</a>
</body></html>Heel erg veel dank! (Check m'n sig)
esparadrapo
%Europe/Berlin %939 %2005, 23:33
aah oei, ik had het eerst anders geprobeerd, maar je kan ze ook film1 enzo noemen hoor
grproductions
%Europe/Berlin %445 %2006, 10:41
Is het ook mogelijk om de eerste laag van in het begin te tonen ? Als ik de displays met CSS wijzig, krijg ik ze allemaal te zien ofwel geen, en ik wil de eerste als beginscherm

Thanks !
Pimm
%Europe/Berlin %969 %2006, 23:16
Ik denk dat je beter even een nieuw topic aan kunt maken.

B.t.w. Ben ik echt ooit zo slecht in XHTML/CSS/JS geweest?! :O
Laiverd
%Europe/Berlin %033 %2006, 00:47
Moest een tijdje geleden eens verschillende "pagina's" in 1 pagina maken. Dat is toen ook met Div's opgelost die visible/invisible werden gezet d.m.v. javascript. Dit script heb ik toen geschreven:

<script>
<!--
var div = new Array('p01', 'p02', 'p03', 'p04');
var img = new Array('img01', 'img02', 'img03', 'img04');
function showDiv(which) {
for (i = 0; i < div.length ; i++){
if (div[i] == which){
eval(div[i]).style.display = 'inline';
eval(img[i]).style.visibility = 'visible';
} else {
eval(div[i]).style.display = 'none';
eval(img[i]).style.visibility = 'hidden';
}
}
return void(0);
// elold.style.display = 'none';
// elnew.style.display = 'block';
}

//-->
</script>Als je de pagina in werking wilt zien: http://bedrijven.monsterboard.nl/telfortnl/ > gewoon even de source rippen.

John