Browser displays all nodes when loading the page

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

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

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?

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?

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

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.

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?

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.

@barneson

your solution didn't work with FF
use display: none;
and

<script type="text/javascript">
    $(document).ready(function(){
        $("#carousel").css("display","block");
    });
</script>

[EDIT]

Alexandr,

where in the page.tpl.php do you place the code please?

Thanks,

Evelyn

Subscribing

you can place it anywhere between body or head tags

Thank you Alexandr!!

subscribing

This seemed to work for me. Note the view I am using is called "homepage_slideshow" and only adjusted CSS to get this working. See below for the styles I used.

#block-views-homepage_slideshow-block_1 {
	padding: 20px 0px 0px 10px;
	overflow: hidden;
	width: 735px;
	height: 227px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
	padding: 0px 0px 0px 0px;
	width: 735px;
	height: 227px;
	border: 0px;
	background: none;
	overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
	width: 735px;
	height: 227px;
	overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal ul {
	width: 735px;
	height: 227px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	overflow: hidden;
}

I am also experiencing this issue. Unfortunately I was unable to use the script in #14 because setting the display:block on the elements ruined the display of the items in the carousel. My solution is to

• Create a new views tpl file for "Row Style Output"
• in the new tpl I add a class on the containing div of "hide-me" in my case this div looks like this in the tpl : print $field->inline_html; class="views-field- print $field->class; hide-me">
• in my theme's css file add .hide-me{display:none;}
• in my page.tpl.php just inside the closing html tag add
  

    <script type="text/javascript">
      $(document).ready(function(){
          $("div").removeClass("hide-me");
      });  
    </script>

This hides the div while the document is loading and shows it once the DOM is complete. There is still a bit of a blip because the carousel is not there and then it appears, but this is a huge improvement over the previous behavior of 20 thumbnails displaying vertically and then snapping horizontal when the jcarousel styles and scripts are applied. Hope this helps someone else....

Hi,
is there any way to do that and still have a nice fallback display in html/css when javascript is disabled ?
As with an overflow auto ? Because the suggested method makes the view not displayed when js is disabled.

For instance if I follow the process in #21 :

in mytheme.info

   scripts[] = js/carousel_ready.js

in carousel_ready.js (in mytheme/js)

    $("div").removeClass("js-disabled-carousel-fallback");

$(document).ready(function(){
	// hide the carousel items until the page is loaded
	// to prevent flash of unstyled content
    $("div").removeClass("hide-me");
});

in views-view-fields--example.tpl.php line 27 :

<<?php print $field->inline_html;?> class="views-field-<?php print $field->class; ?> js-disabled-carousel-fallback hide-me">

in theme.css

div.hide-me {
    visibility:hidden;
}
div.js-disabled-carousel-fallback {
    visibility:visible;
}

in theme.css also :

I have noticed that the class .jcarousel-skin-custom is automatically removed from the ul element, so I can use it as a very large horizontal div to scroll horizontally when js is disabled.

.example-selector div.view-content {
    height:270px; /* up to your content size in order that the vertical scrollbar doesn't display */ 
    overflow:auto; /* scrollbar overflow-y would do but is not valid css2 I think */
    top:0;
    width:960px;
}

ul.jcarousel-skin-custom {
    list-style:none outside none;
    padding:0;
    width:9999px; /* very wide zone to scroll by */
    margin:0 66px; /* I like to have some margin on the sides - not neccessary, automatically removed in carousel mode as well */
}

.jcarousel-skin-custom li {       
    display:block;
    float:left;
    height:auto;              
    padding:0;
    width:170px;
    margin:0 49px 0 0;
}

I have tested this and it works ok.

I did #11. This fixed my problem on this issue. Thx barneson!

I attempted Alexandr Kosarev's solution, as seen in #14.

My declaration, in a Zen subtheme's page-front, is #block-views-rotator-block_1 .jcarousel-item and applied:

  <script type="text/javascript">
    $(document).ready(function(){
        $("#block-views-rotator-block_1 .jcarousel-item").css("display","block");
    });
</script>

is placed in the body directly above $closure <div> (it was also tested in the <head> and the top of <body>with the same results.) I have also moved <?php print $scripts; ?> to just above $closure which also did not help.

and

#block-views-rotator-block_1 .jcarousel-item {
  display:none;
  height:210px;
  list-style:none; 
  overflow:hidden;
  width:824px;
  }

Upon page refresh there is a flash of all nodes and Firebug reports:

block-views-rotator-block_1 .jcarousel-item {
display:block;
height:210px;
list-style:none outside none;
overflow:hidden;
width:824px;
}

in the above block of code display:block (yes, block...not none) now overwritten by:

element.style {
display:block;
}

Manually changing #block-views-rotator-block_1 .jcarousel-item to display:none renders the desired empty box.

Any input greatly appreciated,

Thanks!

-NP

OK, I've done some looking around, but not located a solution. However on http://javascript.about.com/library/blanim02.htm they present the code <body onload="setObjVis('myobj','visible');"> and

function start() {
setObjVis('myobj','visible');
}
window.onload = start; 

Can anyone advise me if this will work in my case? If so, in the case of Views carousel, what would I need to insert in lieu of myobj?

Thanks!

-NP

EDIT
Hey, I was able to get this solved without the use of .js, using straight css display none and height. What I wonder about is why it worked...my understanding of the problem was the script loaded and displayed before the .css; thus the unstyled content. Obviously that's not the case, as the .css fixes were able to constrain the flash.

So, what's going on?

@NonProfit what is happening here is that when jcarousel acts on the list it changes the html. If you look at the html that is sent to the page and look at the html in firebug or in safari/chrome you'll see a difference.

This difference is important. It provides the opportunity to style the carousel for cases when there is JavaScript and when there is no JavaScript. But, it can produce a flash in some cases when the page first loads. This is especially true of this version which is packed. The packed version not only has to be downloaded it has to be evaluated by the browser.

When this module is moved to Drupal 7 I hope to see some performance improvement as we will be using jQuery 1.4.2 and the version for that is minified which executes just a little faster.

So, what can we do about it for now. There are a couple options and I'll leave each of them up to person implementing the solution.

The solution I prefer is to force the carousel wrapper to be the height you want. This is what I did for the carousel to anonymous users on http://geeksandgod.com

#block-views-episode_carousel-block_1 .content {
  height: 212px;
  overflow: hidden;
}

What I did was set the wrapper to be the right hight and am hiding content that overflows that. This combined with some other styling can stop the page from jumping. You may see a little jump inside that block but, the whole page won't jump.

I'm adding a line to the README.txt file pointing back here for this problem.

this worked for me also, giving the block with a vertical carousel a height, works on my mac with safari and FF.

#block-views-siste_tilbud-block_1 {
height: 390px;
overflow: hidden;
}

Thanks @mfer!

*** This is not a comment regarding views carousel in D6. It's just a general comment for persons that may be seeking information about carousel display problems in general and find this page, as I did. ***

Having the same issue with a carousel in D7.

Current version of Chrome (this does not happen in Firefox) decides to load the elements and pancake them in front of the viewer, then once it realizes it's a carousel, it hides all but the first image and the rest of the page is pulled up to where it should be.

Tried using JS to change visibility to visible after document load is complete, but then I just get a huge black area where the carousel image goes, as well as a black bottom portion of the page -- once everything is done loading (several seconds), suddenly everything shows up properly.

Would be nice to have an intermediate solution where a "mock-up" image is shown (made up of CSS-only elements) while everything else loads, then replace the "image-goes-here" CSS image with the actual carousel.

Any thoughts?