Show/hide div

Status
Niet open voor verdere reacties.
P

pieter53

Gebruiker
Lid geworden
1 jan 2007
Berichten
297
Van deze site gebruik ik het script, dat "showonlyone" genoemd wordt.

Het script wat gebruikt wordt is:
Code: 
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

De HTML code daarvan is:
HTML: 
<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div
      </td>
   </tr>
</table>

Het werkt aardig, maar het NAME attribuut mag niet gebruikt worden voor div's.....
weet iemand een oplossing daarvoor?

Alvast bedankt voor de moeite.
 
ja, id's, en anders classes. Maar ik zou voor id's gaan, en eventueel als het nodig is via parentNode en childNodes kan je altijd nog de childs/parents vinden.:thumb:
 
Bedankt voor de tip, maar mijn kennis van javascript e.d. gaat niet zover dat ik er iets mee kan.....helaas.
 
Ik maak zelf gebruik van een extern javascript bestandje waarin ik de volgende code heb staan (als het korter kan hoor ik het graag, maar ik heb het in 3 stukken geknipt om flexibeler te zijn):
Code: 
function get_element(element){
if (document.getElementById)
	elem = document.getElementById(element);
else if(document.all)
	elem = document.all(element);
else if(document.layers)
	elem = document.layers(element);
return elem;
}

function get_active_div(){
var active_div
var divArray = document.getElementsByTagName('div');
for (i=0; i<divArray.length; i++)
	if (divArray[i].style.display == "block")
	active_div = divArray[i];
return active_div;
}

function ShowHide(currentlayer)
{
//currentlayer = huidige layer
//active_div.id = te openen layer
//als currentlayer == active_div.id, dan geen actie

var vis, active_div;

vis = get_element(currentlayer).style;
active_div = get_active_div();

if (currentlayer != active_div.id){
	active_div.style.display = "none";
	vis.display = "block";
	}
else if (currentlayer = active_div.id){
	vis.display = "block";
	}

}

Vervolgens heb ik een link waarmee ik de div display of hide:
Code: 
onMouseOver="ShowHide('id_van_div')"

Voor mij werkt de code nu goed in IE en FF, maar volgens mij kan de functie "get_active_div" nog problemen opleveren in andere browsers.
 
Ik heb de html code even vereenvoudigd door alleen datgene te laten staan wat ik gebruik om de layers te tonen en te verbergen.
Ik heb zelf plaatjes gebruikt om de functie ShowHide() te activeren, je kunt dit uiteraard ook met andere elementen doen. Ik hoop dat je er zo wel uitkomt (uiteraard wel even de src van het JavaScript bestand aanpassen).

Belangrijk: de div die je als default wilt tonen moet style="display:block;" krijgen.

HTML: 
<html>
<head>
<script type="text/javascript" src="JScript/ShowHideLayer.js"></script>
</head>

<body>
<div id="container">
	<div id="content">

		<img onMouseOver="ShowHide('Layer1')" src="AfbeeldingA.jpg" width="50">

		<img onMouseOver="ShowHide('Layer2')" src="AfbeeldingB.jpg" width="50">

		<img onMouseOver="ShowHide('Layer3')" src="AfbeeldingC.jpg" width="50">


		<div id="Layer1" style="display:block;">
		<img src="AfbeeldingA.jpg">
		</div>

		<div id="Layer2" style="display:none;">
		<img src="AfbeeldingB.jpg">
		</div>

		<div id="Layer3" style="display:none;">
		<img src="AfbeeldingC.jpg">
		</div>

	</div>
</div>
</body>

</html>
 
Bedankt!

Het werkt inderdaad (ook met onclick i.p.v. onmouseover) en wat meer is; het werkt in Firefox, IE7, IE6, Safari en Opera en mits het "alt-attribute" bij de afbeeldingen gegeven is, valideerd alles correct.
PRIMA!

Zoals gezegd snap ik weinig tot niets van javascript, dus daarom maar even gevraagd.

Code: 
function get_active_div(){
var active_div
var divArray = document.getElementsByTagName('div');
for (i=0; i<divArray.length; i++)
	if (divArray[i].style.display == "block")
	active_div = divArray[i];
return active_div;
}
Ik zie hier staan:
Code: 
var divArray = document.getElementsByTagName('div');
.
Houdt dit in dat er een array met daarin ALLE divs samengesteld wordt?
Zo ja: Kan dat problemen geven als er op één pagina een paar honderd divs zijn of vraag ik nu iets doms?
 
pieter53 zei:
Ik zie hier staan:
Code: 
var divArray = document.getElementsByTagName('div');
.
Houdt dit in dat er een array met daarin ALLE divs samengesteld wordt?
Zo ja: Kan dat problemen geven als er op één pagina een paar honderd divs zijn of vraag ik nu iets doms?
Klik om te vergroten...
De code maakt inderdaad een array met alle div's die op de pagina te vinden zijn. Een paar honderd divs zouden geen probleem moeten zijn, vooral niet in de nieuwere versies van firefox en chrome - deze zijn erg snel qua javascript.


:thumb:
 
Toch nog een aanvulling.

Mocht het aantal divs toch problemen geven, dan kan men in plaats van DIV een andere tag gebruiken.
Ik heb het (in FF en IE7) getest met <var> en <cite> en in beide gevallen werkte het nog prima!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan