15 Ways to Improve CSS Techniques Using jQuery

Posted in CSS jQuery Popular

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques.

1. Custom Styled Radio Buttons and Checkboxes

It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them:

Custom Designed Checkbox and Radio Buttons
Custom Styled Checkboxes and radio buttons

Radio Button and Checkbox replacement.
radiobutton and check box replacement with jquery

2. Setting Equal Heights with jQuery

equal height columns using jquery
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the equalHeights plugin. With this plugin, you can make equal height columns with just a single line of code.

$("someselector").equalHeights();

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 Selectmenu
This is a plugin for jQuery UI that lets you customize select elements easily.
jquery ui selectmenu plugin

jQuery image dropdown
jQuery image dropdown

4. Current Field Highlighting in Forms

highlight current field in a form
It is always good to provide a visual feedback to users when they perform any action while using a web form. Highlighting the field in which user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the :focus pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides 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 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 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

jquery biggerlink
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

jQuery Curvy 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
Attractive menu with jQuery
Animated Menu Using jQuery
Animated menu with jQuery

9. Creating a Floating HTML Menu Using jQuery and CSS

Live Floating Menu
You can fix the position of an element using the position:fixed property but that won’t provide as rich user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, menu also follows your mouse scroll.

10. Splitting Content over multiple columns

Split content into multiple columns
Ever thought of splitting text of a page into multiple columns just like newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split content into multiple columns with a single line of code.

11. Semantic Blockquotes with jQuery

Semantic Blockquoteswith 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 content to jQuery by specifying which content to show as blockquote.

12. Text Shadows

Text Shadow in IE
CSS3 includes a nice property of text-shadow that allows you to set a text-shadow generate nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using jQuery.

13. Border Image

CSS3 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 rescue. jQuery.borderimage provides cross-browser support for border-image property.

14. Opacity

Opacity is one such CSS property which 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 opacity of elements, but you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.

$("someselectoe").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.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

25 Responses (Add Your Comment)

  1. designfollow says:

    thanks for this great article.

  2. Naresh says:

    commendable listing. thanks for sharing.

  3. I love how many of these equate to “Use jQuery to make IE play nice.” Still, they’re all exceptionally useful. Thanks for the great list!

  4. A wonderful writeup. Thanks. I especially like the idea of custom designed check boxes and radio buttons.

  5. amazing collection .. nice work

    Thanks ..!!

  6. Thanks for a fantastic article. jQuery is certainly getting points as the ‘great equalizer’ between ‘IE’ and ‘everyone else’.

  7. Mike Grace says:

    Love it! Thanks. ; D

  8. I really like the idea of using jQuery for radio buttons and such, thanks for the useful jQuery tips!

  9. N-Designs says:

    awesome.. thanks..

  10. Very good plugin Rounded Corners Thanks

  11. Farid Hadi says:

    The Equal Heights plugin, Columnizer plugin and Text Shadows plugin seem like they are worth looking into. Thanks for the links.

Comments are closed for this post.