Develop Reference

Smooth scroll div horizontally by a pixel amount, no scrollbars

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.

I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post

Top and bottom split-screen with jquery, constraining the bottom half to the page

I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).
Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.
The following demo will show you basically what I am doing as well as my problem:
http://jsfiddle.net/mstefanko/e38bE/67/
I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.
Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.
Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.
Any help is appreciated, thanks!

Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:
Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
Set the overflow value and get rid of the resizer entirely
Give container a css height value of auto or scroll (if size is not an issue)

hide lines of text not fully visible with javascript & css

I think this might be impossible, but is there some way using JQuery to prevent lines of text not fully visible from showing up on the screen when a user scrolls until the entire line is visible? That is, we want to prevent something like this from showing up:
Thanks!

I agree with #rahmanisback, don´t mess with the user's browsing experience.
However, what would perhaps be a nice "inbetween" solution, is using a transparency gradient so that the bottom pixels fade out. But that would apply also to "whole" lines, so perhaps that´s not a good solution for your problem.

I don't know if there is something out there to do that. But I think it will cause confusion more that it would make any visual enhancement ever. A user will not be happy when scrolling down and finds lines just "popup" suddenly, in opposite to normally easing out as a result of scrolling action.
After all, when we speak about a scrollable HTML element with scrollbars visible, a user is aware text might be partially shown and that is normal and needs to be scrolled down to read the remaining. I really would not recommend that.
But for a technical answer, I think you would need to fix the CSS line-height property of that scrolling element, say make it 8px or whatever fits your layout. Then, capture the scroll event and devide the jQuery scrollTop() by that CSS line-height, then check the results: if it have a fraction then that means there is a "partially visible" line. Don't forget aout margin and padding that can cause mistakes when calculating.

I believe I have had this problem also, in that you have a div with a specific height and overflow hidden.
Thinking about it i would resize the div based on the line-height of the text in the div.
Change the height of div so that it equals a multiple of the line height of the containing text....
ie 3 lines of text with line-height = 16 change the div height from 50 to 48px.
( i posted this at the same time as rahmanisback' answer )

Hypothetically you could measure the height of text area, measure the height of the line, find scroll position do some math and then have some way of hiding text that is not fully exposed yet (eg Using a white div of x height depending on your math). However, it seems like a lot of trouble to go to for something that is usually a non-issue. You might also be able to do something with the overflow property, but you might have some issues with that I'm not sure.
I thought of an alternate method that would be easier to implement. Capture scroll events and then change it to the closest multiple of line height.

Is it possible to prevent just horizontal scrolling when overflow-x is hidden?

I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.

you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.

I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.

I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.

If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.

This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)

Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...

show scrollbar to the right?

whenever the page's height is larger than the web browser window a scrollbar will appear to the right so you can scroll down/up in your page.
could scrollbar be displayed with javascript/jquery all the time even if there is no need for it? (has to do with a layout issue i've got)

You can do that even without javascript, it is a CSS property:
overflow: scroll
But this will also always show a scrollbar at the bottom. Afaik you cannot avoid this.
It might be that this confuses the user somehow as normally he is not used to the fact that a scrollbar is shown even if he cannot scroll.
Before you use this solution, you should try to fix your layout issue.

If you give the appropriate container element the style `overflow: scroll' then it'll have scrollbars. You can do that with jQuery if you like:
$('#containerId').css({overflow: 'scroll'});
Or of course you can do it in a CSS file, or even right on the element itself. You'll have to figure out which element to do that to; post some code if you need advice.

Don't need javascript. Just add the css
body{
overflow: scroll;
}