Javascript or CSS hover not working in Safari and Chrome

Question

I have a problem with a script for a image gallery. The problem seems to only occur on Safari and Chrome, but if I refresh the page I get it to work correctly - weird!

Correct function: The gallery has a top bar, which if you hover over it, it will display a caption. Below sits the main image. At the bottom there is another bar that is a reversal of the top bar. When you hover over it, it will display thumbnails of the gallery.

The problem: In Safari and Chrome, the thumbnail holder will not display. In fact, it doesn't even show it as an active item (or a rollover). But oddly enough, if you manually refresh the page it begins to work correctly for the rest of the time you view the page. Once you have left the page and return the same error occurs again and you have to go through the same process.

Here's one of the pages to look at: link text

Here's the CSS:

#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);

height: 105px; left: 0px; position: absolute; top: 0px; width: 754px; z-index: 2; }

#ThumbsHolder {
 display: none;
}

#ThumbsTable {
 left: 1px;
}

#Thumbs {
 background-color: #000;
 width: 703px;
}

#Thumbs ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#Thumbs ul li {
 display: inline;
}

.Thumbs ul li a {
 border-right: 1px solid #fff;
 border-top: 1px solid #fff;
 float: left;
 left: 1px;
}

.Thumbs ul li a img {
 filter: alpha(opacity=50);
 height: 104px;
 opacity: .5;
 width: 140px;
}

.Thumbs ul li a img.Hot {
 filter: alpha(opacity=100);
 opacity: 1;
}

Here is the javascript:

//Variables

var globalPath = "";

var imgMain; var gutter; var holder; var thumbs; var loadingImage; var holderState; var imgCount; var imgLoaded; var captionHolder; var captionState = 0; var captionHideTimer; var captionHideTime = 500; var thumbsHideTimer; var thumbsHideTime = 500;

$(document).ready(function() { //Load Variables imgMain = $("#MainImage"); captionHolder = $("#CaptionHolder"); gutter = $("#ThumbsGutter"); holder = $("#ThumbsHolder"); thumbs = $("#Thumbs"); loadingImage = $("#LoadingImageHolder");

//Position Loading Image
loadingImage.centerOnObject(imgMain);

//Caption Tab Event Handlers
$("#CaptionTab").mouseover(function() {
    clearCaptionHideTimer();
    showCaption();
}).mouseout(function() {
    setCaptionHideTimer();
});

//Caption Holder Event Handlers
captionHolder.mouseenter(function() {
    clearCaptionHideTimer();
}).mouseleave(function() {
    setCaptionHideTimer();
});

//Position Gutter
if (jQuery.browser.safari) {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px");
} else {
    gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
}
//gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
//gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px");

//Thumb Tab Event Handlers
$("#ThumbTab").mouseover(function() {
    clearThumbsHideTimer();
    showThumbs();
}).mouseout(function() {
    setThumbsHideTimer();
});

//Gutter Event Handlers
gutter.mouseenter(function() {
    //showThumbs();
    clearThumbsHideTimer();
}).mouseleave(function() {
    //hideThumbs();
    setThumbsHideTimer();
});

//Next/Prev Button Event Handlers
$("#btnPrev").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg");
});

$("#btnNext").mouseover(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg");
}).mouseout(function() {
    $(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg");
});

//Load Gallery
//loadGallery(1);

});

function loadGallery(galleryID) { //Hide Holder holderState = 0; holder.css("display", "none");

//Hide Empty Gallery Text
$("#EmptyGalleryText").css("display", "none");

//Show Loading Message
$("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain);
$("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain);

//Load Thumbs
thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() {
    $("#TitleHolder").html($("#TitleContainer").html());
    $("#DescriptionHolder").html($("#DescriptionContainer").html());

    imgCount = $("#Thumbs img").length;
    imgLoaded = 0;

    if (imgCount == 0) {
        $("#LoadingGalleryText").css("display", "none");
        $("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain);

    } else {
        $("#Thumbs img").load(function() {
            imgLoaded++;

            if (imgLoaded == imgCount) {
                holder.css("display", "inline");

                //Carousel Thumbs
                thumbs.jCarouselLite({
                    btnNext: "#btnNext",
                    btnPrev: "#btnPrev",
                    mouseWheel: true,
                    scroll: 1,
                    visible: 5
                });

                //Small Image Event Handlers
                $("#Thumbs img").each(function(i) {
                    $(this).mouseover(function() {
                        $(this).addClass("Hot");
                    }).mouseout(function() {
                        $(this).removeClass("Hot");
                    }).click(function() {
                        //Load Big Image
                        setImage($(this));
                    });
                });

                holder.css("display", "none");

                //Load First Image
                var img = new Image();
                img.onload = function() {
                    imgMain.attr("src", img.src);
                    setCaption($("#Image1").attr("alt"));

                    //Hide Loading Message
                    $("#LoadingGalleryText").css("display", "none");
                    $("#LoadingGalleryOverlay").css("display", "none");
                }
                img.src = $("#Image1").attr("bigimg");
            }
        });
    }
});

}

function showCaption() { if (captionState == 0) { $("#CaptionTab").attr("src", globalPath + "/Images/CaptionTabHot.jpg"); captionHolder.css("display", "inline").css("left", imgMain.position().left + "px").css("top", imgMain.position().top + "px").css("width", imgMain.width() + "px").effect("slide", { "direction": "up" }, 500, function() { captionState = 1; }); } }

function hideCaption() { if (captionState == 1) { captionHolder.toggle("slide", { "direction": "up" }, 500, function() { $("#CaptionTab").attr("src", globalPath + "/Images/CaptionTab.jpg"); captionState = 0; }); } }

function setCaptionHideTimer() { captionHideTimer = window.setTimeout(hideCaption,captionHideTime); }

function clearCaptionHideTimer() { if(captionHideTimer) { window.clearTimeout(captionHideTimer); captionHideTimer = null; } }

function showThumbs() { if (holderState == 0) { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTabHot.jpg"); holder.effect("slide", { "direction": "down" }, 500, function() { holderState = 1; }); } }

function hideThumbs() { if (holderState == 1) { if (jQuery.browser.safari) { holder.css("display", "none"); $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg"); holderState = 0; } else { holder.toggle("slide", { "direction": "down" }, 500, function() { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg"); holderState = 0; }); }

}

}

function setThumbsHideTimer() { thumbsHideTimer = window.setTimeout(hideThumbs,thumbsHideTime); }

function clearThumbsHideTimer() { if(thumbsHideTimer) { window.clearTimeout(thumbsHideTimer); thumbsHideTimer = null; } }

function setImage(image) { //Show Loading Image loadingImage.css("display", "inline");

var img = new Image();
img.onload = function() {
    //imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250);
    imgMain.attr("src", img.src).css("display", "none").fadeIn(250);
    setCaption(image.attr("alt"));

    //Hide Loading Image
    loadingImage.css("display", "none");
};
img.src = image.attr("bigimg");

}

function setCaption(caption) { $("#CaptionText").html(caption); //alert($("#CaptionText").html()); /* if (caption.length > 0) { $("#CaptionText") .css("display", "inline") .css("left", imgMain.position().left + "px") .css("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px") .html(caption);

    $("#CaptionOverlay").css("display", "inline")

.css("height", $("#CaptionText").height() + 36 + "px") .css("left", imgMain.position().left + "px") .css("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px"); } else { $("#CaptionText").css("display", "none"); $("#CaptionOverlay").css("display", "none"); } */ }

Please if anyone could help, it would be greatly appreciated!

Thanks in advance.

Justin

Answer 1

I'm using Chrome 4.1.249.1064 and the top bar works perfect, I see the caption without refreshing the page. The same in Firefox 3.6.3, all works perfect Same with Safari 4.0.3, all works perfect