module is missing essential components

Hi
I find it difficult to understand what to include and where to get Jscrollpane to work. Could anybody write down a short step by step guide?
Thanks
Simone

I secound cimo..

I'm trying to retraint my frontpage blogroll from going to far down the page with a scrollpane.. how would you go around that?

yep, i spent a couple of days moving jscripts here and there but with no joy.. I am eventually missing some basic concepts.. ihope that somebody who used jscroll on a Drupal install can write a line or two here..
thanks

I wonder i you could hardcode it into a now block with PHP

Here's how I got it to work.

1. The project is maintained on Google code:

http://code.google.com/p/jscrollpane/

I went there and downloaded the demo-1.2.3.zip and jScrollPane-1.2.3.js.

After unzipping the demo files and seeing that they worked, I grabbed files from the demos and did the following to get them into drupal:

2. Here is my file layout:

sites/all/modules/jscrollpane]# ls
images/ 
jscrollpane.info 
jscrollpane.module
scripts/ 
  jquery.mousewheel.js
  jScrollPane-1.2.3.js
  jscrollpane.init.js 
  jscrollpane.js 
styles/
  demoStyles.css
  jScrollPane.css

3. I replaced the entire *.module file with this function. It uses hook_init to load the files in the layout above (the original module didn't actually load any files):

function jscrollpane_init() {
  static $loaded = FALSE;
  if (!$loaded) {
    $path = drupal_get_path('module', 'jscrollpane');
    drupal_add_js($path . '/scripts/jquery.mousewheel.js');
    drupal_add_js($path . '/scripts/jScrollPane-1.2.3.js');
    drupal_add_js($path . '/scripts/jscrollpane.init.js');
    drupal_add_css($path . '/styles/demoStyles.css');
    drupal_add_css($path . '/styles/jScrollPane.css');
    $loaded = TRUE;
  }
}

4. I also created jscrollpane.init.js. It associated the scrollPane functionality with document IDs:

$(function()
{ 
 // this initialises the scollpanes on the page.
 $('#my-div').jScrollPane({scrollbarWidth:20, scrollbarMargin:10});
});

5. Lastly, I went into my *.tpl.php and gave the DIV I wanted to have a scrollbar the right ID and class:

<div id="my-div" class="scroll-pane">

6. After clearing all the caches, it worked!

Things to watch out for: FireBug is wonderful. Make sure the ID and class are spelled correctly ("scroll-pane" not "scroll-panel"). Check the header to see what actually loaded. Make sure the module is enabled. And so on.

In a perfect world, I'd change the stylesheet from "demo"... And clean up the code some.

I also had no issues with the version of JQuery -- that I know of. I'm running D6.11.

Hope this helps!

NOTE I was trying to get a page with tabs in content using ui.tabs.js, but this module and that don't seem to be compatible. Maybe somebody can figure that out.

Thank you shunting
your guide was essential!
Simone

Hi Guys,

Attaching .zip of jscollpane module with the changes mentioned by shunting. Install the module and enjoy.
Thanks shunting for the guide.

Cheers,
Anil Sagar

The shunting files (#6) zipped by anil614sagar (#8) worked perfectly. Thanks.

Note that in in demoStyles.css there's the following style:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

This may cause head scratching when your site's font size shrinks across the board. Might be wise to pull that body selector right out before somebody gets hurt.

Also - It's pretty straightforward to include jquery-em:
http://davecardwell.co.uk/javascript/jquery/plugins/jquery-em/

This will scale the scrollbox if the user changes the font-size.

Create jquery-em.js and add it with drupal_ad_js in scrollpane.module

function jscrollpane_init() {
  static $loaded = FALSE;
  if (!$loaded) {
    $path = drupal_get_path('module', 'jscrollpane');
    drupal_add_js($path . '/scripts/jquery.mousewheel.js');
    drupal_add_js($path . '/scripts/jquery-em.js');    
    drupal_add_js($path . '/scripts/jScrollPane-1.2.3.js');
    drupal_add_js($path . '/scripts/jscrollpane.init.js');
    drupal_add_css($path . '/styles/demoStyles.css');
    drupal_add_css($path . '/styles/jScrollPane.css');
    $loaded = TRUE;
  }
}

Thanks for the jquery-em.js tip, sorry about the 80%, and I'm glad I contributed something!

Cooperation in this thread made me shed a single tear.

Something to watch out for.
In a multisite environment, the DIV you ll set in the script will affect all sites if the module is enabled, although no class is set in the page.tlp.php. (I ended up with a module page without scroll)
At this point we only miss to set a variable for the DIV, which can be set in an admin page.

Hi,

I used shunting's revised jscrollpane module and have it working but with one small issue: I'm using custom 11x35 pixel arrow images but the full height of the images isn't displaying, even though the space on the scrollbar is reserved for them and they function properly. I'm using the arrowSize:35 parameter in the init function and have commented out the repositioning for hover & active events.

Any advice? Here's my jscrollpane-init.js call (trying to use the arrowSize parameter):

$('#content-outside').jScrollPane({scrollbarWidth:11, scrollbarMargin:10, showArrows:true, arrowSize:35});

and here's my jScrollPane.css (commented/revised some of the color options):

.jScrollPaneContainer {
        position: relative;
        overflow: hidden;
        z-index: 1;
}

.jScrollPaneTrack {
        position: absolute;
        cursor: pointer;
        right: 0;
        top: 0;
        height: 100%;
/*
        background: #aaa;
*/
}
.jScrollPaneDrag {
        position: absolute;
        background: #29295a;
        cursor: pointer;
        overflow: hidden;
}
.jScrollPaneDragTop {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
}
.jScrollPaneDragBottom {
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
}
a.jScrollArrowUp {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        text-indent: -2000px;
        overflow: hidden;
        /*background-color: #666;*/
/*
        height: 9px;
*/
}
a.jScrollArrowUp:hover {
        /*background-color: #f60;*/
}

a.jScrollArrowDown {
        display: block;
        position: absolute;
        z-index: 1;
        bottom: 0;
        right: 0;
        text-indent: -2000px;
        overflow: hidden;
        /*background-color: #666;*/
/*
        height: 9px;
*/
}
a.jScrollArrowDown:hover {
        /*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
        /*background-color: #f00;*/
}

and this is my demoStyles.css (commented the active/hover repositioning actions):

/* Stylesheet for my demo pages for jScrollPane - these styles aren't necessary for using jScrollPane and aren't specific to any p
articular example */

body {
/*
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
*/
}

a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
/*
	background-position: 0 -15px;
*/
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
/*
	background-position: 0 -15px;
*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*
	background-position: 0 -30px;
*/
}


.orange-bar .jScrollPaneTrack {
	background: #f60;
}
.orange-bar .jScrollPaneDrag {
	background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane {
	background: #69f;
}
			
.holder {
	float: left;
	margin: 10px;
}

.scroll-pane {
/*	width: 200px;
	height: 200px;
	overflow: auto;
	background: #ccc;
*/
	float: left;
}

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}

#pane1 {
}
#pane2 {
	height: 150px;
}
#pane3 {
	height: 190px;
}
#pane4 {
	height: 190px;
}

Thanks for any help.

Sorry to bother you - I must've done something else the first time I tried to use the height property in the a.jScrollArrowUp and a.jScrollArrowDown CSS blocks. When I restored the original files and remodified, that solved my problem.

Thanks to everyone who contributed above.

Hi thanks a lot for your how to!
It helped me a lot

I also tried to use it with tabs (quicktabs module), but with no luck..
I only end with a blanck (not displayed) tab content...

Could you finaly make it working ?

Anyway, thanks again for your post.
Best
-P-

Hi,
I'm having a problem with jscrollpane:

some of the pages in IE8 show up 'white' seemingly without css when I enable the module.
the firebug shows this error:

Error: The stylesheet http://eastshore.artesania.ca/artists/jScrollPane.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://eastshore.artesania.ca/artists/betty
Line: 0

I am new to this module, and I'm not quite sure how to handle it. any ideas?

I'm very aware this module is not maintained, but i'm hopeing someone can help me out...

I need a way to disable jScrollPane on specific pages. I have a whole subsection on my site which i don't want to use the function, while i ordinarily have it set to the Content div. The subsection is an embedded phpBB forum, and we simply don't want the scroll pane there. We are also using Zen Theme so there are a lot of ways to identify the page via CSS, for example.

Any good ideas on how i can disable jScrollPane on specific nodes or whole sections?

@Cousken - I'd recommend using the js injector module - it allows you to include javascript in the head of your document, with the same inclusion/ exclusion tools that for eg. a block would use. So you could invoke the jsScrollPane only on the pages of your choice.

@Cousken - I'd recommend using the js injector module - it allows you to include javascript in the head of your document, with the same inclusion/ exclusion tools that for eg. a block would use. So you could invoke the jsScrollPane only on the pages of your choice.

Thanks, gumrol, i'll take a look at that.

I've noticed I cannot use this module (well, the one put together by #8 anil614sagar) with panels, has anyone else noticed this? I find that it works just fine everywhere but within a panel. is there a way to get this working within a panel? or am I doing something wrong?

Shunting, mate, you are a bloomin' star! Thanks.

Agreed.
Great work.
Thanks for the effort!