It is kinda odd behavior, it updates fine after the rollover. Have you tried removing the opacity setting on your prev, next links? If that doesn't work have you tried just removing those overlays altogether to try to find the exact source of your problem?
I did something a while ago but I injected image elements instead of setting the background image. I realize that being a photo related site you maybe wanting to make it harder to download the images. Just something else to consider or try. On Mon, Oct 6, 2008 at 3:03 PM, Jon Hack <[EMAIL PROTECTED]> wrote: > > Hello, I've put together a rather slick site using mootools. You can > find it at http://www.gjphoto.ca. It works quite well except for one > issue with WebKit based browsers (Safari and Chrome). > > If you open one of the portfolios (linked at the bottom) in FF or IE > you'll be able to see how it is supposed to work. The thumbnails > should slide up and down, and when you click on one the picture area > will slide over to the relevant photo. There are also previous and > next buttons covering each half of the picture area to navigate one > photo at a time. > > The problem with Webkit is that although the picture area technically > does slide, it doesn't get refreshed until you move the mouse over it. > > What I really don't get is that the thumbnails do slide very well and > the code is pretty much identical for both. Essentially, it calculates > the position that it needs to move to, use .Tween to move the > containing DIV and then enables/disables the up/down/next/previous > buttons. Here's the code: > > var movePhotoViewer = function(newPhotoIndex){ > if (curPhotoIndex!=newPhotoIndex) { > photoPos = photoWidth * newPhotoIndex; > > lpELPhotosInside.tween('margin-left', '-'+ (photoPos) > +'px'); > > curPhotoIndex = newPhotoIndex; > if (curPhotoIndex==0) { > lpPrevious.addClass('deactivated'); > lpNext.removeClass('deactivated'); > } else if (curPhotoIndex==(lpData.length-1)) { > lpNext.addClass('deactivated'); > lpPrevious.removeClass('deactivated'); > } else { > lpPrevious.removeClass('deactivated'); > lpNext.removeClass('deactivated'); > } > } > }; > var moveThumbViewer = function(tmp){ > if (tmp=='up') { thumbPos--; } > else if (tmp=='down') { thumbPos++; } > else { > var tmpTPos = Math.ceil((tmp+1)/thumbnailsPerPage); > if (thumbPos!=tmpTPos) {thumbPos=tmpTPos;} > } > > lpELThumbInside.tween('margin-top', '-'+ ((thumbnailSize * > thumbnailRows)*(thumbPos-1)) +'px'); > > if (thumbPos==1) { > lpDown.removeClass('deactivated'); > lpUp.addClass('deactivated'); > } else if (thumbPos==maxThumbPages) { > lpDown.addClass('deactivated'); > lpUp.removeClass('deactivated'); > } else { > lpDown.removeClass('deactivated'); > lpUp.removeClass('deactivated'); > } > }; > > > > Here are a few things I've tried: > 1) I tried changing it so that in Webkit browsers it doesn't tween but > just uses a setStyle. This still doesn't work. > 2) I tried removing the previous/next buttons that are over the photo, > in case it was the layered divs that were the cause, this just > prevented it from ever refreshing. > > Any ideas on what might be causing this? > Cheers. >
