Unstyled content when loading

Not sure how we can avoid this as the jCarousel doesn't get applied until jCarousel is activated on the elements. If you take a look at the jcarousel examples, you'll see it happen there too.... Maybe if you stick some custom CSS in to apply on the un-processed jCarousel elements?

This could be fixed by use of the js-hide class defined in system.css.

Here's an untested patch.

I added the js-hide class to the ul container for a carousel I built resulting in class="js-hide jcarousel-skin-tango" on the ul. The result was nothing visible inside the carousel even after the page completly loads.

Perhaps there is something I'm missing here.

@GregSims

It worked perfectly for me but I did do something a little different then the patch.

Currently the patch is:
+ $(selector + ':not(.jcarousel-processed)').show().addClass('jcarousel-processed' + skin).jcarousel(options);

I changed it to:
+ $(selector + ':not(.jcarousel-processed)').removeClass('js-hide').addClass('jcarousel-processed' + skin).jcarousel(options);

That worked like a champ for me.

Committed to DRUPAL-6--1.

Im not 100% certain about this being the cause but when I added this module plus the 2.x-dev version of views carousel my previously working jquery collapsed submenu (a block that calls ul.accordionul hide) would no longer hide all the items below the h3. My markup for the submenu looks like this:

<H3 class="accordion">
<ul class="accordionul">
<li>...
</ul>
...

For reference the js I use to collapse the ul's in my submenu is this:

$(document).ready(function(){
	var manufacturer = Drupal.settings.myvars.manufacturer;
	var category = Drupal.settings.myvars.category;
	
	// if(category=='') { category = 'Crushers';}

	// alert(manufacturer + '/' + category);
	// alert('category');
	$('ul.accordionul').hide();

	if(manufacturer) {
		$('h3.accordion:contains('+ manufacturer +')').next('ul').toggle(); 
	}

	if(category) {
		$('h3.accordion:contains('+ category +')').next('ul').toggle(); 
	}

	$('h3.accordion').click(function() {
		$(this).toggleClass('active').next('ul').slideToggle('fast').siblings('ul:visible').slideUp('fast');
		$(this).siblings('h3').removeClass('active');
	});
});

It seems like there's something in the jcarousel hide until styled that's conflicting with other ul's

PP

Doh--never mind my post above. False alarm. I had a chunk of code that was meant to pause the carousel over hover and it's busted with the new version of jcarousel.

My bad!

;/

I'm still seeing this issue with jcarousel-6.x-2.2. You can see it occur at admin/help/jcarousel, for example. The patch no longer applies and I don't know enough about jQuery to fix it myself.

Maybe this will help.

https://github.com/jsor/jcarousel/issues#issue/95

Basically the plugin author says to include the height and width in the html.

Let me know if it works. Maybe there is an easier way.

Sorry, after re-reading my post. The jcarousel author says to preformat your html. Right now the html that is outputted is not the same as the output that jcarousel applies after the page load. For some reason the jcarousel skin class and other markup/classes aren't applied until AFTER the javascript is loaded. When the page loads it uses your sites standard css. Then AFTER the javascript/jcarousel is loaded and ran, it applies the correct markup/classes which causes the flash of unstyled content.

<div id="carousel">
  <div class="jcarousel-skin-tvtweb">
    <div class="jcarousel-container jcarousel-container-horizontal">
      <div class="jcarousel-clip jcarousel-clip-horizontal">
        <ul class="jcarousel-list jcarousel-list-horizontal" id="tvtweb">
          <li class="jcarousel-item jcarousel-item-horizontal">
             <a><img src="images/content/carousel1.png" width=580 height=284 alt= /></a>
          </li>
          <li class="jcarousel-item jcarousel-item-horizontal">
             <a><img src="images/content/carousel1.png" width=580 height=284 alt= /></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

To sum everything up, I think we will have to change the output of the jcarousel view output to match the above code.

That's something the module maintainer would have to change. Unless there is a better way of doing it.

Hope that helps someone.

Just to confirm, I tested this technique by theming one of my jcarousel views and it worked.

To sum everything up, I think we will have to change the output of the jcarousel view output to match the above code.

This sounds like the best approach to me. Much better than hiding the carousel entirely until the JavaScript has loaded. I'd be happy to review any patches that make such changes.

This is a sloppy proof of concept.

I don't do much development, but I was thinking in jcarousel.views.inc you could add two variables in:
$orientation and $skinname

function template_preprocess_jcarousel_view(&$variables) {

something like

<?php if($view->style_options['vertical']=='0'){
      $orientation = 'horizontal';
      }
      else {
      $orientation = 'vertical';
      }
?>

$skinname = $view->style_options['skin'];

Then add to jcarousel-view.tpl.php

surround the unordered list with:

<div class=" jcarousel-skin-<?php print $skinname ?>">
<div class="jcarousel-container jcarousel-container-<?php print $orientation; ?>">
<div class="jcarousel-clip jcarousel-clip-<?php print $orientation; ?>">
<ul stuff goes here>
</div>
</div>
</div>

Maybe that would work?

subscribe

You can go a long way by screwing around with the CSS. Putting a wrapper div around the ul in jcarousel-view.tpl.php, applying as many styles as possible to the wrapper div (height, width, border, padding, font stuff), and hiding overflow helped minimize flashing for me. The prev/next arrows still take a moment to appear but it doesn't look bad at all.

I'm using a wrapper div with overflow:hidden in my custom module that uses jCarousel and it works much better than before, but it still looks like a bulleted list for a second. Setting a fixed width/height on the list elements also seems to help (it probably speeds up page loading, minimizing the time that the incorrect content is shown).

gmclelland: I think you're definitely on the right track when it comes to fixing the views support. Do you also have an idea on how to fix the theme('jcarousel') and jcarousel_add()? Looking at the code, I don't see any easy solution other than hiding the content until the javascript loads, but I'd be surprised if there isn't a better way.

@mwm - I think it is basically the same concept as the views solution in #16. - We need to add in the missing markup to everything that the jcarousel module outputs.

looking at the jcarousel.module

in theme_jcarousel()

I think you could change the $output variable to include the jcarousel surrounding divs and values.

Basically, we need the jcarousel drupal module to output the same html markup that the jcarousel javascript library applies after the carousel has been rendered(formatted).

Right now the module outputs something like this (taken from http://sorgalla.com/projects/jcarousel/):

<ul id="mycarousel" class="jcarousel-skin-name">
   <!-- The content goes in here -->
</ul>

After the jquery has been initialized, the DOM is transformed into something like this:

<div class="jcarousel-skin-name">
  <div class="jcarousel-container">
    <div class="jcarousel-clip">
      <ul class="jcarousel-list">
        <li class="jcarousel-item-1">First item</li>
        <li class="jcarousel-item-2">Second item</li>
      </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
  </div>
</div>

And that's the type of code we should be outputting in the jcarousel module to prevent the FOUC (Flash of unstyled content).

I'm sure I left out some markup, but I'm just trying to explain the general idea.

Hopefully that helps

Referring to the unordered list using the wrapper div prevents the flash, I think.

#wrapperdiv ul { list-style-type: none } 

#21 did not work for me.

I used "#block-views-Carousel-block_1 ul". For some reason applying the list-style-type property through this div works, but applying it though a wrapper div I added to the jCarousel template does not.

This is my weird setup. I'm too afraid to change it since it's working fine now:

#block-views-Carousel-block_1 
{
  [font styles for carousel items]
}

#block-views-Carousel-block_1 ul 
{
list-style-type: none;
}

#carousel-wrapper        /* wrapper div I added in jCarousel template */
{                 
[height, width, padding, and border for the box containing carousel items]
}

The prev/next arrows have to be inside the #carousel-wrapper box since overflow is hidden. I made space for them with padding.

This might be way to specific to my site to be of use to anyone.

gmclelland: I tried your suggestion and it works! Here's a simple proof-of-concept patch. It only works for carousels created with the theme function and doesn't put in the prev/next buttons early, but it's still a huge improvement. The biggest improvement comes from adding the style to the <li> tag.

@mwm - Thanks for making a patch, but I don't think you need the inline style tags. I believe those inline styles should be in your skin's css file. Also, make sure it is printing the skin name in the top level div.

So, altogether I think it needs to contain:
div class=skin name
div class="jcarousel-container jcarousel-container-' . $orientation
div class="jcarousel-clip jcarousel-clip-' . $orientation

Will this be part of the next update?

We need a patch to apply.

#16 worked for me as well with the exception that the code i placed in jcarousel.views.inc seemed to do nothing, so i had to hardcode the classes i wanted in the jcarousel-view.tpl.php. Thanks for this help! I then modified the CSS to match the CSS loaded inline by the javascript (tested by turning JS off). Thanks for all your comments!

subscribe

#16 is sort of working for me.
I get the divs around the ul and I have the classes for those divs. There is no style applied to the ul, so it looks like a bulleted list.

The problem I have been having, which brough me here, is that for some reason the carousel doesn't always manage to switch to the formatted, js version. #16 makes it look more formatted, but it sometimes gets stuck in this state, and doesn't want to become a full fledged carousel. This always is a problem when I clear caches.

It's as though the javascript just doesn't run. I'm not really a programmer though, so I'm not sure what the issue is.

#18 worked for me. Thanks!

Hi all.
I am having this problem as well using version 6.x-2.6.

I am using the slide show on a front page.
It does this in all browsers.

I used this version 6.x-1.x-dev of this module and this was not an issue.
Is there a patch or a workaround for this?

oops, see below

This issue was posted for version 6.x-2.2 yet persists in 6.x-2.6.
I am changing the version number in the issue settings.

It takes jCarousel a brief instant to do its thing in all my Mac and Windows browsers.
Unstyled content (a bullets list view) appears for a brief instant before jCarousel kicks in and makes the Carousel which works flawlessly from that point.

This issue makes the module not usable for me.

It does not matter if Ajax is on or off.
I have a very simple view showing 1 field with 3 nodes that are referenced.
I have a reasonably fast server.
The problem is not affected caching.

This is a very popular module, is anyone else having this problem?
If so how are you dealing with it?
Is it really necessary to jump info the view .tpl and start playing with it as suggested above?
I did not have this problem at all in 6.x-1 dev versions.
Thanks

Any updates on how to fix this for the 7.X version?

i can't help you with your problem, but i just thought you might want to know that when Google translates the page

http://www.marke41.de/autoren/anita-lu%CC%88der-bugiel

(oops, there's an encoding problem with a character in that url, at least using my char set)

anyway, on anita's page, the english translation puts the word "bitch" in her name......

oopsies.

SOLVED AND TESTED FOR DRUPAL 7. TRY TO APPLY TO VERSION 6
http://drupal.org/node/1681538