Add icons to your links automatically using jQuery & CSS
You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc.
Why jQuery?
Yes, it is not that difficult with css. Just declare some classes and give background images then assign that class to the links as required. Then why we need jQuery. The answer is, for simplicity. Who ever entering the content should be cautious to add the right classes for the right links. Also adding classes are difficult in a blog platform – you will need to switch to HTML view instead of the editor view.
Using jQuery we’ll make sure that the right icon is showing for a particular link. Read more
jQuery seekAttention plugin to get the users attention
The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.
The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.
This plugin can be useful for web based tutorials or in forms (May be in validation). Read more
Improved lava lamp effect for jQuery and Mootools
The lava lamp effect was an excellent technique to turn the navigation to a flash like animation. LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.
It is available for bot jQuery and Mootools Read more
Fancy Upload – Ajax file upload for MooTools
Fancy upload is a nice and excellent replacement for the file input field. It uses a flash component called swiff for file upload and other features. But instead of displaying the flash interface, it uses javascript to interact with the flash component and the appearance is fully skinnable using CSS & HTML.
It works on Mootools. Read more
Vertical alignment of contents inside an element using jQuery
One of the old problems! Vertical alignment of contents inside an element. For those who don’t know about this issue,
What is the issue?
- For eg; there is an area (e.g. <div> or <p>) with known height in the page (For eg: 300px;)
- an internal object (typically a paragraph, image etc) is inside the area and the height is unknown(May be this content is from a table – we don’t know how much is the text)
- This object should be centered vertically inside the required area.
- Tables should not be used.
Though there is a CSS property vertical-align, it won’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this vertical alignment problem.
There were ofcourse a couple of solutions using css. But all involves elements inside an element (For eg: <div>inside another <div> and style). But this may be difficult for bloggers, who want to show some content in special formatting (For eg: In my site, notes are shown in a special style). For eg: you want to give a 200px height to a <p> element and vertically center the elements (Same was the case with mine).
So the simplest method is to use javascript. Here I am describing how to solve the vertical alignment issue with jQuery. Read more
