Add custom scrollbar in template

Hi, i would like your help for adding custom scrollbar in a template, i already did that with css3 but it only works with chrome.
I think that the only way to do this is with jquery. I have add a custom scrollbar in a site with jquery but i built it without joomla.
http://manos.malihu.gr/tuts/custom-scro ... mples.html
this tutorial is what i used. But it works with div id
Can you please help me ?Where should i put the code and the files? If this is possible to be done in joomla
Thank you !

Firstly which template are you using and which section you want to put this scrollbar.

Let us know, see you around...

Hi thanks for the reply, i am using the storebox template,
i want to replace the browsers scrollbar in every page.
I think that i should put overflow:hidden in body and then somehow add in the body an other costumized scrollbar.

Although not tested following should work. As this is a customization I cannot offer full support, sorry

Step 1. Add required js to your site.
A. Copy "jquery.mCustomScrollbar.js" to "templates/gk_storebox/js/"
B. Open File: templates/gk_storebox/layouts/blocks/head.php
C. Add first line of code to where other js are declared. Add it before "gk.scripts.js". So it will look as below.

Code: Select all

$this->API->addJS($this->API->URLtemplate() . '/js/jquery.mCustomScrollbar.js');
$this->API->addJS($this->API->URLtemplate() . '/js/gk.scripts.js');


Step 2. Add required css to your site.
A. Copy "jquery.mCustomScrollbar.css" to "templates/gk_storebox/css/"
B. Edit same File in Step 1 "head.php".
C. Find css declarations and add first line so it looks similar to below. Second line is from template.

Code: Select all

$this->API->addCSS($this->API->URLtemplate() . '/css/jquery.mCustomScrollbar.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/gk.stuff.css');


Step 3. Add custom js for required div, in your case in document body.
A. Find file "templates/gk_storebox/js/gk.scripts.js"
B. Add following code to right at the end.

Code: Select all

jQuery(document).ready(function(){
   jQuery('body').mCustomScrollbar();
});


Step 4. Following might not be necessary but try it if in case it doesn't work.
A. You can add below code in to overrride.css and enable css override option in template settings > advanced settings > css override "on".

Code: Select all

body   {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: hidden;
}
html {
overflow: hidden;
}


See you around...

It worked perfect, thank you very much !! You guys are great

One last question, i uninstalled the k2 component and the customscrollbar disapeared,
is it possible that the fault is that i uninstalled the k2 component?
Thank you

Possible thoughts are either required js files are not loading, jQuery itself is not loading, or there is a javascript error in your page causing other js to not work. Normally uninstalling component should not cause such errors.

You need to post your website link so i can check. See you around...

Uncaught ReferenceError: jQuery is not defined jquery.mCustomScrollbar.js:934
Uncaught ReferenceError: jQuery is not defined vmsite.js:110
Uncaught ReferenceError: jQuery is not defined facebox.js:337
Uncaught ReferenceError: jQuery is not defined vmprices.js:137
Uncaught TypeError: Cannot read property 'parentNode' of null mootools-core.js:294
Uncaught ReferenceError: jQuery is not defined gk.scripts.js:20
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. oauth:1

These are the errors
http://corona.gr/ my url.
Please check if you have the time.
Thank you very much for your help

As I have suspected jQuery is missing in your setup, probably caused by uninstalling K2.

Please add following same way you have added scrollbar js files in head.php

Code: Select all

$this->API->addJS('//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');


Above is a new v2.0 of jQuery in case if this causes other errors which is not ready for v2.0 then instead use below code.

Code: Select all

$this->API->addJS('//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js');


See you around...

Thank you very much, it works fine now

No problem at all, see you around...

Hello moderator

Can you repeat the process for the gk appsite template ?

hello i want install the same custom scrool bar
can you help me
i'm working on a Appsite Template