Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Styling up internal scroll bars

    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,
    Last edited by Doctor_Varney; 11-21-2008 at 10:48 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Once again, thank you, Abdura! Shame, I see there are limitations...

    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    they only work in ie and opera. firefox and its clones use images to make their scrollbars.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    But we don't have to worry about that, since they used the progressive enhancement method.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by abduraooft View Post
    But we don't have to worry about that, since they used the progressive enhancement method.
    What's that?

    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    http://en.wikipedia.org/wiki/Progressive_enhancement
    (Just turn of your javascript. You'd get the basic scroll bar feature there)
    Last edited by abduraooft; 11-22-2008 at 08:39 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by abduraooft View Post
    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.

    Quote Originally Posted by FWDrew View Post
    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,
    Last edited by Doctor_Varney; 11-22-2008 at 09:19 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #10
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Sounds cool. Do me a favor and update this thread if/when you implement it. I want to see how it looks

    Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #11
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I'll give it a go.

    Best wishes,
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •