tea & toast

Well mootools provides some great functionality with their transitions, and in such a small file size... it saves us from making annoying code that merely moves a window, and it nice and smooth. Saves me from a lot of difficult cross-browser testing for simple things, and lets me focus on what i'm making.

And today, it's a fly in window!

Ok i'm not going to suggest this is the end all of solutions, or that it's complete; it's easy enough to copy and paste into your own site if you only need one fly in, if you want otherwise i've not made it a class... so that might be a little difficult. For this example all you need do is format your fly-in window with position absolute, a width, and the id "myFlyIn".

For the javascript: include the mootools.js file with core (download it from their site), transitions and window, then add a link with href="javascript: showFly()" and your done!

The window will position itself in the middle when the window is resize, and will stay in it's position when you scroll, however if the pop up ends up larger than the browser window, it'll let you scroll over the popup so you can see all of it regardless of how big your browser window is. The button is a toggle so will put the window in an out.

Let me know what you think, or if you improve on the code!

What? you want the code... oh well i guess i could put in some pretty code for you to read!

And that's it! Have fun!

P.S. Roller owned me... alas i've resulted in having to resort to an Iframe to show my code, as roller makes pre formatted mash, by adding usless paragraph tags and breaks that destroy your preformtted glory... I tried a few 'solutions' from hiding br's and reducing p's to nothing with css and removing the tags with Javascript, but this results in the code losing all it's formatting or changing slightly, so sorry about the iframe!

Posted by Alex Brindal @ 10:31 AM CST |  Comments 1