“…I am always easily fed up by having too many options…”

This blog is more about reflection of realization of how I think I can keep up with the world’s latest technologies rather than Peppy itself.

When I first read about Peppy, yet another CSS selector, I was very reluctant to wholeheartedly accept it. I’ve just become a fan of jQuery and now there is something new. Nowadays everyone is trying to impress others and nobody can tell immediately whose work will last for a long time. However given a bunch serious unit tests by the author and a solid benchmark results, apparently some great work is done here. So I’d like to check out how to integrate this new CSS selector with some of other JS frameworks to use it in my next project.

[Read the rest of this post ...]

Reflections of objects usually give the interface a crisp and clear look and feel. It’s no magic to generate such effects in Flash or WPF/e as they’ve got dedicated graphic components. In the Ajax/DHtml world, creating graphics suffers from problems such as lack of tools, platform incompatibilities and bad performances.

Some of the standards available for use are canvas, svg, and vml. But none of the three is supported by all major browsers.

This morning, from Ajaxian.com, I saw link to a post in which the author mentioned his reflection generating script. It’s implemented based on canvas, which isn’t supported by IE at all but sufficiently covers Firefox and Safari. Here is the link to the demo page.

Then I’ve got some idea regarding implementing the cool effect with pure Javascript and DOM, which at first I thought should be straightforward. So I started immediately. But soon I figured out that in order to create the reflection, I must be able to “flip” the original picture, which is immediately out of the capability of JavaScript and standard html! “Hmmm, so that’s why it wasn’t done before.”. However, right before I was going to give up, I found the solution. Which leads to the following.

Reflection Implemented!

Works on IE7.0 and Firefox 2.0. Didn’t test on other browsers. You may click here to see it in action or click the image to open the screenshot, if it is not working on your browser or is too slow to open.

Well…the effect is implemented, but by no means a feasibly one due to increased rendering overhead. But that’s the best I can do.
Because for each element needs reflection casted, there will be the “height of the element” number of clones of the exact same elements created to vamp the shadow.

The demo page can be found here. It may take a few seconds to load, although the file itself is fairly small.

Current features

• Reflection of images;
• Reflection of div elements, partially supports nested images and text;

So the reflection of text is an extension of the original idea.

(I will explain the algorithm later)

It’s implemented for proof-of-concept purpose. So the code is really badly organized and contains no documentation. I didn’t even bother to edit it in an IDE. Glad it got up and running as intended quite smoothly with little debugging. :)

As I was writing this blog, I wrote a bunch of generic functions that I thought are short cuts of the tedious javascript and DOM functions. For example,document.getElementById(), one of the most often used functions, is definitely overwhelming.

Also, there are a lot of incompatible issues from browser to broswer, so there are functions attempting to overcome these and make them transparent, at least to me.

Download Script: (kunalu.js)

I am open to discussions. Many of them are very primative and need improvements. I have only addressed issues in Firefox and IE6+. I did NOT test them in Safari, Mozilla, Netscape, or Opera. Please feel free to leave your comments and suggestions.

I will post some code segment and talk about my initial design ideas.