Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Comment | File | Size | Author |
---|---|---|---|
#55 | views-ajax_pager_effects-382394-55.patch | 6.23 KB | JamesAn |
#47 | views-382394.patch | 9.45 KB | jonhattan |
#17 | 382394-17.patch | 10.14 KB | JamesAn |
#9 | jamesan_382394-9.patch | 11.74 KB | JamesAn |
#3 | jamesan_382394-3.patch | 792 bytes | JamesAn |
Comments
Comment #1
gunzip CreditAttribution: gunzip commentedsubscribe
Comment #2
JamesAn CreditAttribution: JamesAn commentedI'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.
Comment #3
JamesAn CreditAttribution: JamesAn commentedFor 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:
Comment #4
merlinofchaos CreditAttribution: merlinofchaos commentedSetting 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.
Comment #5
JamesAn CreditAttribution: JamesAn commentedThanks 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.
Comment #6
kyle.vh CreditAttribution: kyle.vh commentedI 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....
Comment #7
shushu CreditAttribution: shushu commentedTake 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
Comment #8
kyle.vh CreditAttribution: kyle.vh commentedshushu,
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
Comment #9
JamesAn CreditAttribution: JamesAn commentedThis 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?
Comment #10
malukalu CreditAttribution: malukalu commentedsubscribe
Comment #11
JamesAn CreditAttribution: JamesAn commentedI 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.
Comment #12
merlinofchaos CreditAttribution: merlinofchaos commentedFor #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.
Comment #13
merlinofchaos CreditAttribution: merlinofchaos commentedER, 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.
Comment #14
dmurphy CreditAttribution: dmurphy commentedsubscribing
Comment #15
merlinofchaos CreditAttribution: merlinofchaos commentedMoving to needs work since this patch still needs more work on the transitions. It's good work though, please continue with this!
Comment #16
JamesAn CreditAttribution: JamesAn commentedI'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.
Comment #17
JamesAn CreditAttribution: JamesAn commentedVoila. 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.
Comment #18
GreenSkunkNice! Going to apply this to views tonight!
Comment #19
adamo CreditAttribution: adamo commentedSubscribing. This would be an awesome feature.
Comment #20
dagmarWell, this is not true. if ( $this->use_ajax == 'no') then $form_state['ajax'] may be FALSE
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.
Comment #21
gausarts CreditAttribution: gausarts commentedSubscribing. Thanks
Comment #22
thebuckst0p CreditAttribution: thebuckst0p commentedI 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?
Comment #23
hefox CreditAttribution: hefox commentedNot sure but this #586668: Pluggable pagers might be relevant to this topic. (Was looking for something else and ended up skimming both topics).
Comment #24
Bilmar CreditAttribution: Bilmar commentedsubscribing - very interested in this new feature!
Comment #25
btopro CreditAttribution: btopro commentedjust to show it working (most of the time :) ) here it is in use on our site: http://elearning.psu.edu/
Comment #26
bluestarstudios CreditAttribution: bluestarstudios commentedAny news on your patch/module? Would love to see it in action!
Thanks
Comment #27
bluestarstudios CreditAttribution: bluestarstudios commentedHow to apply this to Views 2.8? Can anybody do an update?
Comment #28
crea CreditAttribution: crea commentedSubscribing
Comment #29
Alex Andrascu CreditAttribution: Alex Andrascu commentedsubscribing
Comment #30
thebuckst0p CreditAttribution: thebuckst0p commentedFollowing 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.)
Comment #31
bluestarstudios CreditAttribution: bluestarstudios commentedGuys can somebody please update this patch or help in updating to latest version?
Comment #32
yang_yi_cn CreditAttribution: yang_yi_cn commentedsubscribing
Comment #33
beauz CreditAttribution: beauz commentedI'm also looking for an updated patch... has anyone done anything?
Comment #34
bluestarstudios CreditAttribution: bluestarstudios commentedGuys, 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
Comment #35
gone404 CreditAttribution: gone404 commentedLooking for an update patch against views 2.11 as well. I will try to roll my own and post a patch if it works.
Comment #36
bleen CreditAttribution: bleen commentedsubscribe
Comment #37
Anonymous (not verified) CreditAttribution: Anonymous commentedsubscribe
Comment #38
jenfil CreditAttribution: jenfil commentedsubscribe
Comment #39
ChristianP CreditAttribution: ChristianP commentedsubscribe, might be using this. Thank you!
Comment #40
tdmarsol CreditAttribution: tdmarsol commentedSubscribing
Comment #41
EndEd CreditAttribution: EndEd commentedSubscribing
Comment #42
dgastudio CreditAttribution: dgastudio commented+1
Comment #43
alex.skrypnykSubscribing
Comment #44
dgastudio CreditAttribution: dgastudio commentedany update?
Comment #45
Exploratus CreditAttribution: Exploratus commentedSubscribe
Comment #46
fregan CreditAttribution: fregan commentedSubscribe
Comment #47
jonhattanreroller #17 on 6.x-2.x. Still needs work per #20.
Comment #48
dejavu1987 CreditAttribution: dejavu1987 commentedIs there some patches like this for drupal7? I want all that is discussed here for my d7 site... Please help..
Comment #49
eL CreditAttribution: eL commentedsubscribe
Comment #50
Bensbury CreditAttribution: Bensbury commentedsubscribe - appears lots of people would like this.
Comment #51
bleen CreditAttribution: bleen commentedbensbury ... no need to "subscribe" anymore. Please note the shiney new "Follow" button at the top of this issue
Comment #52
joecanti CreditAttribution: joecanti commentedThis would be a really great feature...anybody got anywhere with this in Drupal 7??
Comment #53
Xomby CreditAttribution: Xomby commented@Joecanti - I've set up an issue to track this very thing at: #1392148: Ajax Pager jQuery Transition Effects
Comment #54
praneeth87 CreditAttribution: praneeth87 commentedWhere i can find d7 version?
Comment #55
JamesAn CreditAttribution: JamesAn commentedI'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.
Comment #56
tlattimore CreditAttribution: tlattimore commentedI 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
Comment #57
medden CreditAttribution: medden commentedThanks for creating your module. Very much appreciated.
Comment #58
radj CreditAttribution: radj commentedI'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!
Comment #59
MustangGB CreditAttribution: MustangGB commented