Apply ajax pager effects

subscribe

I'd appreciate it too if there was an option to use jQuery effects for pager transitions.

It looks like this was attempted in a broader context in #343542: Enable optional auto-refreshing views using AJAX and the code changes are more significant than we expect.

For a quick / hard-coded / very hacker-ish solution, here's a patch. It makes a fadeOut call when replacing the view with the new view on a pager click. I don't know what other parts of views this could affect, so use this with caution.

For a systematic and configurable approach, this can be a starting point. These seem to be the high-level steps to make this happen:

• Insert the effect option (dropdown select?) in the "User pager" form in the Views config page and store it somehow.
• On the AJAX call at line 80 of js/ajax_view.js, fetch the saved effect option and pass it into the callbacks.
• In Drupal.Views.Ajax.ajaxViewResponse, use a switch statement to invoke the correct jQuery effect (if one was selected).

Setting this to need work since that's the state we're in. I'm not against this, but I probably won't work on it myself. If you want to see this, please continue with the patch.

I agree with the steps outlined, so we do have a good direction to pursue to make this work. However, AJAX isn't just about use pager, it can be done for a couple of other things too, so the setting should probably be under 'Use AJAX' and provide that for all ajax transitions.

Thanks for pointing us in the right direction. I realize this isn't a major issue, and I should be able to do something to make it happen.

You're right. "Use AJAX" would be a more appropriate place to put the jQuery transition effects. I'll try to push a patch through in the next couple of days when I scrounge together enough time.

I love this idea. Currently, there are not carousel-like solutions (modules) that have pager-like controls--where you can move to any position, not just previous/next.
I tried the patch. The image fades out, but the view is then lost....

Take a look at the views-rotator module.
Although it has its problems, I think it do what you want.
I also hacked its js to add jquery cycle callbacks onBefore/onAfter, and made it very powerful

shushu,

are you saying views rotator has [ 1 2 3 4 5 6 ] control, where you can click on any item and 'rotate' there?
this is functionality I'm looking for. views carousel module has previous/next buttons for simpler carousel. sounds similar to views rotator.
k

This patch is rolled against Views 6.x-2.5.

It adds the hide/show, slide up/down, and fade in/out jQuery effects into the 'Use AJAX' section. It works against pagers and exposed fields.

Issues:

1. When the view contents hides/slides/fades out, all the elements below it shift up since it's hidden. Would people prefer to have the container's dimensions fixed? This way, regardless of the effect, elements that depend on the container's dimension and placement (ie. elements below the container) don't shift around with the animation.

2. When the effect is applied to exposed fields, the hide animation is cut off by the show animation if the AJAX response is fast enough. This is overcome in the pager transition by setting the ajax call as a callback of the hide animation, so the ajax call is made after the hide animation is finished. When I do this for the exposed field ajax call, it always returns an error. I can't figure it out. Help? Suggestions?

3. Do we want to include other jQuery UI hide/show animations?

subscribe

I haven't gotten around to fixing the shortcomings in #9.

If you don't want to, don't know how to, or can't patch your views, here's Views 2.5 with this jQuery modification:
http://d6.jamesan.ca/views-6.x-2.5-jquery.tar.gz

For a demo, check out http://d6.jamesan.ca/views-demo.

And 'cuz I was playing screencasting for the first time, here's a screencast demo.. ^^"
http://www.youtube.com/watch?v=EmdsPx8nGCE

-----------

2009-07-09
The screencast is now outdated. See #16 for the demo site URL.

For #2, the response may be to use a timer that checks a flag and makes sure that the animation is done prior to processing the response. It's kind of annoying to do this, but it's the only thing I can think of offhand.

ER, the basic flow is: Get the ajax response. Send that off to another function via a timer.

The timer function checks the flag (like a semaphore). If the flag is set, the animation is still running. Reset timer, exit. If the flag is not set, then it goes ahead and processes the response.

subscribing

Moving to needs work since this patch still needs more work on the transitions. It's good work though, please continue with this!

I've tossed some more time this way today. The work is now being done against 6.x-2.6.

I've managed to fix all the problems listed above in #9.

The demo can be found at http://views.jamesan.ca.

I'll roll it into a patch tonight.

Voila. Ze patch.

I inserted a couple CSS changes with respect to tables in the Views to prevent some jerking that occurred in the jQuery animation. It's a jQuery-related bug that I've filed against their development mailing list.

With tables, the default display property is table (i.e. display: table). When jQuery invokes dimension changes (i.e. changing width or height) or dimension-changing animations (e.g. sliding and showing), it asserts display: block, regardless of the element. The correct approach is to set the display property to its default value depending on the element type (table, table-cell, etc.). If there is no default value, then set display: block.

With tables, display: table creates a line break before and after the table. When jQuery asserts display: block, it removes those line breaks instantaneously, creating jerky animation. I tried a number of ways to smooth the animation by try to animate the line breaks away in a transition. Complicated and hacky.

There's some additional layout problems that translate into jerky animation with respect to margins given to tables by the system and the fact that vertical margins collapse into each other.

The patch and the live demo solve all of that jerky stuff by setting display: block amd removing vertical margins to all view tables preemptively.

-----------

I discovered some jerky animation with larger views, so the transitions may not scale well, but that seems to be browser-specific and jQuery-related, depending on how efficient the jQuery animation algorithm is and how well the browser implements JS. Firefox 3.5 is a bit jerky at times, but Chrome animates much more seamlessly.

-----------

Other issues:
- the patch assumes that the ajax call will take longer than the time to transition; when server response is quicker, it creates an unintuitive animation sequence, where the hide transition is halted midway and the show transition begins. Minor and perhaps not worth fixing. A workaround is to just speed up the transitions.
- I'll add transition speed options to the View config page and I'll look into additional jQuery UI effects for more transition options.

Nice! Going to apply this to views tonight!

Subscribing. This would be an awesome feature.

+++ includes/view.inc	10 Jul 2009 20:16:02 -0000
@@ -399,7 +399,7 @@ class view extends views_db_object {
-    if (!empty($this->ajax)) {
+    if (!empty($this->use_ajax)) {

Well, this is not true. if ( $this->use_ajax == 'no') then $form_state['ajax'] may be FALSE

+++ plugins/views_plugin_display.inc	10 Jul 2009 20:16:03 -0000
@@ -857,8 +857,9 @@ class views_plugin_display extends views
-          '#options' => array(1 => t('Yes'), 0 => t('No')),
-          '#default_value' => $this->get_option('use_ajax') ? 1 : 0,
+          '#options' => array('hideshow' => t('Hide/show'), 'slide' => t('Slide up/down'), 'fade' => t('Fade in/out'), 'no' => t('None')),
+          '#description' => t("If AJAX is being used, you can select a jQuery effect to transition between changing content."),
+          '#default_value' => $this->get_option('use_ajax'),

Mmm I'm thinking that maybe 'no' should be 0 and one of 'hideshow', 'slide' or 'fade' should be 1. This allow more compatibility with another modules or plugins that check if ajax is present.

This review is powered by Dreditor.

Subscribing. Thanks

I wanted a "sliding pager" functionality (like Twitter.com user pages), so I coded a custom views_sliding_pager module which does it. (Not released yet.) It replaces the mini_pager with a sliding_pager and overrides the ajax_view.js functions with functions that *append* (rather than replace) the new content and remove the clicked pager. (It's at a working state, only major todo is that the list of views to run it on is hard-coded, whereas it should be set per-view in the UI.)

I'm wondering, have I duplicated work already done in this patch (the demo seems to be different), or is it original, and if so, should I release it as a separate module or as a patch to Views?

Not sure but this #586668: Pluggable pagers might be relevant to this topic. (Was looking for something else and ended up skimming both topics).

subscribing - very interested in this new feature!

just to show it working (most of the time :) ) here it is in use on our site: http://elearning.psu.edu/

Any news on your patch/module? Would love to see it in action!
Thanks

How to apply this to Views 2.8? Can anybody do an update?

Subscribing

subscribing

Following up on my old comment #22: I was recently asked for the code, so I posted it to my tech blog. (It's not in a releasable form yet, but if anyone wants to finish it, that would be great.)

Guys can somebody please update this patch or help in updating to latest version?

subscribing

I'm also looking for an updated patch... has anyone done anything?

Guys, seriously, Views is in version 6.x-2.11 now and those of us using the ajax pager effects are stuck in Views 2.6. Can we PLEASE get this updated? Or possibly made as an addon-module? If not then maybe there's another module which can do this?

Anyway guys you've done a really amazing job, now if you could please help in updating this that would be awesome.

Thanks

Looking for an update patch against views 2.11 as well. I will try to roll my own and post a patch if it works.

subscribe

subscribe

subscribe, might be using this. Thank you!

Subscribing

Subscribing

+1

Subscribing

any update?

Subscribe

Subscribe

reroller #17 on 6.x-2.x. Still needs work per #20.

Is there some patches like this for drupal7? I want all that is discussed here for my d7 site... Please help..

subscribe

subscribe - appears lots of people would like this.

bensbury ... no need to "subscribe" anymore. Please note the shiney new "Follow" button at the top of this issue

This would be a really great feature...anybody got anywhere with this in Drupal 7??

@Joecanti - I've set up an issue to track this very thing at: #1392148: Ajax Pager jQuery Transition Effects

Where i can find d7 version?

I've refactored the patch against 6.x-3.x-dev. Due to a lot of code changes between Views 2 and 3, a lot of this patch has been refactored rather than just simply rerolled.

The concerns voiced in #20 have been addressed:

1. The first concern no longer applies as those lines of code no longer exist.
2. The second concern has been addressed. The current no-ajax and yes-ajax (i.e. instant hide and show) map to FALSE and TRUE just as they do now, so that the additional ajax effects won't affect existing code depending on these boolean values.

The patch currently doesn't implement the ajax effects for either table sorting or exposed filters.

There is no D7 equivalent to this patch yet.

I know this is a pretty old issue and targeted towards D7. But I have written a views plugin module to provide a fade in/out effects to views with ajax pagers, thought I'd share it here if anyone is interested.

Checkout http://drupal.org/project/views_ajax_fade

Thanks for creating your module. Very much appreciated.