Scrollable DIV (and Blog Organization)
March 27th, 2006One of my complaints with blogs is that they’re generally not organized in such a way that content is easy to find. They’re always organized (definitionally) by date, and they often work in some sort of category concept. This sounds fine in theory, but I often find it hard to determine what else is available on people’s blogs. Rarely is there an easy way to just see what’s out there, and jump directly to something that interests me.
In thinking about this, I decided one simple improvement would be to list more article titles on a given page. This is obvious, but rarely done. Most people display their latest 5 or 10 posts and that’s it. And as every web designer knows, getting people to explore-click is hard to do. You want your content a click away.
Obviously the problem with listing all your entries on one page is real estate. You don’t want a column 10 pages long running down the side of your otherwise tidy blog. It’s ugly (though people do it ocassionally.)
One simple way to solve this is to put your articles in a box, and scroll it. Something like:<ul style="height:70px; width:120px; overflow:auto; border:1px solid #cccccc;">
<li>article one</li>
<li>article two</li>
<li>article four</li>
<li>article five</li>
<li>article six</li>
<li>article seven</li>
<li>...</li>
</ul>
Which results in
- article one
- article two
- article four
- article five
- article six
- article seven
- …
Not bad. This kind of solves the problem, but it still doesn’t look good. I can’t stand the way a scroll bar looks when it’s in the middle of an otherwise well-presented page. It kind of blows the whole thing.
So I wanted to solve this problem. I wanted a scrollable list, but didn’t want it to have big nasty scrollbars.
Ultimately I implemented what you see in the top right of this page, around “recent articles”. It allows the user to see what’s available, without interrupting the flow with too much content, or an ugly scrollbar.
My first thought was to look to CSS (this is a display issue afterall). But CSS falls short. IE has a bunch of IE-specific styles available to modify the scrollbar (scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow- color, scrollbar-3dlight- color, scrollbar-arrow- color, scrollbar-track- color, scrollbar-darkshadow- color) but none of these work in any standards compliant browsers. Additionally, even in IE you can’t control the width of the scrollbar - and to me this is critical.
So I set about developing my own solution. The requirements:
- Non-intrusive and easy to implement: meaning I just want to add a classname to a box, and let javascript do the work.
- Highly customizable: I want my scrollbar to look like anything I choose. No limits
- Work in IE6 and Firefox - at a minimum.
- Must work for multiple boxes on one page
For starters, here’s the finished product:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nonummy. Suspendisse ultricies, dolor ac eleifend vehicula, magna arcu tempus eros, non adipiscing orci lacus sed augue.
Nam venenatis nibh sit amet nunc. Duis fringilla mattis tortor. Quisque vestibulum ipsum vel magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tellus eros, porttitor nec, fermentum fermentum, consequat et, velit. Donec volutpat, leo sed fringilla molestie, mauris mauris molestie lacus, eu luctus tellus orci non urna.
Cras ornare, dui non tempor lobortis, pede magna tincidunt enim, ut consequat nulla nibh ut tortor. Etiam sapien nulla, suscipit sed, rutrum faucibus, egestas et, turpis. Ut tempus. Praesent varius lacinia tortor. Curabitur at est. Sed tristique neque dapibus lorem. Donec erat pede, semper vel, ultrices at, ultricies sed, odio.
And here’s the code in a zip file (download and have a look at index.html)
To use this, include the javascript files, and the CSS. Then, simply give the box you want to scroll a height, a width, and the class “ag-makeScroll”. That’s it. You can change the colors, size etc of the slider by adjusting the included CSS file.
note: I’m including prototype and scriptaculous in the zip - though all my work is in the root folder (index.html, ag-scrollIt.js, and ag-scrollIt.css).
note: this thing has some doctype requirements. Read the note at the very bottom of this post if you’re going to make use of this thing.
So, my process:
I started with a generic constructor, a simple DIV. I don’t mind wrapping a DIV around other content so it’s where I started:<div class="overflowBox ag-makeScroll">
<p>Lorem ipsum ... </p>
<p>Nam venenatis... </p>
<p>Cras ornare,... </p>
</div>
I’ve given my DIV two classes. The first I’ll use to create a simple scrolling box. So if a user doesn’t have javascript turned on, it won’t fall apart completely. .overflowBox{
height:170px;
width:400px;
overflow:auto;
border:1px solid #cccccc;
}
The second class is the one I’ll use as a hook for my javascript. So any box that I want to scroll just needs “ag-makeScroll”.
The most complex element in this whole thing is the slider. I’ve built them in the past (including one for flash) but they can be tricky. Fortunately the prototype / scriptaculous library has a fantastic slider built right in. That page documents it well enough so I won’t go into it, but a few divs and a few lines of javascript gets a you a cross-browser slider that can look like any way you want, and reacts to user input. Fantastic. Many hours saved.
So now I just needed a way to make my content look like it scrolls when the slider is moved. To do this, I inserted an extra DIV in between the existing DIV and it’s content. Add the slider and the javascript-effected markup should look something like <div class="overflowBox ag-makeScroll">
<div class="ag-innerBox">
<p>Lorem ipsum ... </p>
<p>Nam venenatis... </p>
<p>Cras ornare,... </p>
</div>
<div class="ag-track">
<div class="ag-handle"> </div>
</div>
</div>
The DIVS for the slider are the ones with the classes “ag-track” and “ag-handle”.
The following CSS will control what that mark up will look like.ag-innerBox{
position:relative;
top:0px;
left:0px;
background:#ffffcc;
float:left;
}
.ag-track{
height:10px;
width:10px;
background:#cccccc;
float:left;
}
.ag-handle{
height:10px;
width:10px;
background:#739845;
cursor:pointer;
}
The key is positioning the inner DIV (ag-inner) relatively within the outer DIV. The following is an exploded view of the overall structure:
The inner DIV blows out of the outer DIV. But by hiding the overflow on the outer DIV, the inner stuff is hidden. Then, when the scrollbar is moved, adjust the position of the inner DIV by some amount. Again, the result is something like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nonummy. Suspendisse ultricies, dolor ac eleifend vehicula, magna arcu tempus eros, non adipiscing orci lacus sed augue.
Nam venenatis nibh sit amet nunc. Duis fringilla mattis tortor. Quisque vestibulum ipsum vel magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tellus eros, porttitor nec, fermentum fermentum, consequat et, velit. Donec volutpat, leo sed fringilla molestie, mauris mauris molestie lacus, eu luctus tellus orci non urna.
Cras ornare, dui non tempor lobortis, pede magna tincidunt enim, ut consequat nulla nibh ut tortor. Etiam sapien nulla, suscipit sed, rutrum faucibus, egestas et, turpis. Ut tempus. Praesent varius lacinia tortor. Curabitur at est. Sed tristique neque dapibus lorem. Donec erat pede, semper vel, ultrices at, ultricies sed, odio.
I’ve just offered a simplified explanation of what’s going on so have a look at the javascript in the zip file above to get the details. This thing has proven to be pretty flexible. The box used around “recent articles” at the top of this page has a few additional DIVs to get the top and bottom bars - but it’s not difficult to make those kinds of changes.
Note: It’s all about the doctype
This is critical. This scrolling box relies upon positioning (position:relative) a DIV inside another DIV with hidden overflow (overflow:hidden). IE, with a strict docytpe does not allow for this.. It’s a bug in IE 6, and it’s a bummer. The solution I used is to force IE into quirks mode by putting a comment before the very first line of HTML on this page (go ahead… view the source). It’s not something I like, but it seems like working around IE’s shortcomings is half a web developer’s job… Using a transitional doctype sort of works. If you use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> It’ll work, but if you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> it won’t. Gotta love IE.
You should also catch the mouse scroll event.
Interesting technique. Looks nice as well. Only drawbacks I can see are a) people not recognizing the scrollability (that’s the advantage of using a normal scrollbar, even though a bit ugly) b) using a not-strict doctype. my experience is that that brings along other quirky behavior in IE6, so I always prefer a strict one.
But maybe there are possibilities to use your technique with a strict doctype. As I already give IE6 it’s own stylesheet with conditional comments, I’m sure there is a solution.
By the way, I realy agree with you about the hard to find content on many blogs. So many times valuable content is hidden in categories, tag clouds, fancy ajaxified “live” archives etc etc etc. Something very irritating. I have emailed owners of many weblogs about this. Just give me a simple list of all articles! Let me reach that list, called “archives” with one click in the top/main navigation. And only as an addition to that, add all the fancy stuff you want.
As it is now, to find what I want when I’m on a site, I have to 1) leave the site 2) go to google 3) type in some words to search within the domain….
Matthijs - both excellent points. If a user doesn’t know its a scrollbar, it doesn’t do a lot of good. My original plan was to create a normal looking scrollbar, just thin (10px wide) so it would fit better. That might be a better solution. Ultimately I decided with my particular use, it didn’t matter if a user actually noticed that the content scrolled… if they did, it was additional, functionality, but it didn’t remove any content I had before.
And the quirks mode comment is right-on. Drives me nuts. As far as I can tell though it’s the only solution because in strict, IE simply won’t let a positioned (absolute or relative) item get hidden inside an item that has hidden overflow. It just blows out. An IE bug for certain - I just couldn’t find another way around it… (maybe someone can though!)
Wow - the trick with the comment above the DOCTYPE was not one I was aware of. That’s pretty cool - at least I can have FF render in strict mode and have IE do quirks. That bug you’re referring to regarding relative positioning etc.. is mentioned on quirksmode here: http://www.quirksmode.org/bugreports/archives/2005/09/positionrelative_breaks_out_of_overflow_constraint.html
I so would love to be able to come up with a div-level way to fix this rather than force my whole DOCTYPE. But maybe there’s just no other way…
Lindsey,
Totally agree. I hate changing my doctype - but I couldn’t find another way to do this. Would love to see some other attempts though.
Thanks So much for this wonderful scroller. One of these days Ill get around to learning more about how to program javascript.
dear friend,
thanks so much for this little scroller. I love it ! I used it for a website and thought I did everything right. It works perfectly in IE and Firefox at PC however it screws it up pretty bad on the mac: in the following page the text in the scrollbox blows everything out of proportion when using safari:
http://www.saar.de/~astrid/wandel/kalender.htm
However when there is little text, everything is fine:
http://www.saar.de/~astrid/wandel/projekte.htm
In mac IE a pop-up appears : “handler could not be removed”
weird uh?
greetings from Essen, Germany
lotte
Too bad most people don’t use desktops with configurable themes. I do and I’ll take my OS scrollbars over your HTML variety any day. They don’t suffer from browser inconsistencies, javascript bugs, they look better and I know right off the bat that they are scrollbars. I can scroll with my mouse and use pgdn/pgup etc…
I find it amusing that your goal is to provide an accessible way to find your articles, but then you sacrifice that accessibility on the alter of design.
Anyway, if you are serious about this… Here are some quick things to look into. Give a visual cue that the grey block is a scroll handle (Mine get brighter onmouseover). I can’t tell if the handle resizes depending on the amount of content, but thats pretty important too. Provide a larger minimum size for the scroll handle.
Kudos on catching a click to the scroll “gutter”.
Here’s an interesting implementation too. http://13thparallel.org/archive/dhtml-scrollbars/
Unfortunately, it needs work as well.
$#@*!Designers!,
Oh, I’ve had so many emails that sound just like this!
My feeling is this: I can’t control my very own site’s scrollbars with CSS. That’s a browser shortfall, not mine. So I decide to take the first step in coming up with my own solution.
You make valid points - I was aware of them when I built the scroller, but they’re not enough to keep me from using it.
I purposefully didn’t include some of the standard scrollbar visual cues because I didn’t want any additional effects cluttering my page. They could be added with a few lines of CSS. Similarly, I’m not concerned whether a given user recognizes my scrollbar as a scrollbar. It provides access to content that would otherwise not exist. So it’s bonus material. If I don’t put the scrollbar in at all, the content just goes missing - so this is an improvement.
Configurable desktop themes are not a solution. If everyone configures their view differently, then I have lost control and can never predict what I’m publishing will look like. I’m not interested in working in that environment.
Finally, note I never suggested this was an accessible solution. It’s not. I want to provide access to past articles. That’s entirely different than true accessibility (in the screen reader/pda etc sense).
I appreciate all the emails (and comments) on this one (most very positive) - I just wanted to provide my thoughts on the negatives.
Thanks for the tip on position:relative. I’ve been trying to figure that out for the last hour. It works great in Firefox, but IE was being picky for no good reason. Dang doctype!
I am trying to implement the scrollable table with fixed column headings …but my problem is that I have to use the .css style sheet in .xsl file …because this web-project is all done ..all I have to do is have fixed headings with scrollable table …I have implemented as follow…..but it doesn’t work …I would appreciate if anyone can help me with this issue . thanks
1) created style3.css file:
div.scrollWrapper{
float:left;
overflow:visible !important;
overflow:none;
overflow-y:scroll;
height:150px;
}
2)added the “GP testing” in the old .XSL file seee below .
No fault codes match the selected criteria.
FaultCode
TypeAuto/Man
System
Description
oh the last reply did not copy the whole file..so m just copying the acutal changes that I made..
now where they create the tabel there I call scrollwrapper function–see below
FaultCode
TypeAuto/Man
System
Description
has anyone implemented the mouse wheel scroll event for this?
found another example of custom scrollbars if anyone is interested.
This one has very light code, and is cross browser compatible. Also works with mouse wheel and has up and down increment arrows giving great accessability. all in all i think its awesome and its the first one that ive got to work succesfully in ajax dynamic content with a call back function. go here
http://n-son.com/scripts/jsScrolling/
Hi, love the script!! It just finetunes the look of my site…
Actually i have one problem as mentioned above.. in Safari on MacOs X, the content never reaches the end. So the scrollbar is at the bottom but the content is just in the middle.
In FireFox everything is ok.
What can i do about this?
I too love the script. I too have problems with Safari. Anyone figured these out? I also have a client who wants the scrollbar on the left (despite my appeals to follow web conventions) Has anyone been able to modify the script(s) successfully?
its very much usefull for me
[...] - scrollbars by Patrick Ryan (Agave Group Design) [...]
omygut although im not really good at html or scripts, i really love this idea and the outlook of the scrollbar. reminds me of the ones i use in Flash - minimal space used and still able to carry out its function. I guess the difference is, in flash, a scrollbar like that might stand out more prominently as compared to a normal webpage since everyone is so used to the standard scrollbar look?
Nonetheless, I really love this!
Thanks for making it! (:
Regarding the IE overflow bug, which you worked around by forcing IE into quirks mode:
This bug is documented at http://www.quirksmode.org, as mentioned in comment 5 above.
In the comments at quirksmode, Dusty Reagan proposes a workaround, which is simply to set position:relative on the outer div.
This works for me (in IE6/7), and seems an elegant solution.
Hope this helps somebody!
hey there, please don’t laugh at me, but is this code suitable for myspace use? my page is made of various divs (http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=105460306), and I am somewhat familiar with utilizing them.
thanks so much, this scroller will help get me some really good marks in my web development classes, if you care i am also referencing this website so that there is no confusion on whether i stole the code or made it myself, thanks a bunch