Dixi86: Scrollbar

Hallo,

Ich bin total javascript-noobie und habe mir irgendwo her ein kleines Javascript her kopiert, welches Tabellen etc. ein und ausklappen lässt. Nur leider rutscht nach der Aktivierung die Scrollbar zum Seitenanfang. Ich hätte gerne das sie an der aktuellen Position verbleibt. Kann mir jemand sagen was ich im Script ergänzen muss.

<script type="text/javascript">  
function toggle(id){  
  
 var img = 'img_' + id;  
 if(document.getElementById(id).style.display == 'block') {  
  document.getElementById(id).style.display = 'none';  
  
 } else {  
  document.getElementById(id).style.display = 'block';  
  
 }  
  
}  
</script>
<title>Unbenanntes Dokument</title>  
</head>  
<p><a href="#" onclick="toggle('layer1')"> Kommentar ein-/ausblenden</a></p>  
<div id="layer1" style="display:none;">test impositon</div>  
<body>  
</body>  
</html>

Vielen Dank
Dixi86

  1. Hallo,

    Nur leider rutscht nach der Aktivierung die Scrollbar zum Seitenanfang. Ich hätte gerne das sie an der aktuellen Position verbleibt. Kann mir jemand sagen was ich im Script ergänzen muss.

    <title>Unbenanntes Dokument</title>

    </head>
    <body>
    <p><a href="#" onclick="toggle('layer1')"> Kommentar ein-/ausblenden</a></p>
    <div id="layer1" style="display:none;">test impositon</div>
    </body>
    </html>

      
    das onclick-Ereignis ist nicht auf Links beschränkt. Da Du keine Linkfunktionalität benötigst, schlage ich Dir vor, auf das a-Element zu verzichten:  
      
    ~~~html
    <p onclick="toggle('layer1')">Kommentar ein-/ausblenden</p>  
    <div id="layer1" style="display:none;">test impositon</div>  
    
    

    Dein Code wird zusätzlich einfacher und kürzer :-)

    Wenn Du unbedingt ein a-Element verwenden willst, so ergänze den onclick-Handler um "return false;", damit der Link nicht ausgeführt wird:

    <a href="#" onclick="toggle('layer1'); return false;"> Kommentar ein-/ausblenden</a>

    Freundliche Grüße

    Vinzenz

    1. Ohh man, die Lösung ist ja trivial,ist mir fasst unangenehm so ist dass wenn man copy$pasted... :-D

      Aber vielen Dank dür die schnelle Antwort!!

      Dixi86

    2. Da Du keine Linkfunktionalität benötigst, schlage ich Dir vor, auf das a-Element zu verzichten:

      Das wäre ziemlich nachteilig. Dann wäre der Link kein aktivierbares, fokussierbares Element mehr, was die Bedienung in vielen Fällen erschweren würde. Elemente mit »Verhalten« sollten auch Elemente wie a oder button sein, die vom Browser ohnehin als »Schaltflächen« behandelt werden und daher per Tastatur angesprungen und aktiviert werden können bzw. vom Browser entsprechend zugänglich gemacht werden.

      Eine Alternative wäre tabindex="0", womit man beliebige Elemente fokussierbar machen kann.

      Mathias

      1. Hallo Mathias,

        » Da Du keine Linkfunktionalität benötigst, schlage ich Dir vor, auf das a-Element zu verzichten:

        Das wäre ziemlich nachteilig. Dann wäre der Link kein aktivierbares, fokussierbares Element mehr, was die Bedienung in vielen Fällen erschweren würde.

        daran habe ich nicht gedacht. Ich kann Deine Argumente nachvollziehen ...

        Elemente mit »Verhalten« sollten auch Elemente wie a oder button sein, die vom Browser ohnehin als »Schaltflächen« behandelt werden und daher per Tastatur angesprungen und aktiviert werden können bzw. vom Browser entsprechend zugänglich gemacht werden.

        ... und in Kombination mit Gunnars Hinweis auf einen noch recht verbreiteten Browser komme ich zur Überzeugung, dass der Einsatz eines a-Elementes durchaus sinnvoller sein kann als

        Eine Alternative wäre tabindex="0", womit man beliebige Elemente fokussierbar machen kann.

        diese von Dir angesprochene Alternative. Wenn ich zusätzlich den Fall deaktivierten Javascripts berücksichtige, plädiere ich nun dafür, das <p>-Element mit Javascript ins Dokument zu schreiben, das div-Element standardmäßig sichtbar zu haben und mit Javascript auszublenden, sowie Gunnars href-Attribut <a href="javascript:;"> zu verwenden, um bei abgeschalteten Javascript das den Benutzer nervende und unerwünschte Springen zum Dokumentanfang zu verhindern.

        Da sieht man mal wieder, dass eine schnelle Antwort, die das vom Fragesteller angesprochene Problem durchaus beantwortet (die Problematik bei deaktiviertem Javascript war mir durchaus bewußt), viel zu wünschen übrig lassen kann. Danke für Deine Hinweise.

        Freundliche Grüße

        Vinzenz

  2. @@Dixi86:

    nuqneH

    <a href="#"> ist in allen Fällen, wo man nicht an den Seitenanfang springen will, unsinnig.

    Wenn ein 'a'-Element unbedingt ein 'href'-Attribut haben soll (bspw. damit IE 6 ':hover' darauf anwendet), sich die Funktion des Links aber im 'onclick'-Handler verbirgt, bietet sich <a href="javascript:[code lang=javascript];">[/code] an.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)