setup: views carousel displaying 2 objects at a time set to scroll 2 objects at a time when scroll button pressed

I'm having a very very weird problem. I have a carousel which displays nodes (products). In chrome, the display works fine. In firefox, the last node does not display.

Now, by last node, I am talking about the *very last node in the series*. I have a series of 20 products. It looks fine to start and scrolls fine all the way to object 19 but object 20 is just missing. The same happens if I change the number of nodes. I tried having just 2 nodes, and in that case only 1 node would display.

It gets weirder, though. I tried turning on circular wrapping in order to figure out what was going on. With circular wrapping everything works fine until you wrap (it displays the last object just fine). However, after wrapping once, nodes will only appear 1 at a time (though there is enough room for 2). It is as if it is scrolling in 2 objects: 1 of the objects I in the actual view and 1 object which doesnt exist (I can't see it with firebug). Further, if you start scrolling backwards before reaching the end, the problem will occur immediately.

The wrapper problem occurs in any browser. If I have the wrapper off, the problem will only occur in firefox.

I am so incredibly confused. Any help would be very much appreciated.

I have included a link to the live site http://zowda.com/?q=user/edem56 which will be deleted after this problem is resolved for privacy reasons. I am leaving the wrapper on because that problem seems more severe than my original problem which makes me think it will be easier to track down. If you are trying to help and would like to see the behavior with it off then let me know and I'll switch it.

Comments

melchoir55’s picture

Update:
The problem does not occur if viewing using internet explorer 7. This includes the wrapper problem. Both are fine in ie7.
So: Items disappearing with wrapper enabled in Chrome and Firefox, Final item disappearing only in Firefox with wrapper disabled.

Attempted changing from stable version to 2.x-dev
This did not fix the problem. With this version, wrapper off still does not display the final item. With wrapper on, it displays all the items but also displays empty slots for however many items are not present up to the maximum allowed by the view. For example, the view allows up to 20 items per page, so it will display 2 nodes (the only 2 which actually exist) then 18 empty nodes.

Firebug shows that the html code for the final object IS present. That is, there is a block of code referencing jcarousel-item-# where # is equal to the final object. The css sheet contains identical code to all the other items. For some reason... it does not display! If you hover over the code for the final item with firebug, no image highlights anywhere on the page. If you hover over the code of any other item, an image is highlighted.

I continue to be confused and would very much appreciate any assistance.

melchoir55’s picture

Priority: Normal » Major

Updating priority due to lack of production level functionality.

melchoir55’s picture

Category: support » bug

Changing Category to bug report as I'm pretty sure this problem isn't on my end.

xenophyle’s picture

The image appears if I comment out

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right:10px;
}

(though this is not a complete fix)

melchoir55’s picture

Thank you for posting this. I was very excited to read it, but I'm afraid that this only makes it more clear to me that some sort of bug is at work.

I tried making the change you suggested, and it does indeed fix the problem while viewing the page. However, if I actually change the code to effect that change then the problem remains.

You'll note that making any change in value to that field, in firebug, will make the final item show up. However when the code is actually overridden to match those settings, the image remains hidden.

You can see this for yourself by visiting the page once more. You can see my override code at the top has altered that value to 0, yet the problem remains. You can change it back to the original value, in firebug, and the item will display... but again... it won't if the actual code is changed.

Thanks a lot for helping out. If you have any other ideas I'd be very happy to try them.

melchoir55’s picture

Another update that should make this more interesting:

While playing with firebug, I tried changing the jcarousel-clip overflow value from "hidden" to "visible". When this is done, it shows the products that are "offscreen" from the point of view of the carousel. Thus, all nodes in the product are visible at all times with this setting, even if they would normally need to be scrolled to. Even in this state *the last item in these views is still not displayed in firefox*. This seems to be proof that this isn't merely a spacing/theming error based on incorrect height/width. If it were, the last item should be showing up when overflow is set to "visible".

melchoir55’s picture

To continue in the relentless quest to get a working carousel:

I'm pretty sure that I have found the code causing the problem:

element.style {
left:-5058px;
width:5700px;
}

This shows up as a child of jcarousel-clip-horizontal.

My problem now is that this value is not coming from a css file. It is somehow being automatically calculated (and wrongly). Is there a way for me to change the way this code is generated?

mttjn’s picture

mttjn’s picture

did you get this working? please, what was the solution?

ronline’s picture

I've just closed my #1009884: Missing items as duplicate of this.
Looking for the solution...

ronline’s picture

I've replaced the viewcarousel by http://drupal.org/project/jcarousel , the problem has gone.