Question

I have a circular jquery carousel that is a representation of a 9 day calendar with 5 days visible. Each day is represented in a vertical column. Arrows right and left control the view of the 5 days. The carousel works beuatifully in all browsers with one exception. Once you go from column 9 to column 1 (in circular fashion) the styling is gone and my hover effects are gone. If you continue the same direction the columns are missing until you get to column1 again. For instance, if you were clicking the next button repeatedly once you go from column/day9 and into column/day1 the mouseover stylings no longer work on the days until you reach column/day1 again.

Long code – soz.

I am using msCarousel from here: http://www.marghoobsuleman.com/jquery-ms-carousel

JQUERY

$('p.testSpotImage').wrap('<div class="imageWrapper" />');
$('.imageWrapper').append('<div class="imageBackground"></div>');

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('.imageWrapper').each(function () {
    var tdHeight = $(this).closest('td').height();
    $(this).height(tdHeight);
});
$('.imageWrapper').css("width", "187px");
$('.imageWrapper').css("position", "relative");
$('.imageWrapper').css("top", "0");
$('.imageWrapper').css("clear", "both");
$('.imageWrapper').css("overflow", "hidden");

$('.imageBackground').css({ 'opacity': '0' });
$('.imageBackground').css("background-color", "#a43802");
$('.imageBackground').css("height", "100%");
$('.imageBackground').css("width", "100%");
$('.imageBackground').css("position", "absolute");
$('.imageBackground').css("top", "0");
$('.imageBackground').css("z-index", "1");

$('p.testSpotImage span.dayContentTitle').css({ 'opacity': '0' });

$('.imageWrapper').hover(
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 1);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 1);
    $('p.testSpot a .dayContentDay', this).css("color", "#fff");
    $('p.testSpot a', this).css("color", "#fff");
},
function () {
    $(this).find('.imageBackground').stop().fadeTo(200, 0);
    $(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 0);
    $('p.testSpot a .dayContentDay', this).css("color", "#333");
    $('p.testSpot a', this).css("color", "#333");
});


$('.dayContent').hover(
    function () {
        $(this).stop().animate({ backgroundColor: "#a43802" }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#fff");
        $('p.testSpot a', this).css("color", "#fff");
    },
    function () {
        $(this).stop().animate({ backgroundColor: '#ffffff' }, 200);
        $('p.testSpot a .dayContentDay', this).css("color", "#333");
        $('p.testSpot a', this).css("color", "#333");
});

HTML FROM ONE COLUMN

<div class="contentColumnDay2">
    <table cellpadding="0" cellspacing="0" id="columnDay2">
        <tr>
            <td class="calendarHeader">
                <p><span class="dayHeader">Day 2</span><br />October 1, 2011</p>
            </td>
        </tr>
        <span id="ContentPlaceHolder1_labelDay2">
            <tr>
                <td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day3_3pm.jpg'>
                    <p class='testSpotImage'>
                        <a href='CalendarMiniDetail.aspx?id=36' rel='shadowbox;height=220;width=330'>
                            <span class='dayContentImageDay'>10</span>AM<br><span class='dayContentTitle'>Fashion Show Debut</span>
                        </a>
                   </p>
               </td>
           </tr>
        </span>
    </table>
</div>

Answer 1

jQuery Carousel is buggy when set to circular mode. I think a large portion of the world is waiting for the update.

Here’s what I’d do. It seems like the carousel is being rebuild after the first cycle which is going to destroy your hover event. Instead try:

$('.dayContent').live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }

That will keep the event on that class even if rebuilt.