JS Mischung aus Tooltip und Contextmenü

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JS Mischung aus Tooltip und Contextmenü

    hallo zusammen.

    kann mir gar nicht vorstellen das ich generell der erste mit dieser art von wunsch bin^^...
    ich möchte eine mischung aus tool-tip und context menü programmieren.

    - tooltip deswegen, weil eine ebene (ich denke mal, diese müsste ich dazu nehmen)
    dynamisch auf jeder position der seite eingeblendet werden sollte

    - und context menü, weil diese ebene links enthalten soll.

    ich habe mal eine fotomontage gemacht, damit ihr wisst was ich meine:

    also es geht um eine bilder-auflistung im "windows-arbeitsplatz-stil" neben
    jeder grafik möchte ich einen kleinen button haben, über den man verschiedene
    aktionen für das bild auswählen kann (bearbeiten, umbenennen, löschen) etc.



    problem:
    ich weiß das man div-layers nur mit statischen angaben (oben links vom monitor, oder?)
    positionieren kann. das bringt mir aber nichts. bzw ich hab letztens gesehn,
    das man seit neustem divs mit prozenz-angaben versehen kann? ist das ne neuerung von html 4.0 oder was?^^
    (hab leider schon seit mehreren jahren nicht mehr wirklich mit html gearbeitet)

    überlegung:
    um mich wieder bissel ins thema rein zu lesen habe ich mal bei selfhtml reingeschaut.
    dort gibt es eine nette demo zum auslesen von daten/angaben von allen elementen,
    die auf einer HTML seite sind. (http://de.selfhtml.org/dhtml/beispie.../dhtmltest.htm)

    fragen:
    1) ist es möglich auf diese weise die position von meiner kleinen grauen
    grafik (die das menü öffnet) abzufangen und dann mit diesen werten die
    div-ebene zu positionieren, damit sie genau an der stelle des pfeil-bildes erscheint?

    2) da ich mir eigentlich ziemlich sicher bin das ich nicht der erste sein kann, der soetwas
    programmieren möchte: wie nennt man diese art von menü?
    die suche bei google nach "tooltip" und "contextmenü" brachte für mich keine
    brauchbaren beispiele/ergebnisse.

    3) ist es überhaupt (generell) möglich, mein vorhaben annähernd umzusetzen?



    wäre nett, wenn jemand etwas weiß, wo man weiter suchen kann bzw wie
    man sowas nennt usw.

    vielen dank soweit,
    gruß dek*
    GLORIA PERPETUA

  • #2
    du kannst mehrere divs verschachteln, also auch mit den positionen spielen.z.b.:
    PHP-Code:
    <div style="width: 90%; left: 5%; height: 90%; bottom:5%; border: 1px solid #f00">
    <
    div style="width: 100px; left: ;10px height: auto; top:10px; border: 1px solid #00f">bla bla</div>
    </
    div
    schau dir das mal an, dann wirst du sicher eine lösung funden (ungetestet)
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      http://www.walterzorn.com/tooltip/tooltip_e.htm

      Kommentar


      • #4
        Re: JS Mischung aus Tooltip und Contextmenü

        Original geschrieben von deklarmart
        ich weiß das man div-layers nur mit statischen angaben (oben links vom monitor, oder?) positionieren kann.
        das ist kein "wissen", sondern schlichtweg blödsinn.

        bzw ich hab letztens gesehn, das man seit neustem divs mit prozenz-angaben versehen kann? ist das ne neuerung von html 4.0 oder was?
        das hat mit HTML so gut wie gar nichts zu tun.
        CSS ist das stichwort - und da möchtest du dich u.a. mit den verschiedenen möglichkeiten für position beschäftigen.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          entschuldigung! ok, das ist natürlich eine feine sache, das die positionierung
          ab dem eltern-element funktioniert! hat die sache sehr vereinfacht, und ich
          habs im grunde auch schon fertig.

          nur eine kleinigkeit ist da noch: leider werden die eingeblendeten ebenen nicht
          über die andern elemente der html seitegelegt, sondern schieben sich
          irgendwie dazwischen! ich dachte erst, das hat mit dem z-index zu tun und
          hab dann diverse einstellungen vorgenommen... aber das interessiert die ebene
          nicht!

          hier das beispiel:
          http://www.zir-con.de/web-tmp/demo.html

          öffnet sich die ebene, verschieben sich die anderen elemente nach unten! egal
          ob ich z-index 2, 100 oder -1 angebe! woran liegt das?

          html-code:
          Code:
          <script language="javascript">
          
          last_id='0';
          
          function getMenu(id) {
          	if (document.getElementById('menu' + id).style.display == 'none') {
          		document.getElementById('menu' + last_id).style.display = 'none';
          		document.getElementById('menu' + id).style.display = '';
          	} else {
          		document.getElementById('menu' + id).style.display = 'none';
          	}
          	last_id=id;
          }
          
          </script>
          </head>
          
          <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
          <br><br><div id="menu0"></div>
          
          <div name="menubutton">
            <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
            <div id="menu1" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: -1;
              background-color: blue; display: none;">asd</div>
          </div>
          <br>blablabla<br><br>
          <div name="menubutton">
            <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
            <div id="menu2" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: 2;
              background-color: blue; display: none;">asd</div>
          </div>
          <hr>
          Zuletzt geändert von deklarmart; 16.03.2005, 13:13.
          GLORIA PERPETUA

          Kommentar


          • #6
            Original geschrieben von deklarmart
            woran liegt das?
            das könnte dir vielleicht jemand sagen, der weiß, was deine funktion getMenu() macht ...
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar


            • #7
              die funktion ändert eigentlich nur die "display" eigenschaft. ich dachte,
              das es daran nicht liegen kann, daher hatte ich die weggelassen! aber
              um den zusammen hang zu sehen ist es natürlich sinnvoller die auch zu
              posten, sorry. hab es nachgeholt: oben steht nun auch die funktion!
              GLORIA PERPETUA

              Kommentar


              • #8
                und was ist display ...?

                laut selfhtml: "display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)"

                also wird, wenn das element ausgeblendet ist, kein platz dafür reserviert - und wenn es eingeblendet wird, nimmt sich das element den notwendigen platz.

                folge: nachfolgende elemente verschieben sich nach unten.

                "alternative" wäre visibility statt display - das ist nichtanzeige mit platzhalter. dann würde der platz für das element immer reserviert, auch wenn es nicht angezeigt wird.
                nachfolgende elemente halten dann gleich den nötigen abstand ein - allerdings gibt das leere flächen an der stelle, wo das element nicht eingeblendet ist.


                die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
                dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.




                p.s.:
                hab es nachgeholt: oben steht nun auch die funktion!
                dann bitte jetzt noch den scrollbalken beseitigen!
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Original geschrieben von wahsaga
                  die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
                  dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.

                  hm, das versteh ich nicht ganz! also ich soll die tooltip-ebenen aus dem
                  "element-fluss" rausnehmen, indem ich die zB gleich ALLE hinter <body> schreibe?
                  (also aus dem '<div name="menubutton">' rausnehmen)?

                  wenn ich das so mache, stimmt die positionierung ja nicht mehr, da die
                  tooltip-ebenen nun den body als elternelement haben und nun von oben
                  links aus positioniert werden. wie soll ich an die positionsdaten vom "menubutton"
                  kommen? oder war dein vorschlag anders gemeint?!

                  (ich hoffe ich hab mein problem so halbwegs verständlich ausgedrückt^^)
                  GLORIA PERPETUA

                  Kommentar


                  • #10
                    http://www.css4you.de/position.html
                    http://www.css4you.de/example/position_relative.html

                    Kommentar


                    • #11
                      Original geschrieben von deklarmart
                      oder war dein vorschlag anders gemeint?!
                      mein vorschlag war so gemeint, wie fast immer:

                      lerne mit den techniken, die du verwenden willst, halbwegs sicher umzugehen - so dass du gegebene tipps auch umsetzen kannst, ohne dass man dir alles bis ins kleinste vorkauen muss.
                      I don't believe in rebirth. Actually, I never did in my whole lives.

                      Kommentar


                      • #12
                        danke auch! mehr als selfhtml zu studieren und versuchen zu verstehen
                        kann ich nicht! wozu ist denn so ein forum da? ich hab halt paar fragen
                        zum thema ebenen und positionierung und peil das nicht zu 100 prozent!
                        schuldigung!

                        es sind ja nur kleine fehler! ich kann mir selfhtml 1000 mal durchlesen und
                        finde die lösung nicht! das resultiert sicherlich nicht aus dummheit, sondern
                        daraus, dass ich nicht die erfahrung damit habe da ich nicht den ganzen tag mit
                        html/css arbeite. jeder lernt das mal (gerade aus fehlern), aber halt nur wenn man ein wenig
                        hilfe beim suchen seiner fehler bekommt.



                        [...]


                        aber trotzdem danke für die links, ich bin dabei zu kapieren wie das alles
                        so ca. funktioniert. nur das problem mit der reihenfolge mit übereinander
                        liegenden objekten hab ich noch! ich hab mir in selfhtml übrigens auch schon
                        zig-mal alles zum thema "z-index" durchgelesen und ausprobiert!
                        selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
                        und die divs mit einem z-index von 3 oder so belege, ist das bild
                        noch on-top! waurm?!
                        (kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )

                        Code:
                        <style type="text/css"><!--
                        .menubar {
                          position: absolute;
                          top: 16px;
                          width: 200px;
                          height: 100px;
                          background-color: #efefef;
                        }
                        // --></style>
                        <div name="menubutton" style="position: absolute;">
                          <div id="menu1" class="menubar" style="display: none;">asd</div>
                          <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
                        </div>
                        <br>blablabla<br><br>
                        <div name="menubutton" style="position: absolute;">
                          <div id="menu2" class="menubar" style="display: none;">asd</div>
                          <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
                        </div><br>
                        <hr>
                        GLORIA PERPETUA

                        Kommentar


                        • #13
                          Original geschrieben von deklarmart
                          selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
                          und die divs mit einem z-index von 3 oder so belege, ist das bild
                          noch on-top! waurm?!
                          (kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )
                          von einem z-index kann ich da weit und breit nichts entdecken.
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar


                          • #14
                            hatte ich auch wieder rausgenommen, da es nicht funktioniert hat.
                            (EGAL wo ich es hingeschrieben habe und wie ich die ebenen geordnet
                            habe. das bild war wie gesagt IMMER on-top)
                            GLORIA PERPETUA

                            Kommentar

                            Lädt...
                            X