jQuery Utilities

« Previous Chapter Next Chapter »

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:

Example

<html>
<head>
   <script type="text/javascript" 
   src="../../js/jquery-2.2.0.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>
                                        

Output Will Be :

Example

Browser info:
version : 7.0
safari : false
opera : false
msie : true
mozilla : false
                                        
Code It Online

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:

Example

<html>
<head>
   <script type="text/javascript" 
   src="../../js/jquery-2.2.0.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>
                                        

Output Will Be :

Example

This frame uses the W3C box model: true
                                        
Code It Online

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!