Jcarousel is showing only last image for sometime.

[ninadbe]

Hello,
We have jcarousel on our forum site which rotates automatically. It is vbulletin forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set.

But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller.

Our site URL is

http://forums.naturalparenting.com.au

Please go at any topic and post page finally, Above first post there a wide blank place, thats a scroller.


While old site design is still active at

http://ninad.naturalparenting.com.au

Please go at any topic and post page finally, Below first post there is a scroller


At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally.

It is really very strange issue for me. I have tried all ways to fix it but alas !!!

Any help would be greatly appreciated.

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
 -moz-border-radius: 0px;
 background: transparent;
 border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
 direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
 width: 695px;
 padding: 20px 30px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
 width: 75px;
 height: 220px;
 padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
 height: 220px;
 margin-left: auto;
 margin-right: auto;
 width: 675px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
 width:  75px;
 height: 220px;
}
.jcarousel-skin-tango .jcarousel-item {
 width: 75px;
 height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-left: 0;
 margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
 margin-left: 10px;
 margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
 background: #fff;
 color: #000;
}
/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
 position: absolute;
 top: 83px;
 right: 5px;
 width: 32px;
 height: 32px;
 cursor: pointer;
/* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
 left: 5px;
 right: auto;
 background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
 position: absolute;
 top: 83px;
 left: 5px;
 width: 31px;
 height: 31px;
 cursor: pointer;
 /*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
 left: auto;
 right: 31px;
 /*background-image: url(images/checkout/nivo_nav.png);*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
 position: absolute;
 bottom: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
 position: absolute;
 top: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}

#upsell {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
}

#upsell li {
 border: 0 dashed #CCCCCC;
 float: left;
 height: 220px;
 list-style: none outside none;
 margin: 0 10px 0 0;
 padding: 2px;
 width: 125px;
}
</style>  
<script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>

[jscheuer1]

I had checked this earlier and saw the problem. Looks like it's fixed now though, is it?

[ninadbe]

No it is not fixed yet. This problem has driven me mad.

[ninadbe]

Anyone have idea from where it sets width at element.style at jcarolusel ?
At my site it initially shows width : 1768px at element.style. But when we refresh page it adjust width to 220px automatically which in turn arranging all images vertically.

element.style {
    left: -50px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0;
    width: 220px;
}

Anyone have idea from where this CSS code coming at jcarolusel?

[jscheuer1]

OK, this might not be "it" but in the forums.naturalparenting.com.au/lib/scroller.css file we see:

<style type="text/css">

.jcarousel-skin-tango .jcarousel-container {
 -moz-border-radius: 0px;
 background: transparent;
 border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
 directio . . .

 . . . p: 0;
text-align: center;
}

#upsell li {
 border: 0 dashed #CCCCCC;
 float: left;
 height: 220px;
 list-style: none outside none;
 margin: 0 10px 0 0;
 padding: 2px;
 width: 125px;
}
</style>

Those don't belong and really should be removed. The style you're asking about in your post comes from the script. Perhaps because the stylesheet is wrong though the script is missing certain crucial initial values from it and/or parsing elements for width that have the wrong initial position, overflow, etc. values. But if fixing the stylesheet doesn't fix things, you can always set the width in the stylesheet:

#mycarousel {
width: 1768px !important;
}

The !important keyword will override the scripted style.

BTW, the paths to the next and previous and any other images in the stylesheet need to be relative to the stylesheet, not to the page that's using them. This may or may not also play a role. If in doubt you can always use the absolute path to the images in the stylesheet.

[ninadbe]

Thanks for your reply.
I tried inserting code given by you in scroller.css but no use.

#mycarousel {
width: 1768px !important;
}

In between I when I copied entire HTML of the page through firebug. Created a separate new file ntest2.php and uploaded on server. To my surprise it do work fine at that page.

Check.

http://forums.naturalparenting.com.au/ntest2.php

[jscheuer1]

You still haven't removed the opening and closing style tags from the forums.naturalparenting.com.au/lib/scroller.css file. If you do that, you might not need:

#mycarousel {
width: 1768px !important;
}

And until you remove those tags, using that style might not help anyway.

[ninadbe]

hmm, removed <style> tag from scroller.css but no effect.

[ninadbe]

it worked finally. I tried many way to override by implementing classes and ids finally this one triggered at scroller.css which is overiding width: 220 px.

ul.jcarousel-list {
    width: 1768px !important;
}

Thank you very much for your support and help.