Hi all, My client has mocked up a layout feature that I am quite clueless on...it requires a horizontal scrollbar to view information that is wider than the screen. A picture tells a thousand words here, so please view the attachment, and any guidance you could give me here would be really appreciated. Do I need a frame for this? Or perhaps I need to force a horizontal scroll bar? Not really sure. Thanks in advance. -Jon
Make a div, set the height, set overflow:auto; - create a div inside it fixed to the total width of all elements, set the elements inside it to float:left; Should do the trick. No frames, no javascript.
This won't be all that hard to do. Make a list, with list items inline-block, and ul set to {white-space: nowrap;}. For a two part demo, see scrolling gallery and inline-block gallery. Essentially, you have a list of power-point like slides you want to scroll like a gallery. Be sure to carefully structure your document, so when your client comes out of his stupor, it will be a trivial matter to change the css to provide a more user friendly layout. cheers, gary
I've used the technique deathshadow just mentioned for an image gallery of home photos. You can also see the technique at apple.com/mac at the top of the page... turn Javascript off to see the acctual boxes. They layered Javascrtipt on top to make their own goofy Apple scrollbar and do the automatic scrolling thingie. Extra bloat for extra BS, but it looks pretty.
Though one should point out that javascript off the page is still functional - you still get a scrollbar and can scroll to see the content. This is exactly how I write all of my javascripts. Apple did something other people writing scripts should REALLY pay attention to - graceful degredation. Javascript should enhance functionality (and occasionally provide missing functionality in legacy browsers), not replace it outright.
Yes, I saw it w/o the JS first and thought it was neat. I think they used too many boxes though--- you only really need two, the short outer one and the looooooong inner one. When I saw it on the colleague's machine, it was all Apple'd up and I was like, whoa, it does more!