15 jQuery Plugins to Fix and Beautify Browser Issues
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.
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.
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.
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.
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.
7. Page Peel
A jQuery plugin for the page peel ad effect used on quite a few sites now.
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.
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.
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.
13. Increase the size of click targets
Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!
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.
A very useful article, thanks!
I have been using DD_Roundies for the past 2 months. Because of it’s use of vector drawing primitives in IE, it’s the most advanced round corner/border radius at this time.
Just be aware that you understand the caveats and limitations (like no rounding of tables or table elements, or select dropdowns)
Thanks for the double link love on the Link Control and Page Peel. Great list too. I’ve got to try out that footer one.
Some of those plugins seem really useful!
Very informative. It must have taken you a while to find and put all of these together.
Thanks.
I think there’s a bug in the demo of dd_roundies : when executed in IE7, corners are effectively rounded, but the tabs don’t change color when clicked
Yeah, I’m working on that one. Simple fix, but I don’t want to put out another release until I’ve addressed some more significant ‘under the hood’ issues.
Great resource. Seen most of these before but DD_roundies is a new one on me.
Lazy load – Delaying loading of images in (long) web pages is very useful
Hi, great post.
But i found mistake in link href in 5. Position Footer.
Thanks for pointing that, just fixed it
nice one with the DD_Roundies, it can avoid invalid CSS too. awesome!
“This should work in Internet Explorer 5.5 to Internet Explorer 8.”
We should give up IE hacks completely. Force people into switching browsers.
Wow, this is great! I’m (finally) starting to get into the world of using jQuery, so these kinds of things are awesome resources for me!
Jonas:
Now, now, we shouldn’t be forcing people to use certain browsers, we should be campaigning for consistent support by all browsers. We want people to have more legitimately good choices, not lock them in to one or two.
14: Vertically center an image.
There is a pure CSS solution as well. Give the element and absolute position, move it top negative 50% and left negative 50%. Then give it a margin-top and left of half the elements hight and width.
For text, say in a button with one line of text, give the element a height and set the line-height to be equal to it.
I’m not sure how exactly the footer plug-in works (is the footer at the bottom of the PAGE or ’stuck’ at the bottom of the browser view port while content goes behind it? ex. http://www.cbcli.com)
There are pure CSS ways to have a footer sit at the bottom of the page, as seen here:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
or
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
But if this plug-in is for the footer stuck at the bottom of the browser view port, I don’t know of a CSS-only way to do it without using JavaScript
The jQuery solution is almost similar to the one found here, the only difference is in the jQuery solution you don’t need to specify a height for the footer.
Anyone here might give us another difference, or what is the need of using javascript when we can do it with CSS only.
Lazy load – Delaying loading of images in (long) web pages is very useful.
Nice and useful article, finally I found a preloading images sequentially code that actually works!
Thanks.
Some really great jQuery plugins here. I can see how a lot of them are useful.
I do have one question though, doesn’t using Javascript for styling purposes ruin the whole idea of the 3 layers of web design? i.e. (X)HTML = content, CSS = presentation, JS = behaviour.
Nice to have some additions to my jQuery tool box, some nice ways of bringing IE up to spec without busting your hump.
Some pretty usefull plugins here. thanx a lot for the collection.
except for lazy load all of these should really be delt with CSS rather than JS…
I’m curious, how would you accomplish the Link Control or Page Peel with CSS?
I found a solution to the bug:
In function(out) set:
$(this).css(‘position’,’static’);
Great post – thanks!
It’d be nice if the rounded corners plugin worked well in IE8.
Great post – thanks!!
jquery is like the solution to all the things that frustrate me with web development
Very nice!!!!
thx for good list)
‘Vertically Center An Element’ link is broken
nice collection thanks for share
“Avoid CSS hacks with Javascript…” Hilarious. CSS “hacks” are used to avoid Javascript.
D’oh! I know tip #1 specifically says “In IE”, but I was hoping it would work for Opera as well. Not so much!
Thanks for the cool list, though. Lots of useful stuff in there. I like #13, BigTarget.js, in particular.