Javascript or CSS hover not working in Safari and Chrome
- by PAZtech
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
