Detect DIV, когда внутри экрана

Question

Я работаю над меню, как это: http://jsfiddle.net/ud100m3t/1/

У меня есть проблемы с этим, как вы можете видеть, когда вы нажимаете стрелку вправо несколько раз, меню прокручивается в пустом пространстве заполняется с тех пор, как вы закончите свои движения (заданные в переменной maxState, общие элементы меню).

Я хочу, чтобы это было по-другому: когда на экране появляется последний элемент, и вы снова нажимаете на правую кнопку, сбрасывается меню (например, когда вы нажимаете 7 раз, меню прокручивается в противоположном направлении и начинается с другой стороны).

Токовый выход: http://screencast.com/t/MS9H0ByPr Желаемая выход: http://screencast.com/t/1rHbgr6ZEuJ

Это мой пример меню:

<nav id="sub" class="clearfix"> 
<div id="lefty">&lt;</div> 
<div class="container_element"> 
    <div class="inner_container"> 
    <a href="#"><div class="box">Estimate</div></a> 
    <a href="#"><div class="box">About</div></a> 
    <a href="#"><div class="box">Customer Information</div></a> 
    <a href="#"><div class="box">Financing</div></a> 
    <a href="#"><div class="box">Careers</div></a> 
    <a href="#"><div class="box">Locate Us</div></a> 
    <a href="#"><div class="box">Inspiration</div></a> 
    </div> 
</div> 
<div id="righty">&gt;</div> 
</nav> 

И это мой Javascript код:

$(function(){ 
    var state = 0; 
    var maxState = 7; 
    var winWidth = $(window).width(); 
    $(window).resize(function(){ 
     winWidth = $(window).width(); 
     $('.container_element').width(winWidth-100); 
     $('.container_element').scrollLeft((winWidth-100)*state); 
    }).trigger('resize'); 
    $('#lefty').click(function(){ 
     if (state==0) { 
      state = maxState; 
     } else { 
      state--; 
     } 
     $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800); 
    }); 
    $('#righty').click(function(){ 
     if (state==maxState) { 
      state = 0; 
     } else { 
      state++; 
     } 
     $('.container_element').animate({scrollLeft:($(".box").width()*state)+'px'}, 800); 
    }); 
}); 

(Вы можете увидеть CSS в скрипка)

I попробовал некоторые странные комбо с шириной экрана и шириной ящика, но я только разломал меню. Любая идея или помощь в продолжении этого? Благодаря

Answer 1

Не уверен, что это устранит ли проблему, но только для безопасности я хотел бы проверить переменную state с <= и >=:

$('#lefty').click(function(){ 
    if (state <= 0) { 
    // [...] 
}); 
$('#righty').click(function(){ 
    if (state >= maxState) { 
    // [...] 
}); 

Вы также можете заменить их, если заявления более короткий код, как это:

$('#lefty').click(function() { 
    state = (state <= 0) ? maxState : state - 1; 
    // [...] 
}); 

$('#righty').click(function() { 
    state = (state >= maxState) ? 0 : state + 1; 
    // [...] 
}); 

В то время как я тестировал ваше меню, я также заметил, что если есть, например, шесть из семи пунктов меню, то есть только два разных состояния (вместо семи). Если вы знаете ширину меню и ширину каждого пункта меню, вы можете рассчитать количество состояний, которые на самом деле разные.