[JavaScript] Überprüfen ob div-Element bereits sichtbar ist

Dieses Thema im Forum "Webentwicklung" wurde erstellt von ibot, 26. Mai 2009 .

Schlagworte:
  1. 26. Mai 2009
    Überprüfen ob div-Element bereits sichtbar ist

    Hallo zusammen,

    es geht darum das ich bestimmte div Container bei einem Klick auf einen Link sichtbar machen will.
    Mit dem Code funzt das soweit auch.

    Code:
    if(document.getElementById(divid).style.display == 'none')
 {
 document.getElementById(divid).style.display = 'block';
 }
 else
 {
 document.getElementById(divid).style.display = 'none';
 }
    Allerdings möchte ich nun noch das auch immer maximal 1 div Element von den 6 möglichen zu sehen ist.
    Wie könnte ich das einbauen?

    Habs schon so versucht über ein Array vorher zu prüfen aber das will nicht:

    Code:
     var alleDivs = new Array("add_regisseur","add_film","add_prodfirma","add_regal","add_person","add_dvd_exemplar");


 for (i=0; i<=alleDivs.length; ++i){
 if (document.getElementById(alleDivs[i]).style.display == 'block')
 {
 document.getElementById(alleDivs[i]).style.display = 'none';
 }
 }
 
 if(document.getElementById(divid).style.display == 'none')
 {
 document.getElementById(divid).style.display = 'block';
 }
 else
 {
 document.getElementById(divid).style.display = 'none';
 }
     
    + Multi-Zitat Zitieren
  3. 26. Mai 2009
    AW: Überprüfen ob div-Element bereits sichtbar ist

    Lass das "if" doch einfach weg und blende sie aus... Ganz egal ob sie grade sichtbar sind oder nicht

    Also eine "hideAll()" und "show("#divname") Funktion oder so.
     
    + Multi-Zitat Zitieren
  4. 26. Mai 2009
    AW: Überprüfen ob div-Element bereits sichtbar ist

    Frag mich nicht wieso aber auch so klappt es nicht:

    Code:
    <script type="text/javascript">
 function klapp(){
 var ausg = document.Formular.cb.value;

 switch(ausg){
 case "regisseur":
 divid = "add_regisseur";
 break;
 case "film":
 divid = "add_film";
 break;
 case "prodfirma":
 divid = "add_prodfirma";
 break;
 case "regal":
 divid = "add_regal";
 break;
 case "person":
 divid = "add_person";
 break;
 case "dvd_exemplar":
 divid = "add_dvd_exemplar";
 break;
 }
 document.getElementById("add_regisseur").style.display = 'none';
 document.getElementById("add_film").style.display = 'none';
 document.getElementById("add_prodfirma").style.display = 'none';
 document.getElementById("add_regal").style.display = 'none';
 document.getElementById("add_person").style.display = 'none';
 document.getElementById("add_dvd_exemplar").style.display = 'none';


 if(document.getElementById(divid).style.display == 'none')
 {
 document.getElementById(divid).style.display = 'block';
 }
 else
 {
 document.getElementById(divid).style.display = 'none';
 }
 }
 </script>
    Wenn ich allerding das hier weglasse dann funzt es:

    Code:
    document.getElementById("add_regisseur").style.display = 'none';
document.getElementById("add_film").style.display = 'none';
document.getElementById("add_prodfirma").style.display = 'none';
document.getElementById("add_regal").style.display = 'none';
document.getElementById("add_person").style.display = 'none';
document.getElementById("add_dvd_exemplar").style.display = 'none';
    Nur so passiert es aber auch das mehrere divs offen sein können.
     
    + Multi-Zitat Zitieren
  5. 26. Mai 2009
    AW: Überprüfen ob div-Element bereits sichtbar ist

    Hmm muss selbst nen Praktisches Beispiel machen, bei JS hab ich noch nicht so den Blick für Fehler... Ich editier dann

    Soooooooo.. sorry hat etwas länger gedauert, funktioniert aber:
    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    <     html xmlns = "http://www.w3.org/1999/xhtml" >
      <     head >
        <     title > Testpage </ title >
      </     head >
      
      <     body >
        <     script type = "text/javascript" >
        
          function      buttonHide ( obj )
          {
            var      allDivs  =  document . getElementsByTagName ( "div" );
            
            
                 for(var  i  =  0 ;  i  !=  allDivs . length ;  i ++)
            {
              if(     obj . value  ==  "Hide ALL"  &&  allDivs [ i ]. id . substr ( 0 ,  3 ) ==  "ad_" ) {
                     allDivs [ i ]. style . display  =  "none" ;
              } else if(     obj . value  ==  "Show ALL"  &&  allDivs [ i ]. id . substr ( 0 ,  3 ) ==  "ad_" ) {
                     allDivs [ i ]. style . display  =  "block" ;
              }
            }
            
            if(     obj . value  ==  "Hide ALL" ) {
                   obj . value  =  "Show ALL" ;
            } else {
                   obj . value  =  "Hide ALL" ;
            }
          }
        </     script >
        
        <     div id = "wrapper" >
          <     div id = "ad_01" >
                 #01
               </ div ><!--  //ad_01 -->
          
               < div id = "ad_02" >
                 #02
               </ div ><!--  //ad_02 -->
          
               < div id = "ad_03" >
                 #03
               </ div ><!--  //ad_03 -->
          
               < div id = "ad_04" >
                 #04
               </ div ><!--  //ad_04 -->
          
               < div id = "ad_05" >
                 #05
               </ div ><!--  //ad_05 -->
          
               < div id = "ad_06" >
                 #06
               </ div ><!--  //ad_06 -->
          
               < div id = "ad_07" >
                 #07
               </ div ><!--  //ad_07 -->
          
               < input type = "button"  value = "Hide ALL"  onclick = "javascript:buttonHide(this);"  />
        </     div >
      </     body >
    </     html >
    Hiernochmal die angepasste Version für dich:
    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    <     html xmlns = "http://www.w3.org/1999/xhtml" >
      <     head >
        <     title > Testpage </ title >
      </     head >
      
      <     body >
        <     script type = "text/javascript" >
        
          function      hideAll ()
          {
            var      allDivs  =  document . getElementsByTagName ( "div" );
            
            
                 for(var  i  =  0 ;  i  !=  allDivs . length ;  i ++)
            {
              if(     allDivs [ i ]. id . substr ( 0 ,  3 ) ==  "ad_" ) {
                     allDivs [ i ]. style . display  =  "none" ;
              }
            }
          }
        </     script >
        
        <     div id = "wrapper" >
          <     div id = "ad_01" >
                 #01
               </ div ><!--  //ad_01 -->
          
               < div id = "ad_02" >
                 #02
               </ div ><!--  //ad_02 -->
          
               < div id = "ad_03" >
                 #03
               </ div ><!--  //ad_03 -->
          
               < div id = "ad_04" >
                 #04
               </ div ><!--  //ad_04 -->
          
               < div id = "ad_05" >
                 #05
               </ div ><!--  //ad_05 -->
          
               < div id = "ad_06" >
                 #06
               </ div ><!--  //ad_06 -->
          
               < div id = "ad_07" >
                 #07
               </ div ><!--  //ad_07 -->
          
               < input type = "button"  value = "Hide ALL"  onclick = "javascript:hideAll();"  />
          <     input type = "button"  value = "Show #01"  onclick = "javascript:hideAll(); document.getElementById('ad_01').style.display = 'block';"  />
          <     input type = "button"  value = "Show #02"  onclick = "javascript:hideAll(); document.getElementById('ad_02').style.display = 'block';"  />
          <     input type = "button"  value = "Show #03"  onclick = "javascript:hideAll(); document.getElementById('ad_03').style.display = 'block';"  />
          <     input type = "button"  value = "Show #04"  onclick = "javascript:hideAll(); document.getElementById('ad_04').style.display = 'block';"  />
          <     input type = "button"  value = "Show #05"  onclick = "javascript:hideAll(); document.getElementById('ad_05').style.display = 'block';"  />
          <     input type = "button"  value = "Show #06"  onclick = "javascript:hideAll(); document.getElementById('ad_06').style.display = 'block';"  />
          <     input type = "button"  value = "Show #07"  onclick = "javascript:hideAll(); document.getElementById('ad_07').style.display = 'block';"  />
        </     div >
      </     body >
    </     html >
    // Edit:
    Naja, die Mühe hab ich mir wohl umsonst gemacht... (#6)
     
    + Multi-Zitat Zitieren
  6. 26. Mai 2009
    AW: Überprüfen ob div-Element bereits sichtbar ist

    Code:
     if(document.getElementById(divid).style.display == 'none')
 {
 document.getElementById(divid).style.display = 'block';
 }
 else
 {
 document.getElementById(divid).style.display = 'none';
 }
    sinnlos, da bei allen divs immer style.display == "none" sein wird.

    ersetz es mit:
    Code:
    document.getElementById(divid).style.display = 'block';
    // edit, hab mich mal eben selber hingesetzt:

    Code:
    function klapp(){
 var ausg = document.Formular.cb.value, divid;
 var ids = [
 "add_regisseur", "add_film",
 "add_prodfirma", "add_regal",
 "add_person", "add_dvd_exemplar"
 ];
 
 switch(ausg){
 case "regisseur":
 case "film":
 case "prodfirma":
 case "regal":
 case "person":
 case "dvd_exemplar":
 divid = "add_" + ausg;
 break;
 default:
 throw "invalid div-id";
 }
 
 for(var i = 0, to = ids.length; i < to; i++) {
 if(divid != ids[i]) {
 document.getElementById(ids[i]).style.display = "none";
 }
 }

 var dive = document.getElementById(divid);
 dive.style.display = (!dive.style.display || dive.style.display == 'block') ? 'none' : 'block';
}
     
    + Multi-Zitat Zitieren
  7. 26. Mai 2009
    AW: Überprüfen ob div-Element bereits sichtbar ist

    Hallo Murdoc,
    also entweder ich bin zu blöd oder in deinem COde ist nen Fehler weil bei mir will es immer noch nicht.
    Wenn ich jetzt in der CB einen Wert auswähle und dann auf den Link klicke passiert einfach nichts:
    Hier nochmal meine html Seite und wie auf die JS Fkt. zugegrifen wird.
    Vll. liegt da ja der Fehler.

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <script type="text/javascript" src="bearbeiten_add.js">
 klapp_add();
 </script>
 </head>
 <body>
 <form name="Formular" method="POST" action="<?php $PHP_SELF ?>">
 <table align="center" border="0">
 <br><br>
 <tr>
 <td>
 <select name="cb" size="5">
 <option value="dvd_exemplar">DVD Exemplare</option>
 <option value="film">Filme</option>
 <option value="prodfirma">Produktionsfirmen</option>
 <option value="regal">Regale</option>
 <option value="regisseur">Regisseure</option>
 <option value="person">Personen</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>
 <div class="link_edit">
 <table>
 <br><tr>
 <td><h4><a href="#" onclick="klapp_add();">Hinzufügen</a></h4></td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
 </table>

 <div id="add_regisseur" style="display:none">
 <table align="left" border="0">
 <tr><td>Vorname:</td>
 <td><input type="text" name="vorname" value="" size="20" /></td></tr>
 <tr><td>Nachname:</td>
 <td><input type="text" name="nachname" value="" size="20" /></td></tr>
 <tr><td></td>
 <td><input type ="submit" value="Übernehmen" name="add"></td></tr>
 </table>
 </div>
 </form>
 </body>
</html>
    edit...

    Habs nun so gelöst:

    Code:
    function klapp_add()
{
 var option = ["add_regisseur","add_film","add_prodfirma","add_regal","add_person","add_dvd_exemplar"]; // nach belieben fortsetzen ...
 var ausg = document.Formular.cb.value;

 var divid = "add_" + ausg;

 for(var i=0; i<option.length; i++)
 {
 obj=document.getElementById(option[i]);
 obj.style.display=(option[i]==divid) && !(obj.style.display=="block")? "block" : "none";
 }
}

    Trotzdem nochmal besten Dank an euch beide!!!
     
    + Multi-Zitat Zitieren
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten