1. Custom Styled Radio Buttons and Checkboxes
It is always hard and next to impossible to customize the style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and checkboxes to make them more user-friendly. Here are two different ways to stylize them:
Radio Button and Checkbox replacement.
2. Setting Equal Heights with jQuery
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts, JQuery can improve your SEO efforts. Here’s the jQuery way to set the equal height of multiple elements using the equal heights plugin. With this plugin, you can make equal height columns with just a single line of code. view plain copy to clipboard print?
3. Styling Select Elements
<select> is another HTML element that is not easy to customize using CSS, but with jQuery at our disposal, we can certainly make them look cool and usable.
jQuery UI Select menu
This is a plugin for jQuery UI that lets you customize select elements easily.
4. Current Field Highlighting in Forms
It is always good to provide visual feedback to users when they perform any action while using a web form. Highlighting the field in which the user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides a good user experience.
5. Fix IE Overflow problem
Internet Explorer has this rather strange problem, when
overflow is set to auto or scroll, the scrollbar shows up inside the width of the element. This is fine when you have multiple lines of text within that element, but if you just have a single line of text, then the scrollbar would cover that and it won’t be visible. This jQuery technique from Remy Sharp will fix that IE bug.
6. Block Hover Effect
Creating block hover effect with CSS using
display:block is possible but when you have some other content inside a box alongside the link, then it is not possible to create a semantically correct block hover effect using CSS. Here’s a nice jQuery plugin – Bigger Link to achieve that.
7. Rounded Corners
CSS Rounded corners are now supported by most browsers like Firefox, Safari but some browsers like IE do not support them. For those unsupported browsers, you can use jQuery Curvy Corners.
8. Attractive Menus with jQuery
Creating a CSS-based navigational menu that displays hover state separately is not difficult, but with a little amount of jQuery, you can achieve some really nice effects. Check out these two example menus that use jQuery to produce a very subtle hover effect.
Create an Attractive jQuery Menu with Fade In and Fade Out Effect
Animated Menu Using jQuery
9. Creating a Floating HTML Menu Using jQuery and CSS
You can fix the position of an element using the property but that won’t provide as rich a user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, the menu also follows your mouse scroll.
10. Splitting Content over multiple columns
Ever thought of splitting the text of a page into multiple columns just like a newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split the content into multiple columns with a single line of code.
11. Semantic Blockquotes with jQuery
If you use blockquotes in your design to highlight important points of an article, then you also duplicate the content within blockquotes as it is also there in the article. Here’s a nice jquery way to do this leaving the duplication of the content to jQuery by specifying which content to show as a blockquote.
12. Text Shadows
CSS3 includes a nice property of text-shadow that allows you to set a text-shadow to generate nice text effects without using any images. But IE does not support this feature to date. Text-shadow in IE adds this support to Internet Explorer using jQuery.
13. Border Image
CSS3 lets you use images as border backgrounds in addition to just colors. But since it is not supported my many browsers, you’ll need jQuery to come to the rescue. jQuery. border-image provides cross-browser support for
Opacity is one such CSS property that is supported by most browsers including IE but each has a different way to implement it, though CSS3 standard defines a property
opacity to be used for setting the opacity of elements, you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.$(“some selector”).css(“opacity”, 0.5);
15. Super CSS Selector Support with jQuery
CSS 2.1 supports various types of selectors including
:focus, :first-child, nth-child but not all browsers(IE!) support these selectors. but with Super CSS Selector, you can be sure to have support for those selectors even in IE.