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:

更多精彩内容

精彩评论

最新问答

看不孕不育哪家医院强？

不孕症医院排名？

怎样增加精子活力和数量？

如果奥运延期，会对在中国举办的世俱杯、亚运会、冬奥会产生影响吗？？

治输卵管堵怎么治？

问答排行榜

Escaping "<" in Perl-generated XML

微信重新建群怎么建？

imessage会显示已读吗？

太快了能不能慢一点好爽~好大~不要拔出来了？

二年级家长回音怎么写大全简短的（二年级家长回音怎么写）？

HTML Document:

JavaScript:

CSS:

更多精彩内容

精彩评论

最新问答

看不孕不育哪家医院强？

不孕症医院排名？

怎样增加精子活力和数量？

如果奥运延期，会对在中国举办的世俱杯、亚运会、冬奥会产生影响吗？？

治输卵管堵怎么治？

问答排行榜

Escaping "<" in Perl-generated XML

微信重新建群怎么建？

imessage会显示已读吗？

太快了能不能慢一点 好爽~好大~不要拔出来了？

二年级家长回音怎么写大全简短的（二年级家长回音怎么写）？

太快了能不能慢一点好爽~好大~不要拔出来了？