Thanks for the advice Ivan, I'll take a closer look at it. I've somewhat suspected that may be where the problem lies, but I haven't been able to pin-point it. I'll take a closer look.
And Nathan, yes I have tried completely removing the next/previous buttons in Webkit browsers, but it still doesn't work. I'll report back if I make any progress. On Oct 6, 3:13 pm, "Nathan White" <[EMAIL PROTECTED]> wrote: > 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 athttp://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.
