0

I'm attempting to integrate code seen on this site: http://madesignuk.com/uploader/ from this post: Sliding An Entire Web Page into my site.

So far, I've gotten the divs to animate. The transition to the first div is fine, but when going to a new div, either forward or backward breaks, and the screen doesn't travel the whole distance.

Here's the code I'm using, although it works fine here: http://jsfiddle.net/QZCZh/8/

Adding some alerts to my code shows that the $(".content").css("left") value is different than what it should be after the transition.

I.E: The:

 $(".content").animate({
      left: (currPos - (this.windowWidth) + this.scrollbar) + 'px'
 }, 'slow');

section shows that (currPos - (this.windowWidth) + this.scrollbar) is 1519px before the transistion. However, after the transistion $(".content").css("left") returns -1898.75px, when it should return -1519px. I've looked for about an hour. and I can't seem to find the problem. What am I doing wrong?

Community
  • 1
  • 1
justindao
  • 2,273
  • 4
  • 18
  • 34
  • The sliding on your site works fine for me... – ayyp Jun 11 '13 at 17:51
  • It does for me as well on the JSFiddle. However, on my actual site, it breaks. – justindao Jun 11 '13 at 17:51
  • Unless I don't understand what you're trying to achieve, your actual site works for me. – ayyp Jun 11 '13 at 17:53
  • The snippet works with me too, what's your site so we can take a look there ? also, why is currPos multiplied by 1 ? – Mostafa Berg Jun 11 '13 at 17:53
  • I'm not sure why it's multiplied by 1, I just copy and pasted from the site. =P My site is a rails app on my computer, so I can't really show it to you. I'll try to get something up on JSFiddle. – justindao Jun 11 '13 at 17:59
  • @AndrewPeacock None of the links I posted are the actual site. I'm making a rails app on my local computer, and trying to integrate this code. It works fine in the JSFiddle, but unfortunately isn't working for me on my app. – justindao Jun 11 '13 at 18:02
  • Here's basically what I'm doing, but it still works here, but not on my site. http://jsfiddle.net/QZCZh/9/ – justindao Jun 11 '13 at 18:11

1 Answers1

0

So I figured out by using percentages.

http://jsfiddle.net/QZCZh/11/

$(".content").animate({
     left: "+=" + movePercent + "%"
}, 'slow');

EDIT: I was subtracting the scrollbar width rather than adding it. Everything works now.

justindao
  • 2,273
  • 4
  • 18
  • 34