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

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

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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';
     }
    
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 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.
     
  4. #3 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.
     
  5. #4 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  0 !=  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  0 !=  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)
     
  6. #5 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';
    }
     
  7. #6 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!!!
     

  8. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript Überprüfen div
  1. Antworten:
    0
    Aufrufe:
    3.687
  2. Antworten:
    6
    Aufrufe:
    2.958
  3. Antworten:
    8
    Aufrufe:
    1.106
  4. Antworten:
    5
    Aufrufe:
    425
  5. Antworten:
    2
    Aufrufe:
    1.517
  • Annonce

  • Annonce