[javascript] Div openen/sluiten + wisselen van plaatje

[Joopieboy]

Via een how to die op google heb gevonden, heb ik een javascriptje in elkaar gesleuteld. De werking is verder perfect, dus de basis snap ik. Het zijn 2 losse script. Als ik op de eerste link klik, opent een div, als ik een 2e keer op de link klik, sluit de div. Werkt perfect. Maar, en nu komt het moeilijke gedeelte (voor mij dan ).

Ik kan beide scripts tegelijk gebruiken, kan ik hierin niet een 'vergrendeling' maken, dat als de ene open is, ik de ander niet kan gebruiken? Ik ben al aan het stoeien geweest om een 2e id bij 'getElementById' erbij te zetten, en dan bij de if tag een voorwaarde erbij te zetten dat die niet geopend moest zijn. Maar dan loopt het script vast, dan werkt het openen/sluiten van de div dus niet meer. Misschien is mijn denkwijze niet goed, en zeer waarschijnlijk is mijn basiskennis hiervan niet toereikend, maar ik wil het toch graag leren.

Dus ik hoop dat iemand mij advies kan geven.

Het script:

JavaScript:

function toggle(dropdowna, werkwijze) {
    var ele = document.getElementById(dropdowna);
    var imageEle = document.getElementById(werkwijze);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="layout/werkwijze.png" border="0px">';
    }
    else {ele.style.display = "block";
        imageEle.innerHTML = '<img src="layout/werkwijzeselected.png" border="0px">';
    }
}

function toggle2(dropdownb, team) {
    var ele = document.getElementById(dropdownb);
    var imageEle = document.getElementById(team);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="layout/team.png" border="0px">';
    }
    else {ele.style.display = "block";
        imageEle.innerHTML = '<img src="layout/teamselected.png" border="0px">';
    }
}

[n8n]

sneller is het sowieso -voor de afhandeling in de browser- om de class aan te passen ivp de style. Als je deze class op het omsluitende element zet kan je deze bij het klikken wijzigen en een if neerzetten voor als de naam van de class impliceert dat de ander geopend is. Je werkt met 3 namen, 1 voor beide gesloten, 1 voor 'link a' open en 1 voor 'link b' open.

hier had ik een vergelijkbaar probleem, enige wat jij anders zou moeten doen is wat wijzigen in de statements.

[Voor 19% gewijzigd door n8n op 03-07-2011 21:07. Reden: link toegevoegd]

[Joopieboy]

Edit: nog maar eens je verhaal doorgelezen.

De style gebruik ik om de div onzichtbaar te maken, jij zegt dat ik dit beter met een class kan doen (of gewoon de div zelf, want voor bv dropdowna gebruik ik geen class).

Ik zal jouw oplossing nog eens doorlezen, maar tot op dit moment snap ik het nog niet echt helemaal, sorry.

Edit 2:

n8n schreef op zondag 03 juli 2011 @ 21:01:
Stap 1: sneller is het sowieso -voor de afhandeling in de browser- om de class aan te passen ivp de style.

Stap 2: Als je deze class op het omsluitende element zet kan je deze bij het klikken wijzigen

Stap 3: en een if neerzetten voor als de naam van de class impliceert dat de ander geopend is. Je werkt met 3 namen, 1 voor beide gesloten, 1 voor 'link a' open en 1 voor 'link b' open.

hier had ik een vergelijkbaar probleem, enige wat jij anders zou moeten doen is wat wijzigen in de statements.

Stap 1: done
Stap 2: het omsluitende element van de div? Alleen bij de inhoud van de div, dus in dit geval een openklappend menu, heb ik staan dat hij niet weergegeven word. En deze pas ik via het javascript aan. Klopt dit wat u bedoelde?
Stap 3: met die if bedoelt u dus die uitzondering maken? Dat was ook eigenlijk mijn vraag.
1 voor beide gesloten word lastig. Ik heb 1 link die 1 div opent, afzonderlijk van elkaar. De link a of link b open, of in dit geval dropdowna en dropdownb, die heb ik wel.

Als ik dit dus zou willen, zou ik een 'document.getElementById(...);' moeten gaan gebruiken, hier ben ik net al even mee wezen stoeien maar dit zorgde er ook voor dat het menu totaal niet meer open ging.


Edit 3: Ik ben zelf even verder gegaan met het menu, ik heb nu 1 omsluitende div gemaakt, en mijn javascript bijgewerkt en ik ben tot het volgende (werkende script gekomen):

HTML:

<div id="dropdown">
        <div id="dropdowna">
            <a href="#" class="top">&#8226; Intake</a>
            <a href="#">&#8226; Trajectbegeleiding</a>
            <a href="#">&#8226; Samenwerking therapeuten</a>
            <a href="#">&#8226; E-coaching</a>
            <a href="#" class="bottom">&#8226; Naar de werkvloer</a>
        </div>
        <div id="dropdownb">
            <a href="#" class="top">&#8226; Contactpersoon</a>
            <a href="#">&#8226; Complementair gezondheidstherapeut</a>
            <a href="#">&#8226; Coach</a>
            <a href="#">&#8226; Journeytherapeut</a>
            <a href="#">&#8226; Osteopaat</a>
            <a href="#" class="bottom">&#8226; Loopbaancoach</a>
        </div>
    </div>

JavaScript:

function toggle1(dropdowna) {
    var ele = document.getElementById('dropdown');
    var imageEle = document.getElementById('werkwijze');
    if (ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="layout/werkwijze.png" border="0px">';
        document.getElementById('team').innerHTML = '<img src="layout/team.png" border="0px">';
    }
    else {ele.style.display = "block";
        imageEle.innerHTML = '<img src="layout/werkwijzeselected.png" border="0px">';
        document.getElementById('dropdowna').style.display = "block";
        document.getElementById('dropdownb').style.display = "none";
    }
}

function toggle2(dropdownb) {
    var ele = document.getElementById('dropdown');
    var imageEle = document.getElementById('team');
    if (ele.style.display == "block") {
        ele.style.display = "none";
        imageEle.innerHTML = '<img src="layout/team.png" border="0px">';
        document.getElementById('werkwijze').innerHTML = '<img src="layout/werkwijze.png" border="0px">';
    }
    else {ele.style.display = "block";
        imageEle.innerHTML = '<img src="layout/teamselected.png" border="0px">';
        document.getElementById('dropdowna').style.display = "none";
        document.getElementById('dropdownb').style.display = "block";
    }
}

Een werkende testcase staat hier: http://www.joopiesplace.nl/phoenix/index.html

Nu nog het volgende, als je een menu open hebt laten staan, en je klikt op de andere link, moet je 2 keer klikken om het menu open te maken, 1e keer sluit hij af, 2e keer opent hij het andere menu pas.

[Voor 187% gewijzigd door Joopieboy op 04-07-2011 00:37]

[n8n]

http://n8n.nl/~/voorbeeld/klapmenu.html

hier moet het mee lukken, elementen zijn te wijzigen in andere, alleen de ID's en classes moeten overeenkomen en de elementen die je wilt tonen moeten genest zijn. je kan het ook laten werken op de body-tag omdat alle overige elementen daar in genest zijn. Zie de comments voor iets gewijzigde functionaliteit, dit kan je testen door de else-if in comment-tags te zetten.

Die afbeelding hoef je er niet met javascript in te zetten, dit kan je met css ook bereiken wat sneller werkt en de afbeelding wordt geïndexeerd

[Voor 15% gewijzigd door n8n op 04-07-2011 03:25]

[Joopieboy]

n8n schreef op maandag 04 juli 2011 @ 03:22:
http://n8n.nl/~/voorbeeld/klapmenu.html

hier moet het mee lukken, elementen zijn te wijzigen in andere, alleen de ID's en classes moeten overeenkomen en de elementen die je wilt tonen moeten genest zijn. je kan het ook laten werken op de body-tag omdat alle overige elementen daar in genest zijn. Zie de comments voor iets gewijzigde functionaliteit, dit kan je testen door de else-if in comment-tags te zetten.

Die afbeelding hoef je er niet met javascript in te zetten, dit kan je met css ook bereiken wat sneller werkt en de afbeelding wordt geïndexeerd

Onwijs bedankt voor je hulp en alle moeite! Daar ga ik vanmiddag eens mee verder. En dat van de afbeeldingen in de css zetten, indexeren is niet echt een pre aangezien dit toch 'maar' een menu is. Maar goed.

[Joopieboy]

Edit: uw menu heb ik inmiddels werkend en omgebouwd. De functie van dit javascript is anders als wat ik bedoelde helaas.

Ik heb 2 links, die openen allebei dezelfde div, maar een andere inhoud. Als het menu geopend is, dan moet alleen de inhoud gewijzigd worden, en niet zoals bij mij nu dat de div gesloten word, en opnieuw geopend.

Ik heb geprobeerd met een dubbele voorwaarde en een else if, maar dan opent mijn menu dus ook niet. Kennelijk een fout in het javascript waardoor deze niet start.

Als ik dan een voorbeeld mag geven, wat ik denk en neerschrijf, en dus niet werkt:

JavaScript:

function toggle1(dropdowna) {
    var x = document.getElementById('dropdown');
    if (x.style.display == "block" && document.getElementById('dropdowna').style.display = "block";) {
        x.style.display = "none";
    }
    else (x.style.display == "block" && document.getElementById('dropdownb').style.display = "block";) {
        document.getElementById('dropdowna').style.display = "block";
        document.getElementById('dropdownb').style.display = "none";
    }
}

Dit script gaat kijken naar de div dropdown als de eerste link word geklikt, die tevoorschijn moet komen en waarin de inhoud moeten komen.
Als die div is weergegeven en dropdowna al open is, sluit hij deze en de div.
Als die div is weergegeven, maar dropdownb al open is, sluit hij deze en open hij drowdowna.

Hoe moeilijk kan het zijn?

[Voor 99% gewijzigd door Joopieboy op 06-07-2011 16:49]

[C0rnelis]

Om eerlijk te zijn snap ik niet helemaal 100% wat je precies wilt bereiken (zoals bijvoorbeeld met de plaatjes), maar hopelijk kan je hier iets mee.

extern javascript.js

code:

var divmetlinks = document.getElementById('div-control');
var imageElement = document.getElementById('image-element');

var divs = divmetlinks.getElementsByTagName('a');
for (var i = 0; i < divs.length; i++) {
  addClickHandler(divs[i]);
}

function addClickHandler(link) {
  link.onclick = function () {
    element = document.getElementById(link.rel);
    /* hide element if it's visible */
    if (element.style.display != "none") {
      element.style.display = "none"
    } else {
      /* it's hidden already: hide others and make this visible */
      hideAllElementsBut(element.id);
      element.style.display = "";
    }
    
    /* set imageElement.src */
    imageElement.src = link.href;
    
    return false;
  };
}

function hideElement(element) {
  if (element.style.display != "none") {
    element.style.display = "none"
  } 
}

function hideAllElementsBut(element) {
  if(document.getElementsByClassName) {
    /* browsers like IE 9 or any non-IE browser (firefox, chrome) as long as it supports document.getElementsByClassName */
    var divs = document.getElementsByClassName('showhide');
    for (var i = 0; i < divs.length; i++) {
      if (divs[i].id != element.id) {
        hideElement(divs[i]);
      }
    }
  } else {
    /* for silly browsers like IE 8 (browsers not supporting document.getElementsByClassName) */
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++) {
      if(divs[i].className == 'showhide') {
        if (divs[i].id != element.id) {
          hideElement(divs[i]);
        }
      }
    }
  }
}

html testpagina

code:

<html>
<head>
<style type="text/css">
body div > div {
    border: 1px solid red;
    width: 20px;
    padding: 12px;
    margin: 12px;
}

div#div-control a {
  display: block;
}

img#image-element {
    height: 100px;
    width: 100px;
}

</style>
<script type="text/javascript" defer="defer" src="javascript.js"></script>
</head>
<body>
  <img id="image-element" src="" />
  
  <div id="div-control">
    <a href="1.jpg" rel="a">Toon 1</a>
    <a href="2.png" rel="b">Toon 2</a>
    <a href="#" rel="c">Toon 3</a>
    <a href="#" rel="d">Toon 4</a>
    <a href="#" rel="e">Toon 5</a>
    <a href="#" rel="f">Toon 6</a>
    <a href="#" rel="g">Toon 7</a>
    <a href="#" rel="h">Toon 8</a>
    <a href="#" rel="i">Toon 9</a>
  </div>
  <div id="serie-divs">
    <div id="a" class="showhide">1</div>
    <div id="b" class="showhide">2</div>
    <div id="c" class="showhide">3</div>
    <div id="d" class="showhide">4</div>
    <div id="e" class="showhide">5</div>
    <div id="f" class="showhide">6</div>
    <div id="g" class="showhide">7</div>
    <div id="h" class="showhide">8</div>
    <div id="i" class="showhide">9</div>
  </div>
</body>
</html>

Opmerkingen:

• code:
  

  defer="defer"

  Bovenstaand attribute zorgt ervoor dat je script pas geevalueerd als de DOM klaar is met laden. Een andere optie is om in-line javascript onderin de pagina te zetten. Dit is nodig om te voorkomen dat bij bijvoorbeeld var divmetlinks null wordt.
• Bij het copy pasten en bezichtigen zal je zien dat als je op link 1 klikt geprobeerd wordt het plaatje '1.jpg' te laden in <img id="image-element". Tegelijkertijd wordt <div id="a" verborgen. Dit laatste is omdat er eerst gecheckt wordt of de div getoond wordt. Zo ja: verberg deze dan. Zo niet: verberg alle andere divs en toon deze. Onderstaande regel is waarschijnlijk nutteloos in jouw situatie (het voorkomt het snel verbergen/weergeven van een element, maar moet in de praktijk van jouw theorie voor zover ik dat snap niet mogelijk zijn).
  
  code:
  

  if (divs[i].id != element.id) {

• Als je bij het weergeven van de pagina alles wilt verbergen zal je de volgende inline style moeten toevoegen.
  
  code:
  

  <div id="serie-divs">
    <div id="a" class="showhide" style="display: none">1</div>
    <div id="b" class="showhide" style="display: none">2</div>
    <div id="c" class="showhide" style="display: none">3</div>
    <div id="d" class="showhide" style="display: none">4</div>
    <div id="e" class="showhide" style="display: none">5</div>
    <div id="f" class="showhide" style="display: none">6</div>
    <div id="g" class="showhide" style="display: none">7</div>
    <div id="h" class="showhide" style="display: none">8</div>
    <div id="i" class="showhide" style="display: none">9</div>
  </div>

• Gebruik element.src = "pad/naar/plaatje.jpg" in plaats van element.innerHTML = ..
• return false wordt vaak gebruikt in een onclick() methode van een a-element. Hierdoor wordt het click-event geannuleerd: je browser zal dan niet naar domain.com/# gaan, maar blijft op de pagina domain.com/

[Voor 4% gewijzigd door C0rnelis op 08-07-2011 00:49]