Text wandert

[luckger]

Hallo zusammen,

ich habe wiedermal ein Problem ...

Momentan versuche ich ein Menü zu schreiben, bei dem sich beim Mausklick auf einen Button ein Untermenü öffnet.

Dazu habe ich folgenden html code:

  
    <ul class='menu' >  
     <li><a>Löschen</a></li>  
     <li onclick='task_menu_drop_switch(0)'><a>Neu</a>  
  
      <ul name='task_drop'>  
       <li><a>Link</a></li>  
      </ul>  
  
     </li>  
  
    </ul>

Der javascript Code sieht so aus:
 ~~~javascript

function task_menu_drop_switch(id){

var element = document.getElementsByName("task_drop")[id];

if (element.style.display != "block"){
  element.style.display = "block";
 }else{
  element.style.display = "none";
 }

}

  
Das Untermenü ist per css default auf display:none gesetzt.  
  
Wenn ich nun auf den Button drücke, wird das Untermenü wunderbar angezeigt. Klicke ich nochmal darauf, so wird das Menü wieder ausgeblendet - so weit wunderbar, wäre da nicht dieser eine Fehler.  
  
Jedesmal beim Ausblenden wird der Button um 2,3 Pixel breiter. Ein äußerst störender Effekt ... weiß da jemand Rat was ich falsch mache?  
  
Außerdem wollte ich gleich noch fragen ob jemand eine Idee hat, wie man das Menü wieder ausblenden kann, wenn der User außerhalb des Menüs klickt.  
  
  
Vielen Dank im voraus und ein schönes, sonniges und langes Wochenende,  
  
luckger

[Gunnar Bittersmann]

@@luckger:

Das Untermenü ist per css default auf display:none gesetzt.

Damit ist deine Navigation also unbrauchbar; Nutzer bekommen gar kein Untermenü angezeigt. (Außer den wenigen, die zufällig JavaScript aktiviert haben.)

Navigation muss ohne optionale Technologie, die bei vielen nicht zu Verfügung steht, auskommen! Kommt sie auch: CSS only drop-down menu

Wenn ich nun auf den Button drücke, wird das Untermenü wunderbar angezeigt.

Eher wunderlich als wunderbar, wo das 'ul'-Element gar kein 'name'-Attribut haben darf. 'document.getElementsByName()' ist daher äußerst abenteuerlich. Und böse unperformant. Wozu den ganzen Elementbaum nach allen Elementen mit diesem 'name'-Attribut absuchen?

weiß da jemand Rat was ich falsch mache?

Du benutzt JavaScript zur Navigation – ohne eine JavaScript-freie Alternative anzubieten.

Du hast dein HTML-Quelltext nicht validiert.

Live long and prosper,
Gunnar

[luckger]

Hallo,

ich brauche keine javascript-freie Alternative, da ich vorher abprüfe ob javascript enabled ist. Das ist sowieso zwingend notwendig für die Seite.

Das mit dem ul-name tag. Ich habe das Ganze jetzt folgendermaßen umgeschrieben:

  
function task_menu_drop_switch(id){  
  
 var element = document.getElementById("task_menu_switch").getElementsByTagName("li")[id].getElementsByTagName("ul")[0];  
  
  
 if (element.style.display != "block"){  
  element.style.display = "block";  
 }else{  
  element.style.display = "none";  
 }  
  
}  

  
  
    <ul class='menu' id='task_menu_switch'>  
     <li><a>Löschen</a></li>  
     <li onclick='task_menu_drop_switch(1)'><a>Neu</a>  
  
      <ul>  
       <li><a>Link</a></li>  
       <li><a>Link</a></li>  
       <li><a>Link</a></li>  
      </ul>  
  
     </li>  
  
    </ul>  
  

Perfomanceprobleme dürfte es keine geben, da nur 4-5 Unteritems durchsucht werden müssen.

Das eigentliche Problem ist damit aber trotzdem nicht gelöst. Die übergeordnete li-Box wird nach einem Klick immernoch größer, obwohl ich nichts daran ändere.

Hat jemand eine Lösung dafür?

Vielen Dank schon im voraus,

luckger

@@luckger:

Das Untermenü ist per css default auf display:none gesetzt.

Damit ist deine Navigation also unbrauchbar; Nutzer bekommen gar kein Untermenü angezeigt. (Außer den wenigen, die zufällig JavaScript aktiviert haben.)

Navigation muss ohne optionale Technologie, die bei vielen nicht zu Verfügung steht, auskommen! Kommt sie auch: CSS only drop-down menu

Wenn ich nun auf den Button drücke, wird das Untermenü wunderbar angezeigt.

Eher wunderlich als wunderbar, wo das 'ul'-Element gar kein 'name'-Attribut haben darf. 'document.getElementsByName()' ist daher äußerst abenteuerlich. Und böse unperformant. Wozu den ganzen Elementbaum nach allen Elementen mit diesem 'name'-Attribut absuchen?

weiß da jemand Rat was ich falsch mache?

Du benutzt JavaScript zur Navigation – ohne eine JavaScript-freie Alternative anzubieten.

Du hast dein HTML-Quelltext nicht validiert.

Live long and prosper,
Gunnar

[Struppi]

ich brauche keine javascript-freie Alternative, da ich vorher abprüfe ob javascript enabled ist. Das ist sowieso zwingend notwendig für die Seite.

Was natürlich die denkbar schlechteste Lösung ist, aber du wirst deine Gründe haben warum du z.b. keine Suchmaschinen auf deine Seite lassen willst.

Das mit dem ul-name tag. Ich habe das Ganze jetzt folgendermaßen umgeschrieben:

und ich hab den mal in eine HTML Seite eingebaut:
http://selfhtml.jstruebig.de/Text wandert.html

Die übergeordnete li-Box wird nach einem Klick immernoch größer, obwohl ich nichts daran ändere.

Diese Behauptung kann ich mit deinem Code nicht nachvollziehen, in welchem Browser ist das so?

Struppi.

[luckger]

Hallo,

also ich habe jetzt mal eine Testseite erstellt:
www.weingut-cuntz.de/test/test.php

Das Problem tritt momentan nur im Firefox auf, da der Internetexplorer mir den Button gleich mit 100% auf der ganzen Seite verteilt -- weiß Gott warum...

Wenn ich dem Button eine feste Breite zuweise, so tritt der Fehler überhaupt nicht mehr auf (als Nebeneffekt wird dann auch im Internetexplorer die Seite richtig dargestellt. Das ist aber eigentlich genau die Sache die ich nicht machen will, da die Buttons variable Größe haben sollen. Es sieht einfach nicht gut aus wenn ein Button "go" die gleiche Größe hat wie "Bestellungen".

Im Firefox sieht man nun wunderbar wo der Text "wandert".

Findet jemand von euch darin den Fehler?

luckger

ich brauche keine javascript-freie Alternative, da ich vorher abprüfe ob javascript enabled ist. Das ist sowieso zwingend notwendig für die Seite.

Was natürlich die denkbar schlechteste Lösung ist, aber du wirst deine Gründe haben warum du z.b. keine Suchmaschinen auf deine Seite lassen willst.

Das mit dem ul-name tag. Ich habe das Ganze jetzt folgendermaßen umgeschrieben:

und ich hab den mal in eine HTML Seite eingebaut:
http://selfhtml.jstruebig.de/Text wandert.html

Die übergeordnete li-Box wird nach einem Klick immernoch größer, obwohl ich nichts daran ändere.

Diese Behauptung kann ich mit deinem Code nicht nachvollziehen, in welchem Browser ist das so?

Struppi.

[luckger]

Hallo,

für alle die mal das gleiche Problem haben: das muss irgendwie ein Problem mit display sein. Tauscht man das display mit visibility (hidden und visible) gibt es keinerlei Probleme mehr.

Gruß und danke an alle, die geholfen haben,

luckger

[Gunnar Bittersmann]

@@luckger:

Das mit dem ul-name tag. Ich habe das Ganze jetzt folgendermaßen umgeschrieben:

function task_menu_drop_switch(id){

var element = document.getElementById("task_menu_switch").getElementsByTagName("li")[id].getElementsByTagName("ul")[0];

Da du es beim ersten Mal nicht verstanden hattest: Es ist nie gut, JavaScript auf invalides HTML anzuwenden.

Live long and prosper,
Gunnar

PS: TOFU ist auch nicht gut.

[luckger]

hat denn keiner eine Idee an was das liegen kann?

luckger

Hallo zusammen,

ich habe wiedermal ein Problem ...

Momentan versuche ich ein Menü zu schreiben, bei dem sich beim Mausklick auf einen Button ein Untermenü öffnet.

Dazu habe ich folgenden html code:

<ul class='menu' >
     <li><a>Löschen</a></li>
     <li onclick='task_menu_drop_switch(0)'><a>Neu</a>

<ul name='task_drop'>
       <li><a>Link</a></li>
      </ul>

</li>

</ul>

>   
> Der javascript Code sieht so aus:  
>  ~~~javascript
  

> function task_menu_drop_switch(id){  
>   
>  var element = document.getElementsByName("task_drop")[id];  
>   
>   
>  if (element.style.display != "block"){  
>   element.style.display = "block";  
>  }else{  
>   element.style.display = "none";  
>  }  
>   
> }

Das Untermenü ist per css default auf display:none gesetzt.

Wenn ich nun auf den Button drücke, wird das Untermenü wunderbar angezeigt. Klicke ich nochmal darauf, so wird das Menü wieder ausgeblendet - so weit wunderbar, wäre da nicht dieser eine Fehler.

Jedesmal beim Ausblenden wird der Button um 2,3 Pixel breiter. Ein äußerst störender Effekt ... weiß da jemand Rat was ich falsch mache?

Außerdem wollte ich gleich noch fragen ob jemand eine Idee hat, wie man das Menü wieder ausblenden kann, wenn der User außerhalb des Menüs klickt.

Vielen Dank im voraus und ein schönes, sonniges und langes Wochenende,

luckger