Views Carousel in hidden div
luco - August 3, 2009 - 18:07
| Project: | Quick Tabs |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
hey there,
I'm not sure to be at the right spot to report this bug, but since Views Carousel works fine outside QT, I think I'll post it here.
I've set up a view styled as a carousel; this view is called by a QT block where each tab provides an argument (in my case, a taxonomy term). so when I switch tabs, it's the same view with different arguments.
problem is that only the first tab shows up correctly. all other ones appear "un-carouselised".
I've tried to change tab order and the result is always the same: only the first tab load Views Carousel right. running D6.13, Views 2.6 and Views Carousel 2.x-dev.
any ideas?
cheers,
Luciano

#1
can you switch the quicktab to non-ajax mode?
#2
yes, I did. it loads the carousel skin, but clips in the wrong place - much before, to be precise.
#3
can you attach a screenshot?
#4
not yet - unless I wanna get in trouble ;] I'm working on this project with a non-disclosure agreement.
#5
can you reproduce the problem on test data and attach a screenshot?
#6
better yet - here's the link: http://d6.luco.com.br/
both tabs call a Tango-formatted Carousel. if you swap them, you'll notice only the first one loads properly.
you can navigate to http://d6.luco.com.br/carousel and get the same view working.
#7
so, the carousel does not work in ajax mode as it requires additional css or js files #345175: what could be inside ajax quicktabs
can I see the problem in non-ajax mode?
#8
sure. just pay that same link another visit ;] it's disabled now.
#9
the quicktab is still in ajax mode..
#10
yes it is. I had set that "No: All tabs will be loaded at page load" option - but didn't pay attention to the cache. sorry, it's fixed now.
#11
the quicktab is still in ajax mode..
#12
I've cleared the cache, all of it. now unless something *else* is broken in quicktabs...... or you can try to flush your browser's cache as well.
#13
the problem seems to be similar as the gmap problem. The content is misaligned in hidden tab.
if you try http://d6.luco.com.br/node?quicktabs_1=1 then you can see that the second tab is ok and the first tab (the hidden tab) is wrong..
please try the 6.x-2.x-dev release with this modification in your theme's css file: #352247-12: How to display two gmaps properly
#14
Hi Pasqualle,
I'm having the same problem. Maybe you can help me. You can go to http://CinemaSaville.com, and see that on the first tab the carousel, but when you try to go to the 2nd tab, it's not functioning properly. I downloaded the 6.x-2x-dev release, and added the extra css to my theme, but it still isn't working. It's a non-AJAX qt. Any help would be appreciated, I love your QuickTabs, now if only we can get this working. Thanks again. Best, Jeremy
#15
@CinemaSaville:
one problem is you are using the block tab type. When you want to add a view into quicktab use the view tab type.
The second problem is that I do not see any sign of carousel in the second and additional tabs. Might be a result of the first problem, but also make sure that you are using the correct settings in the views to display the result as carousel.
#16
I changed all the quicktabs to views tab type. And I'm still having the same problem. Take a look now.
#17
It is much better now as the carousel and all the view items are there, but now you have a problem with positioning.
As I see you are using the quicktabs dev version. I do not know what else should you try, it really seems like a positioning problem in the jquery used in views carousel.
Any idea from Views carousel maintainers or users?
#18
Well I put it into AJAX mode, so you can at least see the items. Otherwise they were completely obscured. So this is a temporary fix. I posted an issue over there, but no one has piped up. I found this issue here, so I thought you might be able to help. The carousel works with only the first tab. Are you sure it's a views carousel issue, and not a QuickTabs one? Just hard to figure out where the problem is. Thanks again for your quick response. And thanks again for the great module.
#19
@CinemaSaville: As I saw earlier you did not make the change described in this comment: #352247-12: How to display two gmaps properly
without it the position can not work in hidden tab..
#20
Pasqualle: I put in the CSS you recommend in that queue, cleared the cache, but still had the same trouble. Is there something else I need to do other than that?
#21
@CinemaSaville: you must have made an error in the css change as I see this in my firebug:
.quicktabs-hide {
}
.quicktabs-hide {
display:none;
}
#22
I was putting that in my theme CSS instead of the quicktabs CSS. And then I took it off AJAX. So now it works, and all is well with the world. Great job on getting me through that, Pasqualle. Thanks so much.
#23
I have two tabs, each tab points to a views block that is a views carousel view.
The first one seems to load, but the second one does not.
I also get the error "jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."
I tried the fix above, putting it in my quicktab CSS, the quicktab style (sky) css, and my theme (garland) css, and it does not fix the issue.
I still get the error message.
#24
@cookiesunshinex: are you using the 6.x-2.x-dev version?
#25
@Pasqualle - Oops, sorry, I was using the 6.x-2.0-rc3 version.
After I installed the latest Dev version and added the following code per the link above to sites\all\modules\quicktabs\css\style.css
.quicktabs-hide {position: absolute;
left: -10000px;
top: -10000px;
}
All seems to be working well now.
Thanks!
#26
actually it would be better if you could add it to the theme's css as you do not have to change it again when you update the module..
maybe for the correct functionality you will have to add also
display: block;#27
@Pasqualle, I had already added it to my theme, see comment #23 above.
I will try removing it from sites\all\modules\quicktabs\css\style.css and adding the display: block like below to garland's style.css
.quicktabs-hide {position: absolute;
left: -10000px;
top: -10000px;
display: block;
}
#28
@Pasqualle, just reporting that this does work if I remove it from sites\all\modules\quicktabs\css\style.css and add it only to my theme (in my case just using garland).
thanks!!!