equin: div-element über anderen elementen anzeigen lassen

Hallo,

ich bin noch totaler javascript neuling und versuche grad ein dropdown-menü in javascript zu schreiben.

ich habe also ein element das beim überfahren mit der maus (onmouseover) eine javascript funktion aufruft. Diese Funktion setzt dann den style eines div elements (vorher style="display:none) auf style.display="inline". Damit wird aber auch alles was nach diesem div-Element kommt nach unten verschoben. Ich will aber, dass das alles an seiner Stelle bleibt und das div-Element einfach über alles andere eingeblendet wird.

Beim aufklappen des Menü soll natürlich nicht alles verschoben werden.

Ich hoffe ich hab mich verständlich ausgedrückt und es kann mir jemand weiterhelfen.

Danke schonmal!

  1. Hallo,

    ich bin noch totaler javascript neuling und versuche grad ein dropdown-menü in javascript zu schreiben.

    ich habe also ein element das beim überfahren mit der maus (onmouseover) eine javascript funktion aufruft. Diese Funktion setzt dann den style eines div elements (vorher style="display:none) auf style.display="inline". Damit wird aber auch alles was nach diesem div-Element kommt nach unten verschoben. Ich will aber, dass das alles an seiner Stelle bleibt und das div-Element einfach über alles andere eingeblendet wird.

    Beim aufklappen des Menü soll natürlich nicht alles verschoben werden.

    Ich hoffe ich hab mich verständlich ausgedrückt und es kann mir jemand weiterhelfen.

    Danke schonmal!

    Hast du schonmal darüber nachgedacht, vielleicht einfach das dafür vorgesehene Dropdown-Menü <select> zu nehmen? :)

    Du müsstest dann aber size="3" für dich wahrscheinlich in size="1" ändern...

    Vielleicht hilft dir das ja...

    Grüße, Chris

    1. Hast du schonmal darüber nachgedacht, vielleicht einfach das dafür vorgesehene Dropdown-Menü <select> zu nehmen? :)

      Du müsstest dann aber size="3" für dich wahrscheinlich in size="1" ändern...

      Vielleicht hilft dir das ja...

      Grüße, Chris

      Also das soll eine seitennavigation für eine seite werden. Also das oben die menüpunkte stehen und sich dann beim drüber fahren nochmal unterpunkte aufklappen. Mit <select> würde das ein bisschen blöd aussehen... :)

      1. Hast du schonmal darüber nachgedacht, vielleicht einfach das dafür vorgesehene Dropdown-Menü <select> zu nehmen? :)

        Du müsstest dann aber size="3" für dich wahrscheinlich in size="1" ändern...

        Vielleicht hilft dir das ja...

        Grüße, Chris

        Also das soll eine seitennavigation für eine seite werden. Also das oben die menüpunkte stehen und sich dann beim drüber fahren nochmal unterpunkte aufklappen. Mit <select> würde das ein bisschen blöd aussehen... :)

        Hmm, ja stimmt, da hast du recht... Wenn es eine Seitennavigation wird, dann sieht das echt blöd aus, wenn der erste Link schon dasteht :*)

        Dann mach es lieber so, wie Christoph Schnauß es sagte :)

        MfG, Chris

      2. hallo,

        Also das soll eine seitennavigation für eine seite werden.

        Dafür ist ein Dropdown-Menü (zumindest das, was man hier in der Regel darunter versteht) nicht besonders gut geeignet.

        Also das oben die menüpunkte stehen und sich dann beim drüber fahren nochmal unterpunkte aufklappen.

        Das wäre vermutlich mit einer Liste zu lösen.

        Mit <select> würde das ein bisschen blöd aussehen... :)

        <select> ist ein unverzichtbarer Teil eines Dropdown-Menüs. Du meinst also irgendwas anderes als Dropdown.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. hallo,

          Also das soll eine seitennavigation für eine seite werden.

          Dafür ist ein Dropdown-Menü (zumindest das, was man hier in der Regel darunter versteht) nicht besonders gut geeignet.

          Also das oben die menüpunkte stehen und sich dann beim drüber fahren nochmal unterpunkte aufklappen.

          Das wäre vermutlich mit einer Liste zu lösen.

          Mit <select> würde das ein bisschen blöd aussehen... :)

          <select> ist ein unverzichtbarer Teil eines Dropdown-Menüs. Du meinst also irgendwas anderes als Dropdown.

          Grüße aus Berlin

          Christoph S.

          Ich denke mal, er meint sowas, wie es Browser z. B. auch bei der Menüleiste haben, eine Liste, die Ausklappt, sobald man auf eine Fläche klickt. Nur, dass es bei ihm halt nicht horizontal sondern vertikal sein soll

          1. hallo,

            Ich denke mal

            Ich denke mal, du solltest dir das "full quoting" abgewöhnen. Das ist eine ziemliche Unart.

            er meint sowas, wie es Browser z. B. auch bei der Menüleiste haben

            Möglich, aber das sieht man erst, wenn man seinen Code kennt.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Ich denke mal, du solltest dir das "full quoting" abgewöhnen. Das ist eine ziemliche Unart.

              Was ist full quoting? Das Zitieren eines ganzen Posts am Stück stört dich, oder das "Ich denke mal"? Den Begriff full quoting habe ich noch nie gehört...
              Falls es ersteres sein sollte: Entschuldigung, habe ich nicht drüber nachgedacht und darum hier auch gleich anders gemacht ;)

              er meint sowas, wie es Browser z. B. auch bei der Menüleiste haben

              Möglich, aber das sieht man erst, wenn man seinen Code kennt.

              Den Code hat er ja mittlerweile gepostet, und ich habs mir schon angesehen, darum bin ich mir doch relativ sicher, dass es vertikal sein soll, vorausgesetzt, er ändert nicht mehr alles um...

            2. er meint sowas, wie es Browser z. B. auch bei der Menüleiste haben

              Möglich, aber das sieht man erst, wenn man seinen Code kennt.

              hab den code gepostet. wird als zweiter post von oben angezeigt...

  2. hallo,

    ich bin noch totaler javascript neuling und versuche grad ein dropdown-menü in javascript zu schreiben.

    Hm. Das Thema "Dropdown-Menü und Javascript" scheint über Weihnachten plötzlich sehr populär geworden zu sein.

    ich habe also ein element das beim überfahren mit der maus (onmouseover) eine javascript funktion aufruft. Diese Funktion setzt dann den style eines div elements (vorher style="display:none) auf style.display="inline".

    DIV selbst ist ein Blockelement. Wenn du jetzt "style='display:inline'" setzt, kann das unter Umständen zu unerwarteten Ergebnissen führen. Es könnte sein, daß du mit style.visibility besser zurechtkommst.

    Damit wird aber auch alles was nach diesem div-Element kommt nach unten verschoben.

    Das läßt sich nur gegenprüfen, wenn man deinen Code kennt.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
  3. So ich glaub das einfachste ist ich poste einfach mal meinen code hier. was ich ändern will ist, dass die tabelle über den nachfolgenden text angezeigt werden soll....

    <html>

    <script type="text/javascript">
      function test(){
       document.getElementById("sub1").style.display="inline";
      }
     </script>

    <body>

    <table border="1" width = "100%">
       <tr>
        <td onmouseover="test()">link 1</td>
       </tr>
      </table>

    <div id = "sub1" style = "display:none">
       <table width="50%" border = 1>
        <tr>
         <td>test 1</td>
        </tr>
        <tr>
         <td>test 2</td>
        </tr>
       </table>
      </div>

    nachfolgender text
     </body>
    </html>

    1. hallo,

      So ich glaub das einfachste ist ich poste einfach mal meinen code hier.

      Tatsächlich ist das nützlich.

      was ich ändern will ist, dass die tabelle über den nachfolgenden text angezeigt werden soll...

      Nein, das möchtest du nicht. Du möchtest hier überhaupt keine Tabelle verwenden, sondern du möchtest Listen (ul) für deine Navigation nehmen.

      Im Prinzip funktioniert das, was du möchtest, nach folgendem Schema:

      <div id="div1" onclick="document.getElementById('div2').style.visibility='visible'; this.style.visibility='hidden';">DIV1</div>  
      <div id="div2" onclick="document.getElementById('div1').style.visibility='visible'; this.style.visibility='hidden';" style="visibility='hidden'">DIV2</div>  
      
      

      Für die Positionierung der Elemente mußt du natürlich noch mit CSS sorgen.

      Grüße aus Berlin

      Christoph S.

      --
      Visitenkarte
      ss:| zu:) ls:& fo:) va:) sh:| rl:|
      1. was ich ändern will ist, dass die tabelle über den nachfolgenden text angezeigt werden soll...

        Nein, das möchtest du nicht. Du möchtest hier überhaupt keine Tabelle verwenden, sondern du möchtest Listen (ul) für deine Navigation nehmen.

        Aber wenn ich Listen verwende kann ich ja keine Hintergrundfarbe und Rahmen verwenden oder?

        Also das Menü sollte am Ende dann in etwa so wie hier aussehen http://www.milonic.com/menu/frames/ (nur ohne die frames)

        1. hallo,

          Aber wenn ich Listen verwende kann ich ja keine Hintergrundfarbe und Rahmen verwenden oder?

          Doch, selbstverständlich kannst du das.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
          1. hallo,

            Aber wenn ich Listen verwende kann ich ja keine Hintergrundfarbe und Rahmen verwenden oder?

            Doch, selbstverständlich kannst du das.

            Aber es ändert ja nix an meinem problem, ob ich jetzt ne Liste nehme oder eine Tabelle. Auch wenn ich eine Liste nehme, wird diese ja nicht über den nachfolgenden text "drübergelegt"...

            habs hier mal getestet:

            <html>

            <script type="text/javascript">
              function test(){
               document.getElementById("sub1").style.visibility="visible";
              }
             </script>

            <body>

            <table border="1" width = "100%">
               <tr>
                <td onmouseover="test()">link 1</td>
               </tr>
              </table>

            <div id = "sub1" style = "visibility:hidden">
               <ul>
                <li>test 1</li>
                <li>test 2</li>
               </ul>
              </div>

            nachfolgender text
             </body>
            </html>

            1. hallo,

              habs hier mal getestet:

              Bei deinem Test bekommt ein sowieso sichtbares Element zusätzlich die Anweisung "visible", mehr passiert nicht. Da das Element eh schon sichtbar war, sieht es allerdings so aus, als wäre gar nichts geschehen.

              Grüße aus Berlin

              Christoph S.

              --
              Visitenkarte
              ss:| zu:) ls:& fo:) va:) sh:| rl:|
      2. Tach.

        So ich glaub das einfachste ist ich poste einfach mal meinen code hier.

        Tatsächlich ist das nützlich.

        Erfreulich, daß auch Du das so siehst, Christoph. Aus welchen Gründen also enthältst Du potentiellen Helfern in Deinem eigenen Thread diese Information vor?

        --
        Once is a mistake, twice is Jazz.
        1. hallo,

          Aus welchen Gründen also enthältst Du potentiellen Helfern in Deinem eigenen Thread diese Information vor?

          Weil es _da_ nicht primär um irgendwelchen Script- oder sonstigen Code geht, sondern um das Verhalten von Firefox gegenüber unterschiedlichen DOCTYPE-Deklarationen. Das Script ist dort nur ein Vehikel und steht selbst nicht zur Debatte. Andererseits habe ich bereits einen Weg zum eingesetzten Script angegeben.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
          1. Tach.

            Aus welchen Gründen also enthältst Du potentiellen Helfern in Deinem eigenen Thread diese Information vor?

            Weil es _da_ nicht primär um irgendwelchen Script- oder sonstigen Code geht, sondern um das Verhalten von Firefox gegenüber unterschiedlichen DOCTYPE-Deklarationen. Das Script ist dort nur ein Vehikel und steht selbst nicht zur Debatte.

            Bisher konnte niemand dieses vermeintliche Fehlverhalten nachvollziehen. Also liegt die Vermutung nahe, daß das Problem sehr wohl im Javascriptcode liegt.

            Andererseits habe ich bereits einen Weg zum eingesetzten Script angegeben.

            Mit dem Hinweis darauf, daß Du es stark modifiziert hast, wenn ich mich recht erinnere. Warum gewährst Du keinen Blick auf die Version, in der die Fehler bei Dir auftreten?

            (Mehr dazu auch gerne wieder im entsprechenden Thread.)

            --
            Once is a mistake, twice is Jazz.
          2. Weil es _da_ nicht primär um irgendwelchen Script- oder sonstigen Code geht, sondern um das Verhalten von Firefox gegenüber unterschiedlichen DOCTYPE-Deklarationen. Das Script ist dort nur ein Vehikel und steht selbst nicht zur Debatte. Andererseits habe ich bereits einen Weg zum eingesetzten Script angegeben.

            a.) weigerst du dich uns mitzuteilen wie die DOCTYPE Deklarationen genau aussehen die du verwendest und
            b.) Ist mir nicht klar wo auf der von dir verlinkten Seite irgendwo ein Skript sein sollte, dass irgendwas mit dem von dir beschriebenen Verhalten zu tun hat.

            Ich gehe eher davon aus, dass dir ein wenig langweilig war, aber auf keinen Fall hast du erwartet, dass dir die Frage beantwortet wird.

            Struppi.

            1. hallo,

              wie die DOCTYPE Deklarationen genau aussehen die du verwendest

              Sie sehen so aus, wie in SELFHTML beschrieben, wie denn sonst?  Also entweder
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              (wahlweise auch

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                      "http://www.w3.org/TR/html4/loose.dtd">
              ~~~)  
              oder  
              ~~~html
              <!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" lang="en-US" xml:lang="en-US">
              

              wobei bei dem zweiten Beispiel wahlweise auch noch ein
              <?xml version="1.0" ?>
              davorgesetzt werden kann.

              Schreibe die angegebene Seite in SELFHTML neu, wenn du meinst, sie gebe keine korrekte Auskunft mehr. Die Angaben zum Quirks-Modus mögen in der aktuell veröffentlichten Fassung vielleicht nicht ganz genügen. Ich finde allerdings auch im Vergleich mit dem, was das W3C bisher dazu schreibt, keinen Fehler.

              Ich gehe eher davon aus, dass dir ein wenig langweilig war

              Wovon du ausgehen willst, ist mir inzwischen wurscht. Es ist auf jeden Fall verkehrt, aber du willst eher stänkern als helfen.

              Wenn mir langweilig ist, setze ich mich nicht an den Rechner, sondern fülle Holunderwein aus meinen großen Gärballons in Flaschen ab. Das ist eine prima Methode, um zuviel vorhandene Zeit totzuschlagen.

              Grüße aus Berlin

              Christoph S.

              --
              Visitenkarte
              ss:| zu:) ls:& fo:) va:) sh:| rl:|
              1. Sie sehen so aus, wie in SELFHTML beschrieben, wie denn sonst?  Also entweder
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                Damit ist der Browser im Quirksmode.

                (wahlweise auch

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                "http://www.w3.org/TR/html4/loose.dtd">

                  
                Damit im Standardmode.  
                  
                
                > oder  
                > ~~~html
                
                <!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" lang="en-US" xml:lang="en-US">
                
                

                wobei bei dem zweiten Beispiel wahlweise auch noch ein
                <?xml version="1.0" ?>
                davorgesetzt werden kann.

                Dann ist der IE im Quirksmode. Mir ist aber nicht klar wie du in einem Dokument drei verschiedene DOCTYPE Deklarationen verwendest und nebenbei war das eine von mehreren Fragen die zur Beantwoertung deines Problems wichtig gewesen wären.

                Ich gehe eher davon aus, dass dir ein wenig langweilig war

                Wovon du ausgehen willst, ist mir inzwischen wurscht. Es ist auf jeden Fall verkehrt, aber du willst eher stänkern als helfen.

                Keine Ahnung wie du auf dieses dünne Eis kommst. Ich versuch dir in dem anderen Thread (mit anderen) die nötigen Informationen seit Tagen aus der Nase zu ziehen, weil mich das Problem interessiert. Warum du dir aber auf Teufel komm raus nicht helfen lassen willst, auf keine Nachfragen sinnvoll eingehst, entzieht sich meiner Vorstellungskraft, dass man unter solchen Umständen beschimpft oder beleidigt wird ist normal, bin ich gewohnt.
                Aber wie du auf stänkern kommt ist mir nicht klar. Deine Beobachtungen in dem Thread sind so wie du sie schilderst falsch und das Problem liegt woanders! Das ist definitiv so, schon die Fehlermeldung paßt nicht zum Code.

                Aber du hast bisher weder was gezeigt, nur irgendwie dumm rumlamentiert. Also lassen wir das einfach, was ich persönlich Schade finde, denn ich kann mich nur wiederholen, mich interessiert das Problem und hätte dir gerne geholfen.

                Struppi.

                1. frohes neues Jahr zusammen,

                  hallo Struppi,

                  ... , denn ich kann mich nur wiederholen, mich interessiert das Problem ...

                  zu dem Posting, das mittlerweile im Archiv verschwunden ist, hat wohl mancher versucht, sich einen Reim zu machen.

                  Christoph hat ja als Quelle den Adventskalender 1999 angeführt. Schaut man sich das drag&drop-Script an, sieht man, dass bei allen style-Zuweisungen die px-Angaben fehlen. Auch in den von Christoph gezeigten Schnipseln gibts keine "px".

                  macht man sich die Mühe  und versieht Antjes Document mit dem xhtml1-strict-doctype kracht es natürlich u.a. in dieser Zeile mit der Meldung
                  " document[k] has no properties"

                    
                  document.all[k].style.top=con2[i-1].split(" ")[0]*1+199;  
                  
                  

                  das ähnelt doch dann sehr der "pagex"-Fehlermeldung ...

                  Gruß plan_B

                  --
                       *®*´¯`·.¸¸.·
                  1. ... , denn ich kann mich nur wiederholen, mich interessiert das Problem ...

                    zu dem Posting, das mittlerweile im Archiv verschwunden ist, hat wohl mancher versucht, sich einen Reim zu machen.

                    Christoph hat ja als Quelle den Adventskalender 1999 angeführt. Schaut man sich das drag&drop-Script an, ...

                    Das hat mich grad stutzig gemacht. Ich hab mehrmals auf der Seite nach einem Skript gesucht und nichts gefunden, was irgendwie auf Christophs Beschreibung paßte. Erst jetzt fällt mir diese Seite auf:

                    Leider benutzen Sie einen Browser der 3er Generation und sehen daher nur das statische Bild... Das Puzzlespiel funktioniert nur mit Browsern ab der 4er Version (Netscape Communicator 4.x oder Internet Explorer 4.x und 5.x).

                    Da ich nur einen kurzen Blick in den Quellcode - auf der Suche nach einem Skript - geworfen hatte, fiel mir der Text gar nicht auf.

                    sieht man, dass bei allen style-Zuweisungen die px-Angaben fehlen. Auch in den von Christoph gezeigten Schnipseln gibts keine "px".

                    Was z.b. mit sicherheit auch für das ominöse DOCTYPE Problem verantwortlich ist. Wobei aber Christophs Aussagen zu dem Thema so wage bleiben, das man ihm keine vernünftige Hilfe anbieten kann, aber er wollte ja auch kein.

                    " document[k] has no properties"

                    document.all[k].style.top=con2[i-1].split(" ")[0]*1+199;

                      
                    Was ebenfalls das von mir mehrfach angesprochene und von Christoph mehrfach bestrittene Quirks/Standardmode Problem erklärt.  
                      
                    
                    > das ähnelt doch dann sehr der "pagex"-Fehlermeldung ...  
                      
                    Die sowieso nie ein Sinn gemacht hatte und mit Sicherheit so nie existierte.  
                      
                    Aber auf jeden Fall Danke, dass du es geschafft hast - im gegensatz dem der die Frage gestellt hatte - ein wenig Licht in's dunkel zu bringen.  
                      
                    Struppi.
                    
                    1. habe d'ehre Struppi

                      Christoph hat ja als Quelle den Adventskalender 1999

                      Wow, ein vorausschauendes Skript :)
                      bei Firefox3 bekommt man die Meldung

                      "Leider benutzen Sie einen Browser der 3er Generation und sehen daher nur das statische Bild... Das Puzzlespiel funktioniert nur mit Browsern ab der 4er Version (Netscape Communicator 4.x oder Internet Explorer 4.x und 5.x)."

                      3er-Generation ist ja nicht mal falsch *SCNR*

                      man liest sich
                      Wilhelm

                      --
                      Wackersdorf war gestern - "Transrapid" ist morgen
  4. habe d'ehre equin

    Beim aufklappen des Menü soll natürlich nicht alles verschoben werden.

    Mal ein Beispiel:
    CSS-Menüs
    z.B. #box2. Statt dem Infotext kannst Du auch weitere Menüpunkte in das Element packen.

    Schau Dir auch evtl. mal die Infos zu "z-index" an. Damit kannst Du Elemente überlappend in den Vordergrund bringen.

    Überlappungen

    zu den Empfehlungen mit <select> hülle ich mich lieber in den Mantel des Schweigens. ;-)

    man liest sich
    Wilhelm

    --
    Wackersdorf war gestern - "Transrapid" ist morgen