1

I have a jquery content slider on a site I'm developing. I am having a strange problem that seems to be across all browsers and that is the slider slides the wrong distance if the page is refreshed via the refresh button.

To re-create the problem please follow these steps -

click this link http://www.aus-media.com/dev/site_BYS/index.html

then click on the 'About Bikram Yoga' menu item at the bottom. Click on the 'more' and 'back' tabs on this page and you will notice it works fine. Then refresh the page by clicking the refresh button and try the more and back buttons again. I'm a bit of a javascript newby so I'm lost to why it's doing this. Any help would be great.

Thanks Nik

Rupesh Yadav
  • 12,096
  • 4
  • 53
  • 70
Nik
  • 671
  • 1
  • 8
  • 27
  • The slider works fine and I can't see a refresh button the page. Refreshing the page with the browser does not break it for me. – Hultner Apr 24 '10 at 19:54
  • Refresh the browser, I meant the refresh button built into the browser. I have tested it on 3 systems and can assure you its broke =/ – Nik Apr 24 '10 at 20:01
  • Works in Safari, but I think I see what you mean in Firefox. Specifically (for me anyway) the third slide is shifted slightly to the left after refresh. Is that what you're getting? – user113716 Apr 24 '10 at 20:06
  • Yeh.. I just checked safari on the mac and its fine. On other browsers when I refresh, the page loads fine but when I go to slide the content it slides the div about 50% too far each time the more or back button is pressed. – Nik Apr 24 '10 at 20:11
  • The width of your container `ul` is **3,680** at first, but when you refresh, it changes to **3,972**. So it has something to do with how the width of that container gets calculated. – user113716 Apr 24 '10 at 20:12
  • I can't seem to replicate the problem using Firefox 3.6 on a Mac. – Hultner Apr 24 '10 at 20:23
  • @Hultner - Are you sure? I'm using the same browser, and I am getting Nik's issue. After refresh, each slide is shifted slightly to the left. You don't notice it on the first couple, but the more you go to the right, the more apparent it is. – user113716 Apr 24 '10 at 20:28
  • There are some strange calculations happening. Not only does the width of the container change, but the scroll distance changes from **920px** like it should be, to **869px**. Looks like you're using a plugin. Might want to try a different one, or build your own slider. (They're easy.) – user113716 Apr 24 '10 at 20:37
  • @patrick - No for some reason I'm not able to replicate the issue. – Hultner Apr 24 '10 at 21:01
  • Thanks for having a look guys. I will see if I can build it custom rather than using the one I'm using. It is strange that refresh changes the dimensions though. Oh well. – Nik Apr 25 '10 at 04:34
  • Patrick you have lead me in the right direction. All I had to do was set the width of the
      inline on the html page. So it read like this -
        Thanks again!
     – Nik Apr 25 '10 at 05:31

1 Answers1

0

Patrick you have lead me in the right direction. All I had to do was set the width of the <ul> inline on the html page. So it read like this -

<ul style="width: 920px">

This stops the width of the <ul> being changed when the page refreshes. I am guessing this is why it's not unusual to see inline styles in these types of situations.

Thanks again!

Nik
  • 671
  • 1
  • 8
  • 27