Question

I’ve made simple gallery with use of basic CSS,HTML, and jQuery, but it has few bugs, and I can’t figure out whats wrong. It works fine in Firefox, but not in other browsers. Here is the code

$(document).ready(function(){

 var x=0; var lava=0;
  //right arrow
$("#p_sipka").click(function(){
  if(x<9){
          x++; //used as a "position counter"
          lava = parseInt($("#slider").css("left"), 10); //parse a value of slider css.left property into var lava
          lava=lava-800; //substract 800 (pixels) - WORKS FINE IN FIREFOX, THROWS NaN in other browsers
          $("#slider").css("left",lava);  //set new value to slider
         }
  else if(x==9){
                $("#slider").css("left","0px");
                x=0;
               }    
});

First problem:
It should move slider div which is 8000px wide, one page is 800px wide, so to move gallery to left or right I change left property of slider div with clicking on arrows. I tried to debug it somehow.
Firefox Firstly, value of x is 0 then, when I click on right arrow (by the way left arrow works just fine in any browser) value of x is 1, and left property is changed to -800(No, not 800px, because I have to use parseInt, but it works).
Other browsers: It changes value of x but do not change left property.alert(x) throws 1 as it should but left property throws NaN, and after 10clicks, it starts working, as it should, but it still throws NaN.
Second problem:
CSS Transition.
I wanted to make my gallery nice and animated, so I used CSS transition property and set it to 1second;. It works fine, it takes 1second to change pages. So it is nicely changing left property for example from 800px to 1600px. But when I click on my arrown second time, and first animation is not finished yet, it adds or substract another 800pixels to a value which is set in that very second. For example, I click, it is changing from 800 to 1600 but when I click when left value is about 500px, it adds 800px and left value is now 1300px, and my gallery doesn’t look as it should. Is there any way to prevent my jQuery code to run again until first animation is finished?

Here is whole code
http://jsfiddle.net/QuyjZ/

Answer 1

first problem

---

 lava = parseInt($("#slider").css("left").replace(/px$/i,""), 10)

---

second problem …

---

lava = math.Ceil(parseInt($("#slider").css("left").replace(/px$/i,""), 10)/800)*800

but in fact you should count the number of page instead & multiply the index * 800 to get your position