Download & Extend

Allow multiple views on the same page to user the scrollable style

Project:Scrollable Views
Version:6.x-1.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:needs review

Issue Summary

if you try tu use the scrollable style with more than one view in the same page none of them work. To make this possible only the following change to scrollable.module is needed:

change this:

$js = '$(document).ready(function() {
// initialize scrollable
$("div.scrollable").scrollable({

to this:

$js = '$(document).ready(function() {
// initialize scrollable
$(".view-id-'.$view->name.' div.scrollable").scrollable({

I dont know how to make a patch but i think this can be helpfull.

Comments

#1

Status:patch (to be ported)» needs work

#2

This works. But note that if the same exact view appears twice on a page (perhaps with a different argument), it still won't work because the view names will be the same, and it depends upon the view-id css tag (which can often be themed out). This is more of an outside case and it's a bit of a pain to fix.

Technically, it should be easy. The view has a tag called "view-dom-id-xxx" which is a unique "instance id" specifically designed for js use and less likely to be themed out. But, I don't think there is any way to access this value from the $view object in 6.x-2.6. I entered an issue on views (#593780: Why isn't dom_id set so it is always available in $view->dom_id?) to see if there is some way to get at it.

At the moment, the above code is better than the existing code. Works on our site just fine. Thanks!

#3

Nothing is ever simple. I discovered after some trial and error that having multiple versions on a page just isn't feasible if you really try to explore all the option variations. Trying to fix it is a bit pointless, as the problem really is that scrollable comes with an older version of jQuery Tools Scrollable code. The newer version at http://flowplayer.org/tools/download.html solves lots of problems and is much newer. It also relies on a newer version of jQuery, so the jQuery Update module is required (you probably need the 6.x-2.x-dev version!).

So, I rolled up a patch which you can apply to the June 9, 2009 1.x-dev release which...

  • Upgrades the scrollable code to version 1.1.1 from http://flowplayer.org/tools/download.html, using a minified version including mousewheel, autoscroll, navigation and circular loop sub-components.
  • Adds a dependency on jquery_update to the info file.
  • Modifies the document-ready functions to use the new library calling sequences.
  • Incorporates the patch above to create initialization functions which can work with multiple views on a page.
  • Adds a "circular" checkbox to the view options so that the (claimed experimental but working for me) circular looping can be enabled.

The css files are the same so any theming should remain unchanged.

I debated about whether to create a dependency on the jQuery Tools module. But, the js files on that project are significantly out of date and don't include the plugins necessary to do autoscroll and other features the way this original module did. The idea of an API is nice, but coordinating versions and features and plugins really needs more thought than the API project has given at this point.

I don't think this breaks anything else, and should work pretty much like the old version did, but with fewer problems and more features.

No guarantees, as I've only tested this myself, but feedback appreciated.

AttachmentSize
scrollable-1.x-dev-20090609-issue-511938.patch 23.34 KB

#4

Status:needs work» needs review

#5

We discovered another problem: It wasn't possible to combine horizontal and vertical scrollers on the same page. This was because the two different scrollers load two incompatible css files. The attached patch is a complete patch to the dev module which adds a fix to this to the above patch, plus the IE 7/8 bug fix jcmarco contributed at #484416: Problem in IE 7.

This patch should be applied to the june dev version on the home page. Apply only the most recent of these two patches, not both. It is working perfectly for us so far, but...

WARNING: This patch contains significant changes to the module, adding new features and a significantly updated jQuery Scrollable implementation. I've tried to make it backward compatible, but any theming that has been done may need slight changes to take advantage of multiple scrollers on a page. Note also that it also requires jQuery Update to get the most recent version of jQuery. I am not the module maintainer, and so far this code has not been reviewed!

AttachmentSize
scrollable-1.x-dev-20090609-issue-511938-2.patch 29.64 KB

#6

Can you give me jquery.scrollable-1.1.1-min.js ? http://flowplayer.org/tools/download.html here i have found only 1.1.2 version...

#7

Here is the copy we are using. Hmmm, probably should upgrade to the most recent, which must have been released since I wrote that original. But, still this has been working great for us for quite a while.

AttachmentSize
jquery.scrollable-1.1.1-min.js_.gz 3.51 KB

#8

It doesn't work for me after applying your last patch (#5 comment). 2 views with scrollable doesn't still work..

#9

Can you give me a bit more info about the way your two views are set up? And, when you say "doesn't work", can you describe a bit more please? While it has been working perfectly for us, there are many combinations of settings and it's possible there is an issue you are having that we aren't.

#10

look at my work:
1) 2 views with 1 scrolling: http://img638.imageshack.us/img638/4986/20404906.png
2) 2 views with 2 scrolling: http://img64.imageshack.us/img64/1149/74025149.png
3) Ssettings for the first view: http://img692.imageshack.us/img692/606/verticaltop.png
4) Settings for the second view: http://img714.imageshack.us/img714/5793/horizontalright.png

I've applied this patch (scrollable-1.x-dev-20090609-issue-511938-2.patch) on scrollable module version = "6.x-1.x-dev". And also I've copied jquery.scrollable-1.1.1-min in "scrollabe/js" path. But it doesn't still work for me.

PS:
1) I have jQuery Update 6.x-1.1 and jQuery UI 6.x-1.3.
2) In misc directory I have jquery.js file: jQuery 1.2.6 - New Wave Javascript
3) in misc directory I have also jQuery Form Plugin version: 2.01

I try to attach also my patched scrollable module.. may be there is a mistake somewhere..

#11

this is my version of patched scrollable...

AttachmentSize
scrollable_patched.zip 27.82 KB