Add a custon scrollbar to my site

  • Segev

    #4106

    Hey everyone,

    I was wondering if can someone help me to add some good looking scrollbar to my site.

    I’m asking for your help because i tried to do it myself and it really messed up my site (I’m not a good coder…)

    Here’s a download of the scrollbar: http://puu.sh/nHEg

    Here’s a link to my site: http://fast-sub.info/

    Thanks for your help!

    Mod

    Kenneth John Odle

    #27227

    You shouldn’t include a link to a .rar file, because it might scare people off. The code could contain a virus, or it could be designed just for your site, etc.

    Besides, we can’t install code on your site for you. What you should do instead is provide a link to the site where you got the code, or better yet, tell us what the instructions were for installing that code. We can then walk you through the process.

    I love your site, BTW.

    Segev

    #27228

    Thanks <3

    The .rar file is completely safe… and i cant provide a link to the site that i’ve got the code from cause that scrollbar costs some money.

    Here’s a demo of the scrollbar: http://www.liime.net/projects/liimeBar/demo.html

    I can copy & paste the instructions here, Any help will be appreciated!

    (code)Installation

    If you have no jQuery already on your page then simply move the liimeBar.css, jquery.liimeBar.min.js and the jquery.mousewheel.min.js files to your website root then copy and paste this code in between the <head></head> tags.

    <link rel=”stylesheet” media=”screen” type=”text/css” href=”liimeBar.css” />

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

    <script type=”text/javascript” src=”jquery.mousewheel.min.js”></script>

    <script type=”text/javascript” src=”jquery.liimeBar.min.js”></script>

    <script type=”text/javascript”>

    $(function() {

    $(‘body’).liimeBar({

    hideBar: false,

    hideButton: false,

    scrollSpeed: 20,

    barColour: ‘#888888’,

    barOpacity: 0.3,

    buttonColour: ‘#000000’,

    buttonOpacity: 0.3,

    loopCheck: true

    });

    });

    </script>

    Or if you do then simply insert the following inside your ready function and insert the scripts in your page head.

    $(‘body’).liimeBar({

    hideBar: false,

    hideButton: false,

    scrollSpeed: 20,

    barColour: ‘#888888’,

    barOpacity: 0.3,

    buttonColour: ‘#000000’,

    buttonOpacity: 0.3,

    loopCheck: true

    });

    Configuration

    Please take a quick look at the demo to get a feel of what the different parameters work then if you like read the descriptions below.

    hideBar: If set to true then the scroll bar will be invisible

    hideButton: If set to true the scroll button will fade out when is it not active

    scrollSpeed (1-50): This is the speed the page will scroll when using the mouse wheel, 1 being the slowest.

    barColour: The colour of the scroll bar in hex colour code. Remember the quotes and the ‘#’!

    barOpacity (0-1): The opacity of the scroll bar, 0 being transparent.

    buttonColour: The colour of the scroll button.

    buttonOpacity (0-1): The opacity of the scroll button.

    loopCheck: If your page is going to change height after loading (such as expanding boxes, ajax content etc.) then setting this to true will enable the scroll bar to check the height of the page ever 500ms and update to the current height.(code)

    Tee

    #27229

    @segev I tried the following instructions and downloaded the JS files, it seems the J QUERY doesn’t work right with WordPress.

    I’ve tried inserting the code in header.php in between the <head></head>, I tried using hooks on header and top bar area to no avail.

    I got it to work on a regular HTML site, but with Graphene, the content kept disappearing and you couldn’t navigate anywhere unless you didn’t need the scroll bar. I’m no JS expert sorry bud can’t help you there.

    Mod

    Kenneth John Odle

    #27230

    it seems the J QUERY doesn’t work right with WordPress

    jQuery comes bundled with WordPress, so just insert this bit:

    $('body').liimeBar({
    hideBar: false,
    hideButton: false,
    scrollSpeed: 20,
    barColour: '#888888',
    barOpacity: 0.3,
    buttonColour: '#000000',
    buttonOpacity: 0.3,
    loopCheck: true
    });

    That needs to go in the <head> portion of your blog, and the only way to do that is to create a child theme, and then use an action hook in the functions file to attach it to wp_head()

    Segev

    #27231

    Thanks for your quick replies guys, but damn, that seems though…

    I’m not an expert of this stuff… :/

    I’ll do my best, thanks!

    Mod

    Kenneth John Odle

    #27232

    Try this for your functions.php file:

    <?php

    add_action ('wp_head', 'segev_scrollbar' );
    function segev_scrollbar() {
    echo "
    $('body').liimeBar({
    hideBar: false,
    hideButton: false,
    scrollSpeed: 20,
    barColour: '#888888',
    barOpacity: 0.3,
    buttonColour: '#000000',
    buttonOpacity: 0.3,
    loopCheck: true
    });
    ";
    }

    ?>

    Segev

    #27233

    It doesnt seems to work.

    Well, thanks anyways, I think i’ma drop it…

    🙂

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!