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
Make curved corners with jQuery Corner plugin
If you want a curved edge for your element, the best way is to use the jQuery corner plugin. This plugin dynamically generates and positions div elements to create very cool corners. Just checkout the demo page to see the various styles.
Why it is recommended?
- It does not use any image.
- It is more SEO friendly because we don’t need any unnecessary markups in code. All code is generated dynamically and a search engine never sees that.
- Don’t need to worry about changing the background color as long as it is not a gradient.
Limitations
The background should be a solid color (Should not be a gradient or background image).
Read more
Agile Carousel – Custom carousel with excellent options
Agile Carousel is a jquery plugin which enables you to create a custom carousel with many many different transition & easing options. It has lots of configurable options like customization of controls, timer, easing type, transition type etc. It does not require jQuery UI plugin but it is recommended for excellent transitions of slides.
We need to specify a directory where slides are stored. The slides can be (X)HTML, images or flash. Read more
Which is the best lightbox clone for jQuery ?
Lightbox is a script made by Lokesh Dhakar which is one of the most popular way for showing images or image galleries. The original lightbox script was written using prototype and script aculous javascript libraries. So the main problem is, we need to include these two libraries (almost 100 KB) again even if we’re using jQuery. Certainly, this is not the best way. Thank fully, some programmers realized the situation and made the clones using jQuery. The effects and functionality are almost similar to lightbox but the only difference is, it uses jQuery library instead of prototype. The size of a compressed jQuery library is only 25KB.
Here, I am reviewing three of the lightbox clones. Read more
3 jQuery plugins to show context menu
A context menu (also contextual menu, shortcut menu and, popup menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right mouse click. Context menus offer a limited set of items that apply to the current state, or context, of the system or application in which the context menu is invoked
Source: Wikipedia (http://en.wikipedia.org/wiki/Context_menu)
Here is a review of 3 jQuery plugins that can override the browser default context menu with our own context menu. Read more
