3

Chrome and Safari (Webkit engine) add 2 additional <li> into <ul> list with class 'jcarousle-item-placeholder'. How can I remove it? jCarousel in FF, IE and Opera is OK.

Thanks for help.

quarky
  • 710
  • 2
  • 13
  • 36

5 Answers5

4

In my case, I was adding the below code twice

<script type="text/javascript">

       jQuery(document).ready(function () {
           jQuery('#mycarousel').jcarousel();
       });

</script>

I removed the one block and it worked for me.

Tisho
  • 8,320
  • 6
  • 44
  • 52
Raheel
  • 56
  • 2
1

I've seen this problem occur in Safari when jcarousel is called twice on the same ul - if you are working with a CMS this can be easy to do as jcarousel could be called by a module function (e.g. jcarousel_add() with Drupal's jcarousel module), a js file included by your own module code, in a template file etc. It's worth excluding this as a possibility by commenting out the call you are working with

AutomatedTester
  • 22,188
  • 7
  • 49
  • 62
Patchrobe
  • 11
  • 1
0

I had this problem also, and it ended up being that one of my closing li tags was accidentally written as <li> instead of the proper </li>, which made the browser render extra empty li tags

Linger
  • 14,942
  • 23
  • 52
  • 79
Sean
  • 1
0

I found a quick and dirty solution to the problem by adding css "display:none" to any <li> with the class jcarousel-item-placeholder.

  1. Navigate to your jcarousel.min.js file

  2. Look for (Line 249 for me): if(h.length===0){ h=this.create(e).addClass(this.className("jcarousel-item-placeholder"))

  3. Directly after this with no spaces add: .css({ "display":"none"}).attr("jcarouselindex",c);

  4. Check Chrome, Safari, IE and FF all should work as expected the two empty <li class='...jcarousel-item-placeholder...'></li> should be gone.

Code section from my jcarousel.min.js:

Line 248...
if(h.length===0){
h=this.create(e).addClass(this.className("jcarousel-item-placeholder"))

//Code to add start
.css({
"display":"none"
}).attr("jcarouselindex",c);
//Code to add end

if(j.length===0)this.list.prepend(h);else j[d?"before":"after"](h);
if(this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)))
}
j=h;
DOB
  • 1
0

Make sure your tag has defined height and width attributes like so 

<img src="images/test.png" height="100" width="100" alt="test" />

I had similar issues with several 'jcarousel-item-placeholder' classes appearing on list-items, where I did not define width on my tag. I believe the DOM was ready, but the images were not loaded yet as the window onload event had not occurred. Without declaring the width of the image, jcarousel has no way of calculating width correctly until the window is loaded and in that scenario it seems to insert placeholder items.

shai
  • 55
  • 1
  • 5