5 jQuery Snippets For A More Responsive Web Page
Enable HTML5 markup on older browsers
We all know that HTML5 is the future of web development. The only problem is some people still use older versions of web browsers that don’t support this language yet. So for that, here’s a script that will force those browsers to recognize the new tags introduced by HTML5 such as <article> and <header>.
Download the script (.js file) here (URL: http://html5shim.googlecode.com/svn/trunk/html5.js).
Then link it (the .js script) to your page by inserting the code below in the <head> portion of the HTML.
| <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
Test browser for CSS3 support
Here’s a nice code that you can modify to see if a browser supports a particular CSS3 property. Just remember that every time you pass the property, you should take out or omit the dash so like say instead of “border-radius”, pass “BorderRadius”, etc.
| var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; } |
Source: http://snipplr.com/view/44079
Preloading images
Spare your visitors from having to wait a few seconds for a large image to load up every time they click on a thumbnail; just preload the images in the background so they’re ready to be displayed.
| (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery) |
You can check out the source page to get a better understanding on the code’s step-by-step process.
Add class to <body> tag if JavaScript is enabled
What this code simply does is just add a hasJS class in the <body> tag if it detects that JavaScript is enabled on the client’s browser setting.
$('body').addClass('hasJS'); |
Disable the “Enter” key in forms
This fourth and last one’s not really about making your web page more responsive but I thought I’d include it anyway since I think that this can be a very helpful code to your web site’s visitors, especially if they’re viewing or filling up a form page. This code will prevent any unwanted or accidental form submission by disabling the function of the “Enter” key.
| $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); |
============
KEITH FRIAS sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography. Keith Frias is a researcher and writer resources for blogfreakz learn web design tools...
No comments:
Post a Comment