jQuery - problem z menu

adimoo

Avatar: adimoo

2013-04-26 02:03

Witajcie, mam problem, moje menu2 jest generowane w taki sposób :


<div id="header_1">
  <div id="example-two">
    <div class="l1 selected menufirst"><a href="./">O nas</a></div>
    <div class="l2"><a href="?sklep-w-cieszynie,3">Sklep w Cieszynie</a></div>
    <div class="l3 menutop"><a href="?wysylka-i-platnosc,27">Wysyłka i płatność</a></div>
    <div class="l4"><a href="?regulamin,4">Regulamin</a></div>    
    <div class="lL"><a href="?kontakt,2">Kontakt</a></div>
    <div id="magic-line-two"></div>
  </div>        
</div>



na samym dole w index.php (więc po </html>) mam doklejone jQuery :

<script type="text/javascript" src="<?php echo $config['dir_plugins']; ?>jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?php echo $config['dir_plugins']; ?>example.js"></script>

plik example.js :


// DOM Ready
$(function() {

    var $el, leftPos, newWidth; // Stałe
        $mainNav2 = $("#example-two"); // bar nawigacji (menu2)
    
    var $magicLineTwo = $("#magic-line-two"); //podpięcie pod zmienną
    
    if ($(".menutop").length>0){ // Jeżeli jest "SELECTED" to użyj tego
         $magicLineTwo
        .height(29)
        .css("left", $("div .menutop a").position().left)
        .width($("div .menutop").width())
        .data("origLeft", $magicLineTwo.position().left)
        .data("origWidth", $magicLineTwo.width())

    } else { // JEŻELI INNA KATEGORIA to ustaw na PIERWSZY element MENU2

    $magicLineTwo
        .height(29)
        .css("left", $("div .menufirst a").position().left)
        .width($("div .menufirst").width())
        .data("origLeft", $magicLineTwo.position().left)
        .data("origWidth", $magicLineTwo.width())
    }
    
    
    // FUNKCJA ANIMACJI CHODZI SUPER :)
    $("#example-two a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
        });    
    });
});



PROBLEM : Skrypt ŹLE interpretuje czasami width (zła szerokość) i left (nie schodzi się 'pod' napis).

Zobaczcie - kliknijcie na Menu2 na górze i parę razzy F5 - na każdej pozycji co jakiś czas coś się dzieje złego (to za mały, to przesunięty :(...):

hamster.froststudio.pl

ew. CSS (ale to nie wina CSS - na czysto chodzi super, coś Q.Cart chrzani po drodze) :


#example-two {
    text-align:center;
    margin: 0 auto; 
    list-style: none; 
    position: relative;
    font-family: 'Roboto Condensed', sans-serif;
    position:relative;
    top:20px;
}
#example-two div { 
    display: inline-block; 
}
#example-two div a { 
    position: relative; 
    z-index: 200; 
    color: #fff; 
    font-size: 13px; 
    display: block; 
    float: left; 
    padding: 6px 8px 4px 8px;
    text-decoration: none;
    text-transform: uppercase; 
}
#example-two div a:hover { 
    color: white; 
}
#example-two #magic-line-two { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px;
    color:#000000; 
    background: #adcb31; 
    z-index: 100; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.ie6 #example-two div, .ie7 #example-two div {
    display: inline;
}



Na czystym Html działa OK i nic się nie dzieje (jeżeli wydzielę menu + CSS + jQuery).

Pomocy :P

» Quick.Cart v6.x

froststudio.pl

adimoo

Avatar: adimoo

2013-04-26 02:27

Dobra mam - walczyłem 6h, potem się zdecydowałem napisać i w ciągu 15min znalazłem rozwiązanie :

$(window).load(function() {
}

dokument.ready() nie daje rady niestety, można usunąć temat lub zostawić notkę : Jeżeli jQuery ma problem z pobieraniem wartości to wrzucać wszystko w powyższą funkcję.

Admina proszę o uporządkowanie i przepraszam za problem.

froststudio.pl

Do góry
o nas | kontakt