CODEWITHSUNDEEP
jqueryhtml
Valeria Melinte
Valeria Melinte

Reputation: 137

sliding arrow under menu

I created a menu with an arrow below that slides horizontally in accordance with the currently active menu item. Here is the HTML 

<div class="services-block">
    <div id="services-carousel" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner services" role="listbox"  id="services">
          <div class="item active">
             <ul class="tabbed-menu menu-list">
                <li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Consultanță IT</a></li>
                <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Managementul Relațiilor cu Clienții</a></li>
                <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Business Intelligence</a></li>
                <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Turism și Ospitalitate</a></li>
                <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finanțe și Bănci</a></li>
                <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
             </ul>  
          </div>
       </div> <!--/.carousel-inner-->
       <div id="marker"></div>
   </div> <!--/#services-carousel-->

CSS

#marker {
    background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;   
    height: 16px;
    left: 14%;
    position: absolute;
    z-index: 1;
    width: 45px;
    transition: .4s left ease-in;}

And I use this script to move the arrow (div#marker)

$("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);

});

It works fine, except the fact that when I resize the browser window, the arrow remains at the position before resizing the window; it doesen't slide below the center of the item. Does anyone know how can I fix this? Here is also a screenshot, the window here is resized enter image description here

Upvotes: 0

Views: 758

Answers (3)

Valeria Melinte
Valeria Melinte

Reputation: 137

This gives me the result I want 

$("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);   
   });
   $(window).resize(function(){
     var _this = $('#services li a.active'); //<----the current active tab;
     var position = _this.position().left; // update the position
     var width = Math.round(_this.width()/2) - 5; // calc the width
     var arrowPos = position + width; // add value for position
     $('#marker').css('left', arrowPos); // set the same marker position left
 }).resize();

Upvotes: 0

nkorth
nkorth

Reputation: 1694

Rather than using the resize event to brute-force the problem, you could make sure the position: absolute is in the context of an element that doesn't resize. Find which div in the nav doesn't change size, add position: relative to it, and make sure div#marker is a child of that div.

Upvotes: 0

Jai
Jai

Reputation: 74738

so something like this when you do browser resize: 

$(window).resize(function(){
    var _this = $('.tabmenu.active'); //<----the current active tab;
    var position = _this.position().left; // update the position
    var width = Math.round(_this.width()/2) - 5; // calc the width
    var arrowPos = position + width; // add value for position
    $('#marker').css('left', arrowPos); // set the same marker position left
}).resize(); // <----trigger it on dom ready.

Upvotes: 1

Related Questions