div wenn innerhalb Bildschirm

Question

ich auf einem Menü wie folgt arbeite: http://jsfiddle.net/ud100m3t/1/

Ich habe ein Problem mit diesem, wie Sie sehen können, wenn Sie mit der rechten einige Male Pfeil drücken, wird das Menü ein Leerzeichen Scrollen ist gefüllt, seit Sie Ihre Bewegungen beendet haben (eingestellt in maxState Variable, die gesamten Menüelemente).

Ich möchte dieses Verhalten anders machen: Wenn das letzte Element auf dem Bildschirm erscheint und Sie erneut rechts drücken, wird das Menü zurückgesetzt (wie jetzt, wenn Sie 7 mal drücken, blättern Sie in die entgegengesetzte Richtung und beginnen auf der anderen Seite).

Stromausgang: http://screencast.com/t/MS9H0ByPr Wunsch Ausgabe: http://screencast.com/t/1rHbgr6ZEuJ

Das ist mein Beispiel-Menü:

<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> 

Und das ist mein Javascript-Code:

$(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); 
    }); 
}); 

(Sie die CSS sehen in der Geige)

I Ich probierte einige komische Kombinationen mit der Breite des Bildschirms und den Kastenbreiten, aber ich bremse nur mehr das Menü. Irgendeine Idee oder Hilfe, um damit fortzufahren?

Dank

Answer 1

Nicht sicher, ob dies behebt das Problem, sondern nur für die Sicherheit würde ich überprüfen Sie die state Variable mit <= und >=:

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

können Sie auch diese Aussagen durch kürzere Code wie folgt, wenn ersetzen:

Während ich dein Menü ausprobierte, bemerkte ich auch, dass, wenn es zum Beispiel sechs von sieben Menüpunkten gibt, nur zwei verschiedene Zustände (statt sieben) sind. Wenn Sie die Breite des Menüs und die Breite jedes Menüelements kennen, können Sie die Anzahl der tatsächlich unterschiedlichen Zustände berechnen.