views:

447

answers:

2

I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).

The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.

I also tried to run it on window.load. and have init running in the footer.

What am I missing?

Update:

Here's the Code that initalizes the Carousel:

 jQuery(document).ready(function($){
       $(".rotateNewContent").jCarouselLite({
          btnNext: ".next", btnPrev: ".prev",
          speed: 800, visible: 1 
       });
       $(".rotateBestsellerContent").jCarouselLite({
          btnNext: ".nextBest", btnPrev:
          ".prevBest", speed: 800, visible: 1
       });
       $(".rotateGiftContent").jCarouselLite({
          btnNext: ".nextGift", btnPrev:
          ".prevGift", speed: 800, visible: 1
       });
 });

here is the html of the first and second lists.

<button class="prev"></button>
   <div class="rotateWrapper"><div class="rotateNewContent">
     <ul class="NewProductList">
                    <li class="Odd">
     <div class="ProductImage">
      <a href="#"  ><img src="#" alt="" /></a>
     </div>
     <div class="ProductDetails">
      <strong>
                          <a href="#">Organic Maple Syrup from Mount Cabot</a>
                    </strong>
     </div>
     <div class="ProductPriceRating">
      <em>$13.00</em>
     </div>
      </li>
  <li class="Even">
 <div class="ProductImage">
           <a href="#"  ><img src="#" alt="" /></a>
     </div>
     <div class="ProductDetails">
      <strong>
                          <a href="#">Sicilian Marmalades from Marchesi di San 
                          Giuliano</a>
                    </strong>
     </div>
     <div class="ProductPriceRating">
      <em>$15.00</em>
     </div>
    </li>      
</ul>
</div></div><button class="next"></button>
   <button class="prevBest"></button>
    <div class="rotateWrapper"><div class="rotateBestsellerContent">
       <ul class="NewProductList">
     <li>
            <div class="ProductImage"><a href="#" alt="" /></a>
     </div>
     <div class="ProductDetails">
      <strong><a href="#">Farro from Rustichella d&#039;Abruzzo</a></strong>
        <em>$8.75</em>
     </div>
     </li>       
             <li>
     <div class="ProductImage">
     <a href="#" alt="" /></a>
     </div>
     <div class="ProductDetails">
      <strong><a href="#">Mariage Frères Marco Polo</a></strong>
      <em>$22.00</em>
            </div>
 </li>     
    </ul>

NB: This site is not yet live, please do not shop.

A: 

The middle instance has a width of 135px, while the left and right instances have a width of 180px.

Left Content:

<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
 relative; z-index: 2; left: 0px; width: 180px;">

Middle Content:

<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible; 
position: relative; z-index: 2; left: 0px; width: 135px;">

I used Firebug to diagnose the CSS issues.

George Stocker
those widths are generated dynamically. that is the problem. Why is it not dynamically generating the correct width?
lizw
You'd have to show us the code that's generating that.
George Stocker
I added that code to your question, you can delete this comment.
George Stocker
By the way, that doesn't create the HTML for that div. Does a source PHP file create the HTML?
George Stocker
i added the html code above. it is generated by the php, but this is the result of the generation. they two are practically identical.
lizw
I think you ought to understand that the HTML by itself couldn't do this, and the JQuery doesn't do this. It's something in the PHP that is generating the page. Can you provide the PHP that generates the HTML?
George Stocker
A: 

i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly. --now i have to figure out how to fix that. :-)

the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.

thanks for helping me think this through george!

lizw