I know it's just images, but I gotta say that's kind of cool.
On Oct 29, 1:56 pm, Tekcronic <[EMAIL PROTECTED]> wrote: > Yea I have put it up athttp://www.webwizardwill.com/pgturner/ > > I did get it to work in IE but I am reworking the code again for a > better animation. I will put up a FF3/IE7 working example on the > index page and from the code orignally posted, I will make a link on > only the index. > > -tekcronic > > On Oct 29, 9:49 am,keif<[EMAIL PROTECTED]> wrote: > > > PasteBins are excellent resources for dropping your code in, and I can > > guess at the HTML, but do you have a demo page? HTML can you throw in? > > Thanks! > > > -keif > > > On Oct 28, 3:30 pm, Tekcronic <[EMAIL PROTECTED]> wrote: > > > > here is what I have it works in Fire Fox and chrome not in IE7. > > > > <code> > > > window.addEvent('domready', function() { > > > /* things in here happen as soon the document is ready */ > > > > // set constants > > > var $pageheight = 189; // the single page height we're using > > > var $pagewidth = 146; // the single page width we're using > > > var $pageYpos = 0; // the current Y position of our > > > background-image > > > (in both pages) > > > var $turnheight = 0; // The height of the page turning image. > > > var $turnwidth = 0; // The width of the page turning image. > > > var $bgposition = 0; > > > > var leftpage = $('leftpage'); > > > var rightpage = $('rightpage'); > > > var flip = $('flip'); > > > var lfx = leftpage.effects({duration: 10, transition: > > > Fx.Transitions.Quart.easeOut}); > > > var rfx = rightpage.effects({duration: 10, transition: > > > Fx.Transitions.Quart.easeOut}); > > > var flipfx = flip.effects({duration: 50, transition: > > > Fx.Transitions.Quart.easeOut}); > > > > //Start Leftpage > > > $('leftpage').addEvent('mousedown', function() { > > > $pageYpos = $pageYpos + $pageheight; > > > $bgposition = '0px '+$pageYpos+'px'; > > > lfx.start({'background-position': $bgposition}); > > > flipfx.start({'background-position': '0 0'}); > > > }); > > > > $('leftpage').addEvent('click', function() { > > > $bgposition = '146px '+$pageYpos+'px'; > > > flipfx.start({'background-position': '236px > > > 0px'}); > > > rfx.start({'background-position': $bgposition}); > > > }); > > > //End Leftpage > > > //Start Rightpage > > > $('rightpage').addEvent('mousedown', function() { > > > $pageYpos = $pageYpos + $pageheight; > > > $bgposition = '146px '+$pageYpos+'px'; > > > rfx.start({'background-position': $bgposition}); > > > flipfx.start({'background-position': '118px > > > 0px'}); > > > }); > > > > $('rightpage').addEvent('click', function() { > > > $bgposition = '0px '+$pageYpos+'px'; > > > flipfx.start({'background-position': '236px > > > 0px'}); > > > lfx.start({'background-position': $bgposition}); > > > }); > > > //End Rightpage > > > > }); > > > > </code>
