Anyone else have this problem?

On multiple sites and multiple themes... views cycle (whether in a block,
view, insert view) always shows all of the items before condensing to the
proper "animation."

I have tried all different scenarios with views cache and performance settings
but the problem is persistent.

See examples of what I am talking about:
http://www.dannybarnes.com/skillet/
http://www.inventrd.com/

You see the complete list load... then collapse back to how it should be. Thanks in advance for any help.

CommentFileSizeAuthor
#9 577074-8-views_cycle-display.patch1.35 KBnedjo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ianski’s picture

Same problem here.

Keywords: displays complete list, shows complete list, suppress list view, list problem

ianski’s picture

No sooner than I had posted the last entry, I had a brainwave.

The block I have cycling (through implementation in views) is #block-views-homepage_tags-block_1.

By targeting the li elements with display:none in my stylesheet, the initial view of the complete list does not display, but the cycle plugin overwrites the display parameter for each individually cycled li element once the code kicks in.

This was added to my stylesheet:

#block-views-homepage_tags-block_1 ul li {
display: none;
}

Take note that if you target "ul" instead of "ul li" with display:none, the cycle plugin has nothing to work with and won't display.

It doesn't work perfectly in IE6. (But what does?) The li element is suppressed, but a space for the list is still rendered in my particular layout, pushing all other content down the page.

Tested in: IE6, IE7, IE8, Firefox (Mac), Safari (Mac)

Crell’s picture

Title: Why doesn't Views_Cycle cache? » All rows appear on page load before cycle takes effect

This has nothing to do with caching. It has to do with the JS/CSS interaction and the default CSS before the JS takes over.

mugunth’s picture

I too noticed same issue when I tried views cycle for changing banners in one block & to scroll news in another block in one of my sites. Initially it worked fine. After few days of developement in that site, it stopped working. I could not find any reason it not working. I found that javascripts required for the views cycle were not loaded. I didnt changed any cache settings. I had 2 blocks in the same page using views cycle thats the only complexity i can see (but it worked fine in both blocks initially)

I switched over to http://drupal.org/project/views_slideshow to create the same functionality without any issues.

I tried both 6.x-1.0-beta1 & 6.x-1.x-dev versions. Same error in both.

If the module author wants, i can get more specific details from one of my local installation with this problem.

joachim’s picture

Might the solution be to add a bit of JS to hide all the LIs before the JQ cycle starts?

Crell’s picture

joachim: Actually CSS, not JS, would be the solution. JS still takes time to run, which is the problem we're hitting here. I just haven't had time to add such JS. Patches welcome. :-)

joachim’s picture

Oh hang on -- in which case this isn't my bug!
I am seeing all the rows of my view *all* the time, and only the last item cycles... *goes back to look at issue queue*

nedjo’s picture

The standard Drupal approach is to add the no-js class to the enclosing element to hide content when JS is present, then add a .show() call or equivalent in the js.

nedjo’s picture

Status: Active » Needs review
FileSize
1.35 KB

Um, I mean a "js-hide" class. Like this.

Mac Clemmens’s picture

Ditto to the above approach.

What's happening here is that you can add

visibility: hidden;

to the object in the stylesheet (which loads immediately), and then have the jquery change it to visibility: visible; which happens as the javascript is done loading. This will prevent the FOUC (Flash of Unstyled Content) when loading. Note that this works differently than display: none; because the object still has mass (width and height). It's kind of like it's there but is 100% transparent. This is a key difference between visibility: hidden and display: none.

Crell’s picture

Status: Needs review » Fixed

Committed #9. Thanks nedjo!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

crozilla’s picture

Sorry to reopen a closed issue, but I'm having this exact 'pre-caching delay/exposing all nodes' problem on a site I've built and I'm pretty sure it's a CSS thing since changing to BlueMarine solves the issue. But I can't figure out how I messed my css up. Can some JS whiz give me specific attributes to look into? I've checked my 'ul li' and that doesn't seem to be causing the problem. I'm not doing anything with 'object' either. Little help?