Grow your CSS skills. Land your dream job.

Custom Scrollbar Help

  • # May 13, 2009 at 2:04 am

    Hey guys, I ran into a pretty big snag trying to implement custom scrollbars on a friend’s site. I tried a jquery script first, but something in my css was breaking it, and this scriptaculous script actually looked like more what I needed anyway. When I tried to get the scripts to work, I got absolutely nothing for some reason, so I decided to try and just copy a site that had it working exactly and then just figure out where I went wrong. Now I can’t even get the site I’m trying to copy to work.

    Original:
    http://www.elizabethweinberg.com/fashion/

    My attempted copy:
    http://www.chadmcclure.com/scroll.html

    At first I was just trying to whittle the page down to what I needed, but that didn’t work, so I just tried to copy the css exactly and it STILL doesn’t work! I’m not trying to copy what the designer did on their page at all, I’m just trying to figure out what the heck I’m doing wrong when I’m trying to call the effect. Any ideas?

    # May 13, 2009 at 6:56 am

    I would start by validating your html markup, with 40+ errors on the page you have very little chance of troubleshooting the css.

    # May 13, 2009 at 11:32 am

    Yeah I was just trying to troubleshoot so fast I guess I made a lot of really dumb mistakes. It validates now, although there are a few warnings in the CSS I don’t think those should be causing the trouble. Any ideas?

    # May 13, 2009 at 12:09 pm

    Think I’ve sussed it. :D
    In your document head you have:

    Code:

    As far as I can tell it should be:

    Code:
    # May 14, 2009 at 1:47 am

    how about not copying my website in the first place? then you might not run into the problem.

    cheers,
    elizabeth

    # May 14, 2009 at 3:11 am
    "elizabeth" wrote:
    how about not copying my website in the first place? then you might not run into the problem.

    cheers,
    elizabeth

    bahahaha, awesome

    # May 14, 2009 at 3:47 am

    Hahaha. Thank you google alerts.

    Good times on the net.

    # May 14, 2009 at 4:42 am

    Seems a bit harsh to me.

    As far as I can tell, the poor guy is just trying to learn. He was totally up front about what he was doing and why, he didn’t try and pass it off as his own idea or design. In fact he was doing pretty much what Chris recommended in this article http://css-tricks.com/excercise-to-get-better-at-web-design/

    And, let’s face it. It’s not like the site is much to write home about in the first place.

    # May 14, 2009 at 11:11 am

    Apostrophe, I agree with you, but you can’t help laugh when someone gets called out like that. I thought it was hilarious.

    # May 17, 2009 at 3:18 pm

    btw, I just had a client want me to do this. It’s pretty simple JQuery plugin:

    http://www.kelvinluck.com/assets/jquery … lPane.html

    Notes:
    Some of the links are broken, so you’ll have to save the file out of his example page.
    I also used the latest version of JQuery (and the mouse wheel plugin), and it worked great.

    # May 22, 2009 at 6:11 pm

    Thanks apostrophe, I really wasn’t up to anything nefarious. After not being able to get jScrollPane to work, one of my searches led me to a forum where someone cited her site as a good example of a custom scrollbar, so that’s how I stumbled upon that in the first place. I was legitimately just trying to learn, and after trying a few different methods I didn’t even use her site’s method anyway.

    AshtonSanders: I originally tried to use jScrollHorizontalPane, which is just a modified version of jScrollPane for horizontal scrolling. I ended up finding an example of someone using just a scriptaculous slider for a scrollbar, which fit my needs well enough so that’s what I used. I think I’m going to try and get jScrollHorizontalPane to work again because I really want to be able to use the mouse wheel plugin, and after I get all these kinks ironed out I plan on replacing the current one with an image based one.

    However, before I try that again, for some reason my slider/scrollbar isn’t visible in Safari. It works on Internet Explorer and Firefox, but never in Safari. Although sometimes, seemingly randomly, it won’t appear on the first load in Firefox. If I refresh the page, it immediately appears and on subsequent refreshes stays. Any ideas as to what would cause that?

    Just to make sure I didn’t get the embarrassing "47 errors" again haha, this time the HTML and CSS both validate. Thank you for the help so far!

    # May 23, 2009 at 12:44 am
    "enigmajr" wrote:
    Thanks apostrophe, I really wasn’t up to anything nefarious.

    I think we’re all on your side here. I’m sure we’ve all reverse engineered another website before. I don’t think I’ve ever seen someone get caught though! So funny :lol:

    "enigmajr" wrote:
    AshtonSanders: I originally tried to use jScrollHorizontalPane, which is just a modified version of jScrollPane for horizontal scrolling.

    Ah, I get it. Horizontal scrolling… good call …

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".