Browser displays all nodes when loading the page
freatida - January 23, 2009 - 07:54
| Project: | Views carousel |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | bug report |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Thanks for this module. It's working ok for me except that when my browser first loads the page which has the views carousel it briefly displays all the nodes, before loading the carousel display. Does anyone else have this?
#1
it looks like a theme issue...
give this a try..
set the width for "jcarousel-clip-horizontal" div tag and set its overflow property to hidden
#2
Thanks for your reply. I don't have a div with class or id "jcarousel-clip-horizontal", but I've set a width and overflow property for all the divs and it doesn't change anything. It only displays all the nodes very briefly when the page first loads. After that the carousel displays as it should. I'm using zen theme. Any other suggestions?
#3
freatida,
The div tag "jcarousel-clip-horizontal" is populated by the view, so if you inspect your page with firebug or just look at the source, you will see bunch of div tags related to jcarousel. But that's not necessary anymore, as I gave you the wrong div tag. I just looked at my theme again, and the ID of div tag that I modified was similar to viewscarousel-[view_name]-block_[block#]. Give it a height, width and set the overflow to hidden.
chintu
#4
Ok I see, yup fixed it with the css.
Thanks for your replies.
#5
Seemed to fix it for Safari and IE 6 & 7, but not Firefox 3.0.7 (osx 10.4.11)
This is using Analytic Theme.
No problems in Pixture theme with the same Firefox.
Any suggestions?
#6
Anyone have a FF solution? I'm on a zen starterkit theme.
i hear a lot of folks are using this "foxfire" contraption now...
freatida: did your solution work in FF? What did you end up doing?
#7
Yes, my solution worked in Firefox. It was just a case of setting a fixed width and height on the carousel container and setting overflow to hidden, so that even though the browser loads all the nodes initially, you can't see them.
#8
can someone help me with this? as a css dummy i still don't know where to put the width, height and hidden tags. i see a css in the /jcarousel/jcarousel/skins/tango folder and tried to modify all container div sections in there. then there's jcarousel.css in the jcarousel folder - didn't work either.
in my page source i see it loads
<div class="view-content"><ul id="viewscarousel-sprecherprofil-random-page-1" class="jcarousel-skin-tango"><li>
<div class="views-field-field-photo-fid">
<span class="field-content"><a href="[link]" class="imagecache imagecache-jcarousel imagecache-linked imagecache-jcarousel_linked"><img src=" ... and then come the images.
any help is greatly appreciated!
[edit:] ok i found a way by trial and error: I added this to my theme style.css:
#viewscarousel-sprecherprofil-random-page-1 {width: 75px;
height: 75px;
overflow: hidden;
}
what happens now is: just the first item of the unsorted list appears for a while and still looks ugly. when i set the height to zero, the images don't appear at all of course. is there a way to really hide the images while the carousel is loading? actually the display of an empty carousel would be the prettiest solution.
[edit edit:] adding
list-style: none;at least got rid of the bullet next to the first image
#9
seems to me that the content should be hidden by default until the carousel is constructed. however, doing so manually breaks the layout completely. in my case, i cannot set the overflow to hidden on the carousel block due to how my page is constructed.
#10
i don't get this to work on the site i'm currently working on. => www.marke41.de
especially in the internet explorer it looks bad. maybe there is a way to load the content of the carousel AFTER the browser has all the css?
#11
Try setting the containing element (e.g. #carousel) to
visibility: hidden;in your theme's css file. Then in your page.tpl.php insert this snippet to make the element visible when the document is ready:<script type="text/javascript">$(document).ready(function(){
// hide the carousel items until the page is loaded
// to prevent flash of unstyled content
// use css visibility property
$("#carousel").css("visibility","visible");
});
</script>
Seems to work for me. Hides the unstyled list items until the carousel is loaded.