jQuery background image slider menu sliderbox not taking initial position correctly

2023-02-23 01:20 问答作者：

I am trying to build my own menu based upon jQuery Magic Line Navigation.

I pretty much succeeded but struck out where my page containing the menu loads. The animated slider box does not take its initial position correctly (example here).

However if I use alert to check the position & width where it's been placed, just after throwing the alert function with details of width & position from left, it works fine in Opera & FF—but not in Chrome (example here).

HTML Document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Background Image Slider Menu</title>

<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="menu.js"></script>

</head>
<body>

<div id="menu">
  <div id="menutxtwrapper">
       <ul id="menutxtlist_ul"> 
             <li><a href="#">&nbsp;ABOUT&nbsp;</a></li><img class="hr_divider" src="menu-1px-divider.png"/>
             <li><a href="#">&nbsp;SERVICES&nbsp;</a></li><img class="hr_divider" src="menu-1px-divider.png"/>     
             <li><a href="portfolio.html">&nbsp;PROFILE&nbsp;</a></li><img class="hr_divider" src="menu-1px-divider.png"/>
             <li class="current_item" id="currentitem">&nbsp;BLOGS&nbsp;</li><img class="hr_divider" src="menu-1px-divider.png"/>
             <li><a href="themes.html">&nbsp;THEMES&nbsp; </a></li>                                 
       </ul>                                       
  </div>
</div>
</body>
</html>

JavaScript:

$(document).ready(function(){
    var $el, leftPos, newWidth, $menu = $("#menutxtwrapper");

    //alert("current item width is:" + $(".current_item").width());
    //alert("current item Left is:" + $(".current_item").position().left);      

    $menu.append("<div id='slider_box'></div>");   
    var $sb = $("#slider_box");

    $sb.width($("#currentitem").width());
    $sb.css("left", $("#currentitem").position().left);     

    $sb.data("origLeft", $sb.position().left);
    $sb.data("origWidth", $sb.width());             

    $("#menutxtlist_ul li"开发者_如何学编程).find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $("#currentitem").css({
        color: "#ff0000"});

        $sb.stop().animate({
            left: leftPos,
            width: newWidth
        },{duration:600,easing:"easeOutExpo"});
    }, function() {
        $sb.stop().animate({
            left: $sb.data("origLeft"),
            width: $sb.data("origWidth")
        },{duration:1000,easing:"easeOutExpo"});

        $("#currentitem").css({
            color: "#666666"});
    });    
});

CSS:

body { background:#333333; }

#slider_box {
    background:url(hover-menu.png);
    height:39px;
    position:absolute;
    top:-10px;
    left:0px;   
    z-index:3;

    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    -moz-border-bottom-left-radius: 10px 10px;
    -moz-border-bottom-right-radius: 10px 10px; }

#menu {
    background:url(menu-base.png);
    width:525px;
    height:55px;
    position:absolute;
    top:60px;
    right: 395px;
    z-index:2;
}

#menutxtwrapper {
    position:absolute;
    width:525px;
    height:55px;
    left:29px;
    top:10px;
    margin: 0 auto;

    z-index:5;
}

#menutxtlist_ul {
    position:absolute;
    height:55px;
    top: 0px;
    left: 0px;
    margin:0px;
    padding:0px;
    list-style:none;

    z-index:6;
}

#menutxtlist_ul li {
    font-family:'Cuprum', arial, serif; 
    font-size:16px; 
    letter-spacing:2px;  
    display:inline;
    z-index:6; }

#menutxtlist_ul li a {      
    color:#666666;  
    list-style:none;
    text-decoration: none;
    text-transform: uppercase;  
    z-index:6;

    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out; 
    -o-transition: color 0.5s ease-in-out; 
    -ms-transition: color 0.5s ease-in-out; }   

#menutxtlist_ul li a:hover {
    color: #333333;  }

#currentitem {
    font-family:'Cuprum', arial, serif; 
    font-size:16px;
    letter-spacing:2px;  
    display:inline;
    color: #666666;

    -webkit-transition: color 0.4s ease-in;
    -moz-transition: color 0.4s ease-in; 
    -o-transition: color 0.4s ease-in-out; 
    -ms-transition: color 0.4s ease-in-out;  }

#currentitem:hover { cursor:pointer; }

.hr_divider { 
    margin:auto 10px;
    vertical-align:middle; 
    border:none; 
    text-decoration:none; }

After a one more day of brain storming i figure it out & make the menu working flawlessly in CHROME, MOZ & OPERA though it still have some issues in IE prior to 9 versions due to CSS3 support but the sliding & position also worked in IE8 & below.You can use PIE to support it in IE8 & prior i guess.
So i am putting the working codes here. Find the (new example here).

The problem was the browser's were unable to retrieve initial position:left of "currentitem" as because they were not already defined in the css, so browser is throwing the value after positioning the currentitem, which according to the browser calculation of placing the element itself & also because its container was defined absolute so it keep calculating the positions as the elements layoff in the viewport/screen which coming differently from each browser.

This i checked when i was throwing values of width & postion for each "currentitem" using alert & they were coming differently from each browser. Such as for "currentitem" BLOG:

             WIDTH       POSITION  

CHROME       73           337
MOZILLA      78           302.3833  
OPERA        77           304

When i use alert it stores the value of the "currentitem" before putting it on screen which was calculated as per its parent absolute element "menutxtwrapper" which surprisingly coming ok.

Solution: According to the above theory i decided to make all the "li" elements & "currentitem" define absolute & position them where i needed. This makes define their left position available is the CSS, so when the document loads the left value for each li & currentitem is available for the calculation.

For this i added extra details in CSS, "id" for each "li" and put value of left & width there. As i used "id" in "li" so i changed [ id="currentitem" ] to [ class="current_item"].

For Script menu.js there is little change. We calculate newWidth as [ newWidth = $el.width(); ] which was before [ newWidth = $el.parent().width(); ] as we now not caculate new width according to the parent but the "li" element itself.

NEW CODES BELOW:

NEW HTML:

<body>

<div id="menu">
  <div id="menutxtwrapper">
       <ul id="menutxtlist_ul"> 
             <li id="about"><a href="#">&nbsp;ABOUT&nbsp;</a></li>
             <img class="hr_divider" id="v1" src="menu-1px-divider.png"/>                     

             <li id="service"><a href="portfolio.html">&nbsp;SERVICES&nbsp;</a></li>
             <img class="hr_divider" id="v2" src="menu-1px-divider.png"/>                        

             <li class="current_item" id="profile">&nbsp;PROFILE&nbsp;</li>
             <img class="hr_divider" id="v3" src="menu-1px-divider.png"/>

             <li id="blog"><a href="#">&nbsp;BLOGS&nbsp;</a></li>
             <img class="hr_divider" id="v4" src="menu-1px-divider.png"/>

             <li id="themes"><a href="themes.html">&nbsp;THEMES&nbsp; </a></li>                                 
       </ul>                                       
  </div>
</div>             

</body>

NEW CSS:

body { background:#333333; }

#slider_box {
    background:url(hover-menu.png);
    height:39px;
    position:absolute;
    top:-10px;
    left:0px;   
    z-index:3;

    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    -moz-border-bottom-left-radius: 10px 10px;
    -moz-border-bottom-right-radius: 10px 10px; }

#menu {
    background:url(menu-base.png);
    width:525px;
    height:55px;
    position:absolute;
    top:60px;
    right: 382px;
    z-index:2;
}

#menutxtwrapper {
    position:absolute;
    width:525px;
    height:55px;
    left:25px;
    top:10px;
    margin: 0 auto;
    z-index:5;
     }

#menutxtlist_ul {
    position:absolute;
    height:55px;
    top: 0px;
    left: 0px;
    margin:0px;
    padding:0px;
    list-style:none;

    z-index:6;
}

#menutxtlist_ul li {
        position:absolute;
    font-family:'Cuprum', arial, serif; 
    font-size:16px;
    color: #666666; 
    letter-spacing:2px;  
    display:inline;
    z-index:6;

    -webkit-transition: color 0.4s ease-in;
    -moz-transition: color 0.4s ease-in; 
    -o-transition: color 0.4s ease-in-out; 
    -ms-transition: color 0.4s ease-in-out;  }

#menutxtlist_ul li a {      
    color:#666666;  
    list-style:none;
    text-decoration: none;
    text-transform: uppercase;  
    z-index:6;

    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out; 
    -o-transition: color 0.5s ease-in-out; 
    -ms-transition: color 0.5s ease-in-out; }   

#menutxtlist_ul li a:hover {
    color: #333333;  }

.currentitem{   
    position:absolute;   
    display:inline;

     }

.currentitem:hover{ cursor:pointer; }


.hr_divider {
    position:absolute;
    margin:auto 10px;
    vertical-align:middle;
    border:none;
    text-decoration:none;


}

#v1 {
    top: 0px;
    left: 66px;
}
#v2 {
    top: 0px;
    left: 183px;
}
#v3 {
    top: 0px;
    left: 287px;
}
#v4 {
    top: 0px;
    left: 372px;
}

#about{
    width:60px;
    height:20px;


    position:absolute;
    left: 5px;
    top: 8px;
    text-align:center;
}

#blog{
    width:60px;
    height:20px;


    position:absolute;
    left: 311px;
    top: 9px;
    text-align:center;

}

#service {
    width:90px;
    height:20px;


    position:absolute;
    left: 91px;
    top: 9px;
    text-align:center;
}

#profile{
    width:80px;
    height:20px;


    position:absolute;
    left: 207px;
    top: 9px;
    text-align:center;
}

#themes{
    width:70px;
    height:20px;


    position:absolute;
    left: 395px;
    top: 9px;
    text-align:center;
}

NEW SCRIPT:

$(document).ready(function(){   

    var $el, leftPos, newWidth,

        $menu = $("#menutxtwrapper");

        //alert("current item width is:" + $(".current_item").width());
        //alert("current item Left is:" + $(".current_item").position().left);      

        $menu.append("<div id='slider_box'></div>");   
        var $sb = $("#slider_box");

        $sb.width($(".current_item").width());
        $sb.css("left", $(".current_item").position().left);        

        $sb.data("origLeft", $sb.position().left);
        $sb.data("origWidth", $sb.width());


    $("#menutxtlist_ul li").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.width();

        $("#menutxtlist_ul li").css({
            color: "#ff0000"});

        $sb.stop().animate({
            left: leftPos,
            width: newWidth
        },{duration:600,easing:"easeOutExpo"});
    }, function() {
        $sb.stop().animate({
            left: $sb.data("origLeft"),
            width: $sb.data("origWidth")
        },{duration:1000,easing:"easeOutExpo"});

        $("#menutxtlist_ul li").css({
            color: "#666666"});
    });    
});

Find the (new example here).
The good thing is as #menu being absolute, if you have a WYSWYG editor just move & place menu anywhere you want it.

继续阅读：animation jquery position

jQuery background image slider menu sliderbox not taking initial position correctly

HTML Document:

JavaScript:

CSS:

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？

HTML Document:

JavaScript:

CSS:

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生 新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？