...

View Full Version : Styling up internal scroll bars



Doctor_Varney
11-21-2008, 11:43 AM
I'd like to know the best method for styling scrollbars, in CSS, if possible.

In the early days, before Firefox and when I was using IE & Opera to design with, I experimented with Javascript (a friend emailed me some code to use). This was successful, though I've since developed a hunch that CSS could be used. If not, I'm willing to try a script...

Now, the BIG issue is whether it's going to work with browsers, other than IE. I've read that Firefox won't support the colouring of bars.

Intended use:
To change the width and colouring of scrollbars on box divs within the page.

Reason:
To make the scrollbars more integral to the design, rather than have the browser's basic functionality intrude upon my aesthetic.

Design principle and boundaries:
What's part of the browser, belongs to the user (main outer scrollbars) but what's inside the page, belongs to ME.

If there is any way to gaurantee cross browser support, I'd be very happy to recieve any advice I can get on this.

Many thanks,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

abduraooft
11-21-2008, 11:48 AM
Check out http://www.dhteumeuleu.com/runscript.php?scr=scrollbarStyle.html

Doctor_Varney
11-21-2008, 12:14 PM
Once again, thank you, Abdura! Shame, I see there are limitations...

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

oldcrazylegs
11-22-2008, 08:11 AM
they only work in ie and opera. firefox and its clones use images to make their scrollbars.

abduraooft
11-22-2008, 08:18 AM
But we don't have to worry about that, since they used the progressive enhancement method.

Doctor_Varney
11-22-2008, 09:33 AM
But we don't have to worry about that, since they used the progressive enhancement method.

What's that?

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

abduraooft
11-22-2008, 09:36 AM
http://en.wikipedia.org/wiki/Progressive_enhancement
(Just turn of your javascript. You'd get the basic scroll bar feature there)

FWDrew
11-22-2008, 09:37 AM
Hi Doc V,

If I might add my opinion, I think in most cases the scroll bars are better left unstyled. My only reasoning behind this is that scroll bars generally blend with the style of the browser/OS and so comforts the user. However, I could see a few cases where styling them could be a unique idea. I would love to see how this turns out as I dont think I have seen much of this :) Not criticizing, just my thoughts.

Best Wishes,

Drew

Doctor_Varney
11-22-2008, 10:08 AM
http://en.wikipedia.org/wiki/Progressive_enhancement
(Just turn of your javascript. You'd get the basic scroll bar feature there)

Now that's gotta be worth reading. Thanks. Completely new to me, this is.


Hi Doc V,

If I might add my opinion, I think in most cases the scroll bars are better left unstyled. My only reasoning behind this is that scroll bars generally blend with the style of the browser/OS and so comforts the user. However, I could see a few cases where styling them could be a unique idea. I would love to see how this turns out as I dont think I have seen much of this :) Not criticizing, just my thoughts.

None taken and the thought is appreciated. Mainly because, mostly, I'd absolutely agree with you, Drew. Here though, the idea really is similar to how a lot of those 'Flash-all' sites are designed, whereby you see a smaller design area, with boxes of scrolling text. I'm not sure if these are going out of fashion now. I'm seeing a lot of 'newspaper' style columns everywhere, these days. As an artist, I tend to want to lead the user's vision, in the same way as I might, with details in a painting. For some projects, presentation might be as important as the content, as they work together, to create the experience.

But overall, if the cross-browser compatibility just isn't there, I can't see a future for this sort of thing. I may have to re-think the way I'm designing things. Perhaps a set of bookmarks, which manifest as a "next" button; inside a non-scrolling DIV or something like that...? Maybe I could even make an image of a fake scroll bar, with clickable up/down arrows as links?

The challenge is to throw the user out of their normal browsing experience, to immerse them in mine, whilst making the controls instantly intuitive. I could use Flash, but I'm wary of it.

I need to go and read that Wiki article, I think...

Many thanks,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

FWDrew
11-22-2008, 10:10 AM
Sounds cool. Do me a favor and update this thread if/when you implement it. I want to see how it looks :)

Regards,

Drew

Doctor_Varney
11-22-2008, 10:23 AM
I'll give it a go.

Best wishes,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum