How to Create a Simple Slideshow using Mootools / JQuery

slide_show_icon When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

 

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words.

Read More …

Another Beautiful Thumbnail Hover Effect : Using Mootools

Some days back I wrote a post regarding “Beautiful Thumbnail Hover Effect“. On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.

This implementation is little different.  To know more about this effect lets see the demo first.

View Demo

If you have seen the demo then you might be wondering how this image is splitting in middle. Actually to get this effect I have used two instances of the same image.

Read More …

Make Your Links (Hyperlinks) Even More Sexier

HyperLinkYou would have often seen various attempts to make hyperlink more beautiful. One of my personal favorite is to have little icons beside links to let you know where they link to.
Different icons for external links, pdfs, images, etc. etc. You can find the tutorial for such link over here.

In this post i’ll tell you a technique using which you can make your links even more sexier.

Check out the demo first : View Demo

The Implementation of this effect is given in the following sections.

Read More …

Beautiful Thumbnail Hover Effect : Using Mootools

Thumbnail Effect Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.

View Demo

Thumbnail Effect

The Implementation of this effect is given in the following sections.

The HTML

I think the code here is self explanatory.

The CSS

The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.

Read More …

WTF : What the Framework bookmarklet : Find the javascript framework being used



Yesterday I was hacking the source code of a website. While doing I needed the javascript library being used in that site.
Although on accessing various javascript files i came to know that Prototype was used in that site.

Later I came to know about a bookmarklet : WTFramework. Just add this to on your bookmark.

Just click this bookmark whenever there is a need to know the JavaScript frameworks (MooTools, Yahoo User Interface, jQuery, the infamous Scriptaculous, Dojo Toolkit, Mochikit, etc..

Read More …