Add a custon scrollbar to my site
-
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
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.
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)InstallationIf 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)@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.
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 towp_head()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
});
";
}
?>
Viewing 8 posts - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.
