Hi Daniel [and all readers] Many grateful thanks for the advice you gave me. And for pointing out Nathan White's "transitions" API:
http://www.nwhite.net/category/mootools/image-manipulation/ Thus far I've used it to this extent: http://www.ksqdesign.com/signature/ForwardHo/transone.html All I've done so far is remove Nathan's images and put two of my own in, and resized the CSS elements for the slideshow boxes to y-452 px so it fits the larger of the two images I've put into the "transitions- site.js". Having taken it this far, I thought it would be wise to ask your advice rather than spend days tinkering and getting nowhere. I have three questions standing between me and what I hope to do with this VERY useful script. 1. Can I remove the animation options and just keep one specific cross- fade transition? [I assume by commenting out the superfluous code in "transitions-site.js", and the other two .js files if required. Though I realise one of the other two .js files being the MooTools library, I that I don't touch that one.] 2. I want to get two, three, or four transition examples on a page set up. Can I apply a "Before" and an "After" button bottom left of each example so that users can apply the transition? This means I disable its present time-based transition and replace with a JS "on-click" function. But can it be applied to what Nathan has written? 3. Can the "Before" and "After" states re-size? Or are you limited to a static DIV and just applying "no-repeat" to prevent the background image toggling? Nathan refers to implementing "add-ons". But, as you've already guessed, my JS/MooTools is limited and I don't know if this kind of manipulation of Nathan's very sexy work is possible. Some guidance on how and where to apply the code for what I want to do with Nathan's "TRANSITIONS" would be gratefully received but feel free to say "Hey, we're not here to hold your hand dude, do some studying!". I know I'm sitting on Nathan's shoulders and getting a free ride on his JS skills. And I DO want to learn. But your guidance, as ever, is saving me A LOT of time. As we all know, this stuff is as much about "work smart" as it is about "work hard". One without the other is less than ideal, oh wise ones! What I want is to be able to have two or three examples of "Before" and "After" (each example a transition between a BEFORE and an AFTER image actioned by the user clicking on the "Before" and "After" buttons) on each page. So users can see an image BEFORE I've done something with it. And then AFTER being what I'd like them to spend their money on, i.e. - my Photoshop and Illustrator skills. This idea started with images I sexed up for my family for Christmas. Then I printed them and framed them. Because I'm hoping to sell an idea to the public that is basically about users spending money on their own enjoyment - PRESENTATION is everything. And two static "before" and "after" images on a page is not very engaging. Whereas, to me, this kind of transition is, if I can make it work for my needs. I'm doing this as a generic Moo Tools post as well. Many thanks for pointing me in the right direction, Daniel. Hope you're well. Any and all comments from Moo Tools readers welcome and gratefully received. Keith On Jan 27, 5:43 am, csuwldcat <[email protected]> wrote: > Ok so here is what is wrong (I am sarcastic and make attempts at > humor, be warned), > > As echoed in above posts, the largest problem is that you are not > actually including the library in your page (FF is like Son of a > Bitch, where is mootools1.2.1-core???). Think of it this way, here is > a quote from the few lines of Moo that are actually in your page with > a few comments: > > Fx.Morph = Fx.Styles.extend({ // The browser is like WTF is 'Fx' or > 'extend' > > start: function(className){ // The browser is again like WTF! is > 'start' > > var to = {}; > > $each(document.styleSheets, function(style){ // Here the > browser > again curses and says WTF!?! is '$each' > > The point: these comments higlight kjey words and functions that are > not inherently magical - they need the core lib to have any meaning to > the code, so go ahead and include that so your browser stops throwing > up on itself. > > You have about 1.4 kb of mootools code that was directly copied from > the old 1.1 version demos. > > 1. You need the lib to do this:http://mootools.net/download - > download a copy here > > 2. You are using old methods (Fx.Styles was depreciated). > > 3. Try this on domready grab all the styles you want to mess with like > this: > > window.addEvent('domready', function(){ > > var originalStyles = $('myElement').getStyles({'styleProperty1' : > 'styleValue1', 'styleProperty2' : 'styleValue2', 'styleProperty3' : > 'styleValue3'}); //as many as you want to record > var myEffect = new Fx.Morph('myElement', {duration: 'long', > transition: Fx.Transitions.Sine.easeOut, > onComplete: function{ this.toggleClass('morphed'); } > }); > > $('myElement').addEvent('click', function(e){ > > if(this.hasClass('morphed') == false){ > $('MyElement').start({'styleProperty1' : 'yourNewValue1', > 'styleProperty2' : 'yourNewValue2', 'styleProperty3' : > 'yourNewValue3'});} > > else{ > $('MyElement').start({'styleProperty1' : 'originalStyles[0]', > 'styleProperty2' : 'originalStyles[1]', 'styleProperty3' : > 'originalStyles[2]'}); > > } > }); > > So dude, here is what the above does: > > 1. The first var grabs the initial CSS style values and records them > to an array. > 2. The next Fx instantiation creates a Morph object with an onComplete > function that fires when the effect is done that toggles on and off a > class we have chosen to call morphed' to record its state (FYI this > could just as well be Big Bird, for the love of god, it doesn't > matter) > 3. In the click event you then check to see what state the element is > by checking if our arbitrary class 'morphed' is there, if it is there > it morphs the element back using the values array we recorded on > domready, if it is not present it morphs them to whatever new values > you choose to put in there. > > Get all that? > > Now here is the kicker: In your first post you wanted to "morph" the > bk image, this cannot happen in a 'fade' or artsy manner by just > morphing to another background image path, here is why: > > assume my start height is 100, that is a number btw, and the computer > can mathematically count it down in the browser via script 100, 99, > 98, 97...etc. that is what makes it look morphish, the transition > from one numerical value over a given duration over time. > > Now how does the browser transition this: myImage.png to > BigBird.gif???? Hmmm If I am FF or and browser I would just switch > it to the other image because there is no way to mathematically > transition an image like this, you get me? > > AHHH, lastly, you can do this type of effect though, go > herehttp://www.nwhite.net/2008/09/29/transitions-for-mootools/(i posted > this the first time above) and watch and stand in awe. This is what > you want i assume if you want to transition a bk image. Let the force > be with you JS dude. > > - Daniel
