Posted by radj on February 24, 2009 at 3:30pm
45 followers
| Project: | Views |
| Version: | 6.x-3.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
Currently, clicking an item on the pager of a view with Ajax set to ON just kind of appears, just like that. It would be good if ajax effects can be applied (fade or scroll, etc) when using pagers.
Comments
#1
subscribe
#2
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.
#3
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:
#4
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.
#5
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.
#6
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....
#7
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
#8
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
#9
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?
#10
subscribe
#11
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.
#12
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.
#13
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.
#14
subscribing
#15
Moving to needs work since this patch still needs more work on the transitions. It's good work though, please continue with this!
#16
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.
#17
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.
#18
Nice! Going to apply this to views tonight!
#19
Subscribing. This would be an awesome feature.
#20
+++ 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.
#21
Subscribing. Thanks
#22
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?
#23
Not sure but this #586668: Pluggable pagers might be relevant to this topic. (Was looking for something else and ended up skimming both topics).
#24
subscribing - very interested in this new feature!
#25
just to show it working (most of the time :) ) here it is in use on our site: http://elearning.psu.edu/
#26
Any news on your patch/module? Would love to see it in action!
Thanks
#27
How to apply this to Views 2.8? Can anybody do an update?
#28
Subscribing
#29
subscribing
#30
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.)
#31
Guys can somebody please update this patch or help in updating to latest version?
#32
subscribing
#33
I'm also looking for an updated patch... has anyone done anything?
#34
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
#35
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.
#36
subscribe
#37
subscribe
#38
subscribe
#39
subscribe, might be using this. Thank you!
#40
Subscribing
#41
Subscribing
#42
+1
#43
Subscribing
#44
any update?
#45
Subscribe
#46
Subscribe
#47
reroller #17 on 6.x-2.x. Still needs work per #20.
#48
Is there some patches like this for drupal7? I want all that is discussed here for my d7 site... Please help..
#49
subscribe
#50
subscribe - appears lots of people would like this.
#51
bensbury ... no need to "subscribe" anymore. Please note the shiney new "Follow" button at the top of this issue
#52
This would be a really great feature...anybody got anywhere with this in Drupal 7??
#53
@Joecanti - I've set up an issue to track this very thing at: #1392148: Ajax Pager jQuery Transition Effects
#54
Where i can find d7 version?
#55
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:
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.
#56
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
#57
Thanks for creating your module. Very much appreciated.
#58
I've been getting notifications from this issue and I forgot I was the author and haven't made replies! How rude!
I'm on D7 now and it looks like #56's views_ajax_fade.module does the trick! Thanks!