We advocate using CSS whenever possible, and we often successed. Modern browsers have very good support for CSS — it’s certainly good enough for you to use CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. That’s why today we wanted to highlight 15 jQuery solutions for the most common browser issues that you’ll encounter when building web applications among other jQuery plugins that will give you a nice browser effect.

1. Achieving Rounded Corners in Internet Explorer with DD_roundies

Unfortunately, CSS3 border-radius is only supported by Safari and Firefox, leaving browsers such as Internet Explorer to gracefully degrade to square corners. DD_roundies library offers a new approach to bringing rounded corners to Internet Explorer. DD_roundies works with selectors - much like jQuery - this capability allows for a very convenient mapping to jQuery UI’s CSS Framework classes, and allows us to apply DD_roundies to jQuery UI in a few short lines.

Check out the Demo here

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge. From a usability and performance standpoint, one smart solution is to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

Check out the Demo here

3. Cross browser text-shadow

Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The only downfall is that it doesn’t work in Internet Explorer. One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. This should work in Internet Explorer 5.5 to Internet Explorer 8.

Check out the Demo here

4. Rounded Corners

This jQuery plugin will create beautifully rounded corners. No images or obtrusive markup necessary. Support for padding ensures your layout degrades gracefully for users who have disabled javascript.

5. Position Footer

This little plugin will allow you to position a footer at the bottom of the browser viewport when the content doesn’t reach that far. It will not adjust the footer if the content goes below the viewport height.

Check out the Demo here

6. Link Control

A simple plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.

Check out the Demo here

7. Page Peel

A jQuery plugin for the page peel ad effect used on quite a few sites now.

Check out the Demo here

8. Delaying loading of images in (long) web pages

Lazy loader is a jQuery plugin that delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This plugin specially helps on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Check out the Demo here

9. Preload Images Sequentially With jQuery

This is a small code snippet you can use for preloading images for mouseovers. It uses $(window).bind(‘load’, function() {…}) to wait until all page elements have finished loading. This includes all images.

10. BGIframe

Helps ease the pain when having to deal with IE z-index issues.

11. Fixing IE overflow problem

IE has a different implementation of overflow compa(red) to Firefox or Safari. In particular, Firefox et al, when overflowing an element, it puts the horizontal overflow scroll bar on the outside of the element. Because the content overflows horizontally in IE, the new horizontal scroll bar means we can’t see all the content vertically, thus generating a vertical scroll bar.

Vertical overflow is always inside the element, so you need to apply the following in IE only:

• Find all elements whose contents is overflowing horizontally.
• Add 20 pixels of padding to the bottom of our element.
• Strip the vertical scroll bar.

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });            
    } else {
      return this;
    }
  };
})(jQuery);
// usage
$('pre').fixOverflow().doOtherPlugin();

This fix results in IE conforming to putting the horizontal scroll bar below the element.

Check out the Demo here

12. Avoiding CSS hacks using Javascript

If you don’t have to code those ugly CSS hacks for those browsers that just won’t show you what you want them to, you can use one trick to ease the CSS writing: “Browser selectors”. So now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser.

Check out the Demo here

13. Increase the size of click targets

Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

Check out the Demo here

14. Vertically Center An Element

In this video tutorial, you will learn how you can vertically center an image in your browser by combining CSS with jQuery’s power

15. JSizes ― jQuery extension plugin for CSS properties

JSizes is a small plugin which adds support for querying and setting the CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties. Additionally it has one method for determining whether an element is visible. In total it adds six new methods to the jQuery element API.

Some examples of how the new methods can be used:

jQuery(function($) {
   var myDiv = $('#myDiv');
   // set margin-top to 100px and margin-bottom to 10em
   myDiv.margin({top: 100, bottom: '10em'});
   // displays the size of the top border in pixels
   alert(myDiv.border().top);
   // displays true if the element is visible, false otherwise
   alert(myDiv.isVisible());
   // set padding-right to 10px and margin-left to 15px using chaining
   myDiv.padding({right: 10}).margin({left: 15});
});

Don’t forget to

subscribe to our RSS-Feed and visit my twitter page : nourayehia to get notified when our next post is here.