jQuery - Utilities
jQuery provides a set of miscellaneous methods which can be used for various reasons explained in this tutorial:
There are two important methods provided by latest version of jQuery to detect the browser and its associated features.
Getting Browser Version:
The jQuery.browser method contains flags for the useragent, read from navigator.userAgent.
Following example would show how to get browser name and its version:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body);
});
});
</script>
<style>
p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
div { color:blue; margin-left:20px; font-size:14px; }
span { color:red; }
</style>
</head>
<body>
<p>Browser info:</p>
</body>
</html>
|
For my PC it would display following result:
Browser info:
version : 7.0
safari : false
opera : false
msie : true
mozilla : false
|
To understand it in better way you can Try it yourself.
Getting Browser Properties:
The jQuery.support method contains a collection of properties that represent the presence of different browser features or bugs.
You can test the following properties using jQuery.support :
Property | Description |
boxModel | Is equal to true if the page and browser are rendering according to the W3C CSS Box Model. This is currently false in IE 6 and 7 when they are in Quirks Mode. |
cssFloat | Is equal to true if style.cssFloat is used to access the current CSS float value. This is currently false in IE, it uses styleFloat instead |
hrefNormalized | Is equal to true if the browser leaves intact the results from getAttribute. This is currently false in IE, the URLs are normalized. |
htmlSerialize | Is equal to true if the browser properly serializes link elements when innerHTML is used. This is currently false in IE. |
leadingWhitespace | Is equal to true if the browser preserves leading whitespace when innerHTML is used. This is currently false in IE 6-8. |
noCloneEvent | Is equal to true if the browser does not clone event handlers when elements are cloned. This is currently false in IE. |
objectAll | Is equal to true if doing getElementsByTagName("*") on an object element returns all descendant elements. This is currently false in IE 7 and IE 8. |
opacity | Is equal to true if a browser can properly interpret the opacity style property. This is currently false in IE, it uses alpha filters instead. |
scriptEval | Is equal to true if using appendChild/createTextNode to inject inline scripts executes them. This is currently false in IE, it uses .text to insert executable scripts. |
style | Is equal to true if getAttribute("style") is able to return the inline style specified by an element. This is currently false in IE - it uses cssText instead. |
tbody | Is equal to true if the browser allows table elements without tbody elements. This is currently false in IE, which automatically inserts tbody if it is not present in a string assigned to innerHTML. |
Following example would show how to get box model property of a document:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").html("This document uses the W3C box model: <span>" +
jQuery.support.boxModel + "</span>");
});
</script>
<style>
p { color:blue; margin:20px; }
span { color:red; }
</style>
</head>
<body>
<p></p>
</body>
</html>
|
For my PC it would display following result:
This frame uses the W3C box model: true
|
To understand it in better way you can Try it yourself.
|