Tag Archives: jquery

jQuery browser and OS detection plugin

javascript, , , , ,

Browser/OS detection with jQuery

As I wrote in my recent post I simply use the PPK BrowserDetect object to find out the browser/OS of the client. Actually I’m pretty sure there’s a similar jQuery plugin based again on that code from Quirksmode.org, but however I decided to write a simple plugin for jQuery wrapping it into a closure and exporting it in the “$” object.

Demo

You can see full working example here.

Installation

You must add a link to jquery.client.js after the jquery.js file in your code:

<html>
<body>
 <div id="os"></div>
 <div id="browser"></div>
 <script src="./jquery-1.3.2.js"></script>
 <script src="./jquery.client.js"></script>
 <script>
  $('#os').html("<b>" + $.client.os + "</b>");
  $('#browser').html("<b>" + $.client.browser + "</b>");
 </script>
</body>
</html>

Now there’s a $.client object containing two strings with OS and browser, they can be referenced with:

$.client.browser
$.client.os

You can append this code after you jquery.js installation. And if you’re on Firefox you simply can test with the console object:

Download

You can download the sample code from here.

jQuery datepicker persist defaultDate

javascript, micro tutorial, , , ,

Datepicker from jQuery

You know how the jQuery UI extensions give a useful functionality for the javascript developers. The datepicker is a useful calendar tool that comes with variaty of functions.

How to setup the selected / defaultDate

It’s as simple as these lines of code:

$('#element_id').datepicker({
    ...
    defaultDate : d,
    ...
});

The problem

The problem is when you attach this datepicker constructor to a div which is hidden, and than you make it visible like so: Continue reading jQuery datepicker persist defaultDate →

jQuery check for element visibility

javascript, micro tutorial, ,

What if the element exists in the DOM

That was described in my recent post and it describes the case when you have a particular element in the DOM tree, or if that element does not exists.

example:

<div id="holder">
<div id="element_id">Hello World!</div>
</div>
console.log( $('#element_id').length )

this prints 1, because the element exists. In the following example is different. Continue reading jQuery check for element visibility →

jQuery OS detection

javascript, micro tutorial, , ,

JavaScript libraries and OS

Particularly in that case I’m using jQuery which is enough famous, so I’m not going to introduce it, but however you can use any library, and this remains of your choice. The interesting part here is that I didn’t find a jQuery specific OS detecting plugin.

Reference to the roots: www.quirksmode.org

Well the guru PPK has the right answer, which is working with every JavaScript library … because it’s pure JavaScript itself. Continue reading jQuery OS detection →

jquery check for element existence in the DOM

javascript, micro tutorial, ,

Select the element

If you’re familiar with jQuery, which I suppose is true, you know how to select an element, for instance if there’s an element with id element_id, you do:

$('#element_id')

If the element exists in the DOM

if ( $('#element_id').length > 0 )
       console.log('the element with element_id
                    exists in the DOM');

Note: that console.log is present as console writing function under FF and Safari only.

if not …

Than $(‘#element_id’).length equals to 0

if ( $('#element_id').length == 0 )
       console.log('the element with element_id
                    don't exists in the DOM');