Show/hide divs met javascript

[Verwijderd]

Ik ben bezig om een standaard show div javascriptje te moden zodat deze automatisch alle andere divs sluit (mochten deze openstaan). Ik ben geen ster in Javascript dus als iemand me hiermee op weg kan helpen graag.

dit is wat ik er tot nu toe van gebakken heb en het standaard scriptje werk gewoon, echter het sluiten van alle andere divs die openstaan niet:

HTML:

<script language="JavaScript">
        function Show(szName)
            {
             var objGen = document.getElementById(szName)
            if (objGen.style.display == "")
                                {
                objGen.style.display = "none";
                    
                }
                else
                {
                objGen.style.display = "";
                }
                
            for(var i = 0; i < 500; i++)
                            {
                if(i != szName)
                    {
                    i.style.display = "none";
                    }

                            }
        </script>

de divs hebben een opvolgend nummer als ID.

HTML:

<a onclick="Show('1')" class="text11er" >een link</a><br />

En zo ziet de div code eruit:

HTML:

<div id="1" style="display: none" align="left">blabla</div>

Code kan tegenwoordig een taal bevatten

[ Voor 6% gewijzigd door crisp op 15-08-2007 15:30 ]

[Ramon]

Gebruik de i om te loopen (dat doe je goed) en maak een andere var aan om getElementByID(i); mee te doen en gebruik die laatst var ook om de style te zetten.

Als ik je goed begrijp tenminste

[OkkE]

Ik doe het altijd op de volgende manier;

1. Geef alle elementen die één voor één getoond moeten een classname.
2. Geef alle elementen óók een uniek ID.
3. Maak een functie die via document.getElementsByClassName() al de elementen ophaalt en de style.sidplay="none" zet.
4. Maak de functie zo dat het ID waarmee de functie aangeroepen wordt, na het verbergen van alles, wordt gebruikt om via document.getElementById() het juiste element weer een style.display="block"; geeft.
5. Roep onderaan je pagina de functie aan.

Ik zou het niet verbergen niet direct via CSS doen, om te voorkomen dat mensen zonder javascript alleen het eerste element zien.

--

Over jouw script. Een ID mag officieel niet alleen een nummer/getal zijn, dit kan een probleem veroorzaken; je vertrouwd immers op gedrag van een browser (numerieke IDs) die niet officieel bestaat.

Ik zou zoeken, zoals ik aangaf hierboven, naar getElementsByClassName of anders getElementsByTagName, en die array gebruiken voor je loop op regel 15.

[RobIII]

Waar hoort mijn topic?

PRG >> WEB

[Verwijderd]

RobIII schreef op woensdag 15 augustus 2007 @ 15:17:
Waar hoort mijn topic?

PRG >> WEB

Sorry, kan je de topic verplaatsen?

[Verwijderd]

OkkE schreef op woensdag 15 augustus 2007 @ 15:15:
Ik doe het altijd op de volgende manier;

1. Geef alle elementen die één voor één getoond moeten een classname.
2. Geef alle elementen óók een uniek ID.
3. Maak een functie die via document.getElementsByClassName() al de elementen ophaalt en de style.sidplay="none" zet.
4. Maak de functie zo dat het ID waarmee de functie aangeroepen wordt, na het verbergen van alles, wordt gebruikt om via document.getElementById() het juiste element weer een style.display="block"; geeft.
5. Roep onderaan je pagina de functie aan.

Ik zou het niet verbergen niet direct via CSS doen, om te voorkomen dat mensen zonder javascript alleen het eerste element zien.

--

Over jouw script. Een ID mag officieel niet alleen een nummer/getal zijn, dit kan een probleem veroorzaken; je vertrouwd immers op gedrag van een browser (numerieke IDs) die niet officieel bestaat.

Ik zou zoeken, zoals ik aangaf hierboven, naar getElementsByClassName of anders getElementsByTagName, en die array gebruiken voor je loop op regel 15.

Kan je me een voorbeeld geven van een script waarmee ik de elementen kan ophalen. Want dan dien ik die voor voor de open toegewezen div script te plaatsen? Toch?

[OkkE]

Ja er zijn twee dingen die je kunt doen;

a) zet alle elementen op niet zichtbaar, en daarna één op wel zichtbaar,
b) zet alle elementen behalve één op niet zichtbaar.

Eigenlijk maakt het niet veel uit, maar A is net ietsjes simpeler.

Zoiets als dit... onder aan de pagina 1x aanroepen, en verder elke keer als je een ander element zichtbaar wil maken.

JavaScript:

function(elmToOpen, elmClass, container) {
    var parent = document.getElementById(container);
    var elms = getElementsByClassName(parent, "div", "className"); // zelf aanpassen
    for(i=0; i<elms.length; i++) {
        elms[i].style.display = "none";
    }
    document.getElementById(elmToOpen).style.display = "block";
}

En de functie die het allemaal mogelijk maakt:

JavaScript:

/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, oClassNames){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var arrRegExpClassNames = new Array();
    if(typeof oClassNames == "object"){
        for(var i=0; i<oClassNames.length; i++){
            arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames[i].replace(/-/g, "\-") + "(\s|$)"));
        }
    }
    else{
        //arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames.replace(/-/g, "\-") + "(\s|$)"));
        arrRegExpClassNames.push(new RegExp("()" + oClassNames.replace(/-/g, "\-") + "()"));
    }
    var oElement;
    var bMatchesAll;
    for(var j=0; j<arrElements.length; j++){
        oElement = arrElements[j];
        bMatchesAll = true;
        for(var k=0; k<arrRegExpClassNames.length; k++){
            if(!arrRegExpClassNames[k].test(oElement.className)){
                bMatchesAll = false;
                break;
            }
        }
        if(bMatchesAll){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

[Verwijderd]

i.style.display = "none"; dat zou een rits errors moeten opleveren: wat je doet is je verandert properties van nummers, niet van divs. je zult eerst de div met getElementById moeten pakken.

[Verwijderd]

thanks. Denk dat het me nu wel gaat lukken.

[OkkE]

Misschien ook leuk als je, wanneer het gelukt is, het resultaat hier plaatst. Zo kunnen wij kijken of we eventueel verbeteringen zien, en het is handig voor andere mensen die hier later via Zoeken terecht komen.

Succes met het script iig!

[frickY]

Zoals je aan de GoT-syntax highlighte rkunt zien is een cijfer als ID gebruiken niet mogelijk. Het ID begint met een letter te beginnen.
Verder set je op regel 19 de style van het nummeri, in plaats van het object met het ID i.

Gebruik als id "layer1" waarbij je 1 ophoogt, en pas regel 19 aan naar;
document.getElementById('layer' + i).style...

[ Voor 44% gewijzigd door frickY op 16-08-2007 12:39 ]

[Verwijderd]

OkkE schreef op donderdag 16 augustus 2007 @ 12:25:
Misschien ook leuk als je, wanneer het gelukt is, het resultaat hier plaatst. Zo kunnen wij kijken of we eventueel verbeteringen zien, en het is handig voor andere mensen die hier later via Zoeken terecht komen.

Succes met het script iig!

Eureka

het script (in zijn meest simplistische vorm):

code:

<script language="JavaScript"> 
function Show(szName) 
    { 
     var objGen = document.getElementById(szName) 
     
     for(var i = 1; i < 4; i++) 
         { 
           document.getElementById('layer'+i).style.display = "none"; 
         } 
    if (objGen.style.display == "") 
                           { 
        objGen.style.display = "none"; 
             
        } 
        else 
        { 
        objGen.style.display = ""; 
        } 
    }
</script> 


<p><a onclick="Show('layer1')" class="text11er" >test 1</a></p>
<div id="layer1" style="display: none" align="left">blabla</div>

<p><a onclick="Show('layer2')" class="text11er" >test 2</a></p>
<div id="layer2" style="display: none" align="left">blabla</div>

<p><a onclick="Show('layer3')" class="text11er" >test 3</a></p>
<div id="layer3" style="display: none" align="left">blabla</div>

Ik laat vooraf alle divs sluiten en open daarna de beoogde div.
Ik krijg op de werkelijke pagina het totale aantal divs uit een query dus pas ik dynamisch het for-statement aan.

Thanks voro alle hulp.

[Verwijderd]

Nog even een opmerking voor ieder die dit script wilt gaan gebruiken.
Ik had in de forstatement de 4 vervangen door de hoogtste waarde (id) in mijn database

code:

for(var i = 1; i < 4; i++)

Met het idee dat het script dan alles pakt. Dat werkt dus niet zou, gezien javascript een fout melding geeft als hij een object niet kan vinden. De oplossing is (als je het script dynamisch gebruikt) om een counter te gebruiken.
Bij mij was dat:

code:

$i = 1;
while(mysql_fetch_array($dbase_array))
         {
         //variabelen
         $i++;
         }
$hoogste_id = $i;

[BasieP]

dat kan natuurlijk veel netter met mysql_num_rows

PHP:

$hoogste_id = mysql_num_rows($dbase_array);

Waarbij $dbase_array helemaal geen array is (je naamgeving is raar) maar een resource identifier.

Verder werken code tags nog steeds met een taal (dus [code=php]) zoals crisp al aangaf

[OkkE]

Verwijderd schreef op vrijdag 24 augustus 2007 @ 10:34:
Nog even een opmerking voor ieder die dit script wilt gaan gebruiken.
Ik had in de forstatement de 4 vervangen door de hoogtste waarde (id) in mijn database

Het is gevaarlijk om een ID te gebruiken voor dit soort dingen. Wanneer je namelijk dit in de database hebt, doordat er records verwijderd zijn, krijg je fouten (de loop zou 4x doorlopen worden, terwijl maar 3x nodig is..).

code:

ID  Something
1   Foo
2   Bar
4   Foobar

Verder is het gebruik van mysql_num_rows() over het algemeen denk ik slimmer/handiger, zoals hier boven al gezegd.

Een andere optie is, zoals ik al aangaf, alle elementen die je wil verbergen/zichtbaar maken een bepaalde class meegeven. Op die manier kan je via javascript (met de eerder door mij geposten functie getElementsByClassName()) alle elementen ophalen.
Voordelen zijn; je hebt geen server-side taal nodig en het werkt ook (eenvoudig) wanneer er vis javascript nieuwe elementen toegevoegd worden.

[Verwijderd]

De reden dat ik niet "$hoogste_id = mysql_num_rows($dbase_array); " gebruikt is dat als ik de index nummer zou gebruiken deze niet persé oplopend hoeft te zijn. Er kunnen records verwijdert zijn. Dus door een counter mee te laten lopen in het while script creer ik een oplopenden nummer reeks die niet onderbroken is.

De div hebben een naam als layerX waar X een nummer is. Zo doende heb je een solide script zonder het risico onnodige javascript errors te krijgen.