Navigation "flackert" bei IE [CSS & JS]

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

  • Navigation "flackert" bei IE [CSS & JS]

    Hello again! *träller*

    Ich hab da ein kleines Problem! Ich bastle grad an ner neuen Seite in der ich ein "Tooltip-ähnliches" Submenü verwenden will. Fährt man mit dem Mousezeiger über die Kategorie erscheint onMouseOver ein Submenü mit weiterführenden Links...

    Leider passiert wenn man mit IE7 unterwegs ist folgendes:
    Fährt man im Submenü über einen Link, flackert das ganze Submenü!
    FireFox macht wie immer keine Probleme!

    Das ist relativ störend und ich denke irgendjemand von euch könnte mir da weiter helfen! Sowohl CSS als auch HTML-Quelltext hab ich schön übersichtlich gestaltet, somit sollte man ohne geposteten Code auskommen!

    Seite: soll keine Werbung sein
    CSS: soll auch keine Werbung sein

    Ich danke euch schon mal vorab......
    WHILE (!$asleep) { $sheep++; }

  • #2
    Ok ich seh schon; Es hat keiner Bock sich durch den gesammten Quelltext zu quälen.... Ich bin selbst Informatiker also kann ich das nachvollziehen...

    JavaScript Blendet das Submenü ein/aus...:
    PHP-Code:
    function showMainNaviSubMenu(objIDhidesel1hidesel2) {
        var 
    obj document.getElementById(objID);
        if(
    obj) {
            
    obj.style.display 'block';
        }
                
        if(
    hidesel1) {
            var 
    sel1 document.getElementById(hidesel1);
            if(
    sel1) {
                
    sel1.style.visibility 'hidden';
            }
        }
        if(
    hidesel2) {
            var 
    sel2 document.getElementById(hidesel2);
            if(
    sel2) {
                
    sel2.style.visibility 'hidden';
            }
        }
    }
                
    function 
    hideMainNaviSubMenu(objIDhidesel1hidesel2) {
        var 
    obj document.getElementById(objID);
        if(
    obj) {
            
    obj.style.display 'none';
        }
        
        if(
    hidesel1) {
            var 
    sel1 document.getElementById(hidesel1);
            if(
    sel1) {
                
    sel1.style.visibility 'visible';
            }
        }
        if(
    hidesel2) {
            var 
    sel2 document.getElementById(hidesel2);
            if(
    sel2) {
                
    sel2.style.visibility 'visible';
            }
        }


    HTML:
    PHP-Code:
        <DIV CLASS="navi" STYLE="z-index: 5;"
    onmouseover="showMainNaviSubMenu('mainNavSubMenuExtras','select_cat')"
    onmouseout="hideMainNaviSubMenu('mainNavSubMenuExtras','select_cat')">
        <
    A HREF="mainsite.php" CLASS="navi" TITLE="Extras"><SPAN>Extras</SPAN></A>

            <!-- 
    START Produkte SUBNAVI -->

            <
    div class="naviSubMenu" id="mainNavSubMenuExtras" style="display: none;">
            <
    a href="mainsite.php">• Downloads</a><BR>
            <
    a href="mainsite.php">• Game Area</a><BR>
            <
    a href="mainsite.php">• Anleitungen</a><BR>
            <
    a href="mainsite.php">• Searchbot</a>
            </
    div>

            <!-- 
    END Produkte SUBNAVI -->

        </
    DIV
    Wenn ihr die betreffenden Stellen aus dem CSS auch noch explizit gepostet wollt poste ich die gerne auch noch!
    WHILE (!$asleep) { $sheep++; }

    Kommentar


    • #3
      Mhm. Ich nehme an, der IE kann sich nicht so recht entscheiden, worüber die Maus grade fährt: Über den Link im Div oder über das Div. Deswegen wird quasi annähernd zeitgleich onmouseout und onmouseover getriggert. Hatte mal ein ähnliches Problem, was ich mit Prototype gelöst habe. Dazu wurde der onmouseover auf dem Menupunkt getriggert und das Ausblenden beim onmouseover von body. Dabei wurde allerdings geprüft, ob das Event evtl. von einem Element ausgelöst wurde, was grad angezeigt werden soll.

      Anyway, ich empfehle eh gerne Prototype: http://prototypejs.org/
      [FONT="Helvetica"]twitter.com/unset[/FONT]

      Shitstorm Podcast – Wöchentliches Auskotzen

      Kommentar


      • #4
        was macht eigentlich diese ganze hidesel1 und hidesel2-nummer? da holst du dir n getElementById('select_cat') und setzt n style.

        allerdings sehe ich nirgends en ID namens select_cat ...
        **********
        arkos
        **********

        Kommentar


        • #5
          Das hidesel dient späteren Zwecken!
          Es soll dann später so ne Art "eigene Statusleiste" eingebaut werden, da steht dann einfach zu jemdem Ounkt eine kurze Erklärung.
          WHILE (!$asleep) { $sheep++; }

          Kommentar


          • #6
            änder doch einfach mal das onmouseover in onclick. wenn das menü nachm click verschwindet, isses sicher, dass unsets therorie richtig is... um das zu untermauern nimmste das onmouseout raus... dann müsste das menü ja da bleiben.... is zwar keine lösung, aber das problem is gefunden
            **********
            arkos
            **********

            Kommentar


            • #7
              So; hab jetzt mal arkos's Vorschlag in die Produkte Sparte eingesetzt:

              PHP-Code:
              <DIV CLASS="navi" STYLE="z-index: 5;" onclick="showMainNaviSubMenu('mainNavSubMenuProdukte')">
                  <
              SPAN>Produkte</SPAN>

                      <!-- 
              START Produkte SUBNAVI -->

                      <
              div class="naviSubMenu" id="mainNavSubMenuProdukte" style="display: none;">
                      <
              a href="mainsite.php">• 12h Server</a><BR>
                      <
              a href="mainsite.php">• TS2 Sponsoring</a><BR>
                      <
              a href="mainsite.php">• Image Hosting</a><BR>
                      <
              a href="mainsite.php">• Kinovorschau</a>

                      </
              div>

                      <!-- 
              END Produkte SUBNAVI -->

              </
              DIV
              Das Submenü verschwindet nach ca. 0.5sec. automatisch !?

              Edit:
              Ich Nase! Binaries über mein Haupt! Klar verschwindet es! Is ja nen Link drunter! *grumml* Ich nehm den mal eben raus!
              Zuletzt geändert von nichtsooft; 02.11.2007, 16:55.
              WHILE (!$asleep) { $sheep++; }

              Kommentar


              • #8
                Klar, weil so lange dauert es, bis die Seite geladen wurde
                [FONT="Helvetica"]twitter.com/unset[/FONT]

                Shitstorm Podcast – Wöchentliches Auskotzen

                Kommentar


                • #9
                  So! Link is nun raus! Das Menü bleibt nun ständig angezeigt UND flackert nicht mehr im IE! WTF?
                  WHILE (!$asleep) { $sheep++; }

                  Kommentar


                  • #10
                    hmm... Kaum kommt das onMouseOut wieder hinzu flackert's wieder... Damn.
                    WHILE (!$asleep) { $sheep++; }

                    Kommentar


                    • #11
                      Hab doch in meinem ersten Post erklärt, worans liegt.
                      [FONT="Helvetica"]twitter.com/unset[/FONT]

                      Shitstorm Podcast – Wöchentliches Auskotzen

                      Kommentar


                      • #12
                        Das hab ich ja auch schon kapiert! Bloß muss es doch noch ne andere Lösung geben als mit Prototype zu arbeiten!?
                        Bei anderen Seiten funktioniert's ja auch so....
                        WHILE (!$asleep) { $sheep++; }

                        Kommentar


                        • #13
                          Hast du es schonmal mit listen als Dropdown probiert?

                          http://www.htmldog.com/articles/suckerfish/dropdowns/
                          Killerspiele sollten in der Größenordnung von Kinder********************grafie eingeordnet werden.(G. Beckstein)
                          - ...und solche Behauptungen in "falsches Resourcenmanagement"

                          Kommentar


                          • #14
                            BIIIIG THX ZERNI!
                            WHILE (!$asleep) { $sheep++; }

                            Kommentar


                            • #15
                              SRY wegen doppelpost....

                              Also um das Problem das in diesem Thread beschrieben wurde zu erörtern:

                              Das flackern tritt nicht desshalb auf, weil sich IE "nicht entscheiden kann" worüber der Mauszeiger grade fährt, sondern wegen einem Scriptkonflikt!!!
                              Ich hatte mal abgesehn von meinen selbst geschnitzen Scripts auch noch Erik Bosrup's Overlib verbaut. Hierbei handelt es sich um ein Script, das Tooltips anzeigt. Die Funktionen sind also sehr ähnlich! Was im Endeffekt von IE fehlinterpretiert wurde wollte ich nicht nachprüfen; Jedenfalls nach dem Entfernen von Overlib funktioniert nun alles!

                              P.S.: Das Flackern trat sowohl bei meinem Script, als auch bei dem von Zerni vorgeschlagen auf!

                              Lg. aus Wien.
                              WHILE (!$asleep) { $sheep++; }

                              Kommentar

                              Lädt...
                              X