Divs besturen met javascript

[Cyroq]

Hallo iedereen,

Ik heb een script dat divs kan laten verschijnen en verdwijnen. Dit is gebaseerd op het bij elkaar zoeken van alle divs, en alles te laten verdwijnen behalve de gewenste div.
Alles werkt goed, totdat ik dit systeem 2 keer wil gebruiken. Bijvoorbeeld: ik heb 2 menu's en 2 plekken waar bijbehorende content geplaatst wordt. Als ik bovenstaand systeem gebruikt storen de menu's elkaar door elkaars divs onzichtbaar te maken of juist te laten zien.
Mijn idee was om beide systemen binnen 1 grote div te zetten zodat ze alleen werken op hun eigen gebied. Deze regel code gebruik ik nu om alle divs te verzamelen:

var divs = document.getElementsByTagName('div');

Mijn vraag is dus nu, is er een mogelijkheid om (met mogelijk dezelfde methode) alle divs binnen 1 div op te roepen?

Alvast bedankt!

 

[JP Romijn]

Ja, je begint dan niet bij het verzamelen van tags in je document, maar in een van de twee overkoepelende divs.

var divs = document.getElementById('div1').getElementsByTagName('div');

Vervolgens kan je weer door deze divs loopen.

for(div in divs) {
div.style.display = 'none';
}

 

[ErikBooy007]

@ JP Romijn

Je kunt geen BB-code binnen PHP-tags gebruiken.

@ Cyroq

[b]
// en
[/b]

moet je dan ook weglaten.

 

[Tha Devil]

Aangepast

Om antwoord te geven op het topic: Waarom getElementByTagname en niet gebruik maken van een id?

 

[Cyroq]

Bedankt voor jullie reacties! Ik zal even kijken of me dit gaat lukken.
@Tha Devil: wat voor oplossing raad jij dan aan? Ik ben nog niet erg bekend met javascript

 

[Tha Devil]

Het is veel logischer wanneer je dingen vaker wilt toepassen om het op een ID te laten plaats vinden.

Die kun je immers uniek maken.
Zo maakt deze eenvoudige functie al aardig wat verschil

function toggle(id) {
  id = document.getElementById(id);
  id.style.display = id.style.display == 'none' ? '' : 'none';
  return false;
  };

Gebruik je die met deze code dan werkt het toch aardig

<a href="#" onclick="toggle('first');">Open/sluit eerste</a>
<a href="#" onclick="toggle('second');">Open/sluit tweede</a>

<div id="first">De tekst in het eerste veld.</div>
<div id="second" style="display: none;">Deze verschijnt pas als je klikt</div>

 

[Cyroq]

Ziet er logisch uit, maar stel dat 1 al open is en je klikt op knop 2. Dan wordt 1 niet automatisch gesloten toch? Het script wat ik nu gebruik (iets groter dan de regel waarmee ik het topic begon, maar daar ging het even niet om) gooit de overige divs ook dicht.
Enfin, ik ben nu bezig met JP Romijn's suggestie en deze blijkt tot nog toe aardig te werken. Mocht ik het nog wat netter willen hebben of anders, dan probeer ik de id-versie en horen jullie hier denk ik nog wel van mij
Bedankt in ieder geval!

 

[Cyroq]

Hmm het wil toch niet lukken. Misschien helpt het als ik het bestandje online zet: hier. Het script heb ik ergens anders vandaan, en dit werkt opzich goed. Wat dus niet wil lukken is dat alleen de divs binnen (in dit geval) showThem worden verborgen.
Ik hoop dat jullie mijn testbestandje een beetje snappen. Het liefst ga ik hiermee verder omdat dit al geïmplementeerd zit in enkele bestanden, in plaats van een nieuwe techniek te gebruiken.

 

[StijnDeWitt]

Is dit wellicht wat je bedoelt?

 

[Cyroq]

Het lukt bijna. Als je in jouw file div3 even buiten showThem zet zie je wat mijn bedoeling is: de knoppen/javascript hebben alleen effect op divs binnen showThem.
Maar nu. Zoals ik al zei ben ik vrij nieuw met javascript (heb alleen ervaring in Flash Actionscript en basic html) dus zou je even kort kunnen uitleggen wat je script precies doet? Ik zie dat je werkt met 'span' maar deze ken ik niet echt. In mijn uiteindelijke file werk ik alleen met divs (en hotspots) en ik kwam er al achter dat alle spans veranderen in divs niet werkt
Bedankt voor de hulp zover! Ik kom er wel

 

[StijnDeWitt]

Over die div3 erbuiten halen: Wat moet de knop div3 dan doen? Want je wil de knoppen alleen op div 1 en 2 laten werken?

Over span.Dit heeft te maken met het HTML Box Model. Als je serieus verder wilt gaan met html, css en javascript dan raad ik je zeer aan het box model te bestuderen. De link wijst naar de W3C pagina, maar er zijn goede tutorials waar het gemakkelijker wordt uitgelegd dan daar.

Hier de simpele uitleg: Je hebt zogenaamde block-level elementen, zoals p, h1 en div. En je hebt inline elementen zoals img, a en span. Als je wil dat je elementen standaard onder elkaar verschijnen, dan gebruik je block-level elementen. Wil je dat het standaard naast elkaar komt, gebruik je inline elementen. Tekst is een inline element, zodat het volgende woord steeds naast het vorige woord verschijnt. Een paragraaf (p) als geheel is echter een block-level element, zodat je paragraafjes netjes onder elkaar terechtkomen.

div en span zijn de twee 'betekenisloze container' elementen van HTML. Omdat je knopjes inline elementen zijn heb ik er inline containers, span dus, omheen gezet.

 

[JP Romijn]

var divs = document.getElementById('showThem').getElementsByTagName('div'); //verzamel de divs binnen showThem
	for(div in divs) {
		var divs = document.getElementsByTagName('div');

Je verandert de variabele divs! Van alle divs binnen showThem naar alle divs binnen het document binnen de for loop.

 

[Cyroq]

Onee hè nu zie ik het pas -_-' ik heb er compleet overheen gekeken. Gewoon slordig ge-copy pasted... Als ik die eerste regel in de for loop weg haal werkt alles gewoon!
Heel erg bedankt voor jullie hulp, en Stijn bedankt voor je uitleg, daar kan ik wel wat mee

Nog even een klein vraagje (heeft niets met dit probleem te maken maar wel met javascript). Als ik een link maak naar

javascript:page.style.visibility='visible';

(met page als id voor een div) werkt dit wel in Google Chrome, maar niet in Firefox en IE. In Firefox gebeurt niets als ik erop klik en in IE wordt een pagina geopend met de tekst 'visible'. Enig idee?

 

[JP Romijn]

Je kan een (X)HTML element in javascript niet direct als property benaderen. Je moet gebruik maken van de DOM functies.

document.getElementById('page').style.visibility='visible';

 

[Cyroq]

Dit geeft hetzelfde effect als de directe property... Ik moet zeker weer laten checken in welke browser de gebruiker zit enzo?

 

[Cyroq]

Het is inmiddels allemaal gelukt, maar ik zit nog met 1 probleem.
Als ik de pagina open (met lege cache) worden de afbeeldingen in hidden divs geladen. Dat is mooi, behalve dat ik dat zie laden. Is het mogelijk dat de plaatjes evengoed laden zonder dat ik ze zie? Als ze eenmaal geladen zijn verdwijnen ze direct, alsof het javascript pas wordt uitgevoerd als het plaatje is geladen.
Iemand bekend met dit probleem? Bedankt!

 

[JP Romijn]

Het is inmiddels allemaal gelukt, maar ik zit nog met 1 probleem.
Als ik de pagina open (met lege cache) worden de afbeeldingen in hidden divs geladen. Dat is mooi, behalve dat ik dat zie laden. Is het mogelijk dat de plaatjes evengoed laden zonder dat ik ze zie? Als ze eenmaal geladen zijn verdwijnen ze direct, alsof het javascript pas wordt uitgevoerd als het plaatje is geladen.
Iemand bekend met dit probleem? Bedankt!

Misschien kan je de plaatjes inladen via het Image object in javascript en ze dan pas toevoegen aan de DOM?

plaatje = new Image(); 

plaatje.src = "plaatje.jpg";

document.getElementById('emptyDiv').appendChild(plaatje);

 

[Cyroq]

Dit werkt perfect! Wederom bedankt
Ik denk dat dit topic nu wel opgelost is.