0

The website I'm working on has a wide main content block that doesn't fully fit inside the smaller resolution screen.

http://www.cybart.com/bscg/

I want to use jQuery to force the horizontal scrollbar to appear scrolled to the middle, so that a user who has a smaller resolution screen can scroll to the left and access the menu that would otherwise be hidden.

I would be grateful for the expertly advice!

1 Answer 1

2

If you use scrollTo plugin, you can say: $(...).scrollTo( '50%', {axis: 'x'} );

10
  • Thanks Mrchief. A question: wouldn't it be the same as saying $(...).scrollLeft(50);? Jul 20, 2011 at 1:38
  • Not exactly. With scrollLeft you're moving it by 50px. So you need to calculate the proper value for different screen sizes if you want to move it to the middle. The plugin just makes it easy as it does all the calculation for you. Plus you can do so much more with it.
    – Mrchief
    Jul 20, 2011 at 1:42
  • Mrchief, it's a nice plugin and I applied it, but either I don't quite understand how to use it, or it's not meant to do what I want. Could you please take a look at my site again and see what the plugin now does? Jul 20, 2011 at 2:05
  • It's scrolling to the middle but I think you want it scroll so that the main div is visible, right? If yes, then instead of '50%', use: jQuery('#main').offset().left. Either jQuery(document).scrollLeft(jQuery('#main').offset().left) or jQuery(document).scrollTo(jQuery('#main').offset().left, {axis: 'x'}) will work.
    – Mrchief
    Jul 20, 2011 at 2:28
  • Thank you Mrchief. Actually, I want it to scroll so that #access element is visible (that is, the navigation menu attached to the left of the container). How would I need to modify the code to make it work? Jul 20, 2011 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.