Posts

Showing posts with the label Jquery

Know IE Browser Version

Here is simple jquery function to know about the IE browser version. jQuery(document).ready(function(){    var browserProperties = $.browser;      if ($.browser.msie) {        if(browserProperties.version < "9"){            alert("Please upgrade your Internet Explorer to verion 9 and above.");                  }    }    });

Jquery Slideup and Slidedown

The jQuery slideDown() method is used to slide down an element. The jQuery slideUp() method is used to slide up an element. These two methods are perfect for showing and hiding content in a non-jarring manner. The slideDown() method shows content by sliding open a given element; the slideUp() method, on the other hand, hides content by sliding closed a given element. These are very basic methods. Following example shows, how can we display a child menu on hover of elements with slideUp() and slideDown() methods. Here is the HTML code. <ul>     <li><a href="index.php" class="current_link">THE LATEST</a></li>     <li><a href="community.php" >COMMUNITY</a>         <ul>             <li><a href="chat.php" >Video Chat</a></li>         </ul>     </li>     <li><a href="b...

Check if jQuery plugin is loaded

The previous post checked if jQuery is loaded , now it is time to check if particular jQuery plugin is loaded. Checking if plugin exists or if plugin has been already loaded is useful if you are writing your jQuery code that depends on that plugin. Here is how to check if some jQuery plugin is loaded or not: if(jQuery().pluginMethod) {     //jQuery plugin exists } else {     //jQuery plugin DOES NOT exist } As you know from previous post on namespacing javascript plugins are created as an additional namespace within jQuery namespace. All you have to do to check if plugin exists is to check if it’s namespace / function is defined. For example, let’s assume that my plugin depends on jQuery Validation plugin. To check if validation plugin is loaded I would do the following: if(jQuery().validate) {     // Validation plugin exists     // Now I can use $('#someId').validate() } else {     // Validation plugin DOES NOT exi...

How To Check If JQuery Library Is Loaded?

This article discusses how to check if jquery.js file is loaded. Also, presents a way to force load jQuery file before running any dependant JavaScript code. In order to determine whether jquery.js file is loaded or not, we need to check for existence of jQuery object. Because, when jquery.js file is loaded, it creates a new global jQuery variable. Checking if some class, method, variable or property does already exist is the very basics of any programming language. In our case, the programming environment is JavaScript and the object we are checking for is jQuery() (or $()). This method is not limited to jQuery only, you can check existence of any other variable or function in your javascript. Anyway, as we said earlier, jQuery() or $() functions will only be defined if they are already loaded into the current document. So to test if jQuery is loaded or not we can use 2 methods. Method 1: if (window.jQuery) {     // jQuery is loaded } else {     // ...

Change Default Date and Month in Jquery Data Picker

We can change default date display date in jquery data picker as we wanted like moving months back and forward and displaying particular date. As we all know script for jquery date picker, I'm just recalling the script again. $(function() { $( "#datepicker" ).datepicker(); }); Following shows some examples for changes defaults options. $(function() { $( "#datepicker" ).datepicker({ defaultDate: '-2m' }); }); Above code changes the default month to previous two months. Example, if we are in November I'll show us the month of September.  By passing in a string like following ways, we can set the default date to another one relative to the current date. Alternatively, the option also accepts a Date object: or a string in the same format as the format currently defined: defaultDate: '1/9/2010' $(function() { $( "#datepicker" ).datepicker({ defaultDate: new Date('2013,05,01') }); ...

Simple Jquery Toggle

Image
Description: The  toggle( speed, [callback])  method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. Syntax: Here is the simple syntax to use this method: selector .toggle( speed, [callback]); Parameters: Here is the description of all the parameters used by this method: speed:  A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000). callback:  This is optional parameter representing a function to call once the animation is complete. Example: Following is a simple example a simple showing the usage of this method: the title Toggle

Add a “Read More” Link using jQuery

The jQuery Expander Plugin is a simple little jQuery plugin to hide/collapse a portion of an element's text and add a "read more" link so that the text can be viewed by the user if he or she wishes Here’s a simple way to use this plug-in your HTML Declare div with class "readmore" or apply class "readmore" to any HTML element  <div class="readmore">      The Div Text Comes Here     </div> And add the following jquery code to head section of your HTML page <head> <title>Add Read More Link</title>       <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript">     </script>     <script src="http://plugins.learningjquery.com/expander/jquery.expander.js" type="text/javascript">     </script>     <script type="text/javascript">         $(function () {     ...

Add Remove Class to Make clicked anchor tag active Jquery

For anchor tags adding active class for selected tag and changing the styles is follows. HTML code. <div class="create_d rive">      <a href="#">Some Text</aui:a>                   <a href="#">Some Text</aui:a> </div> Here is the script   $(document).ready (function(){ $('.create_drive a').click(function(){ $('.create_drive a').removeClass('active'); $(this).addClass('active'); }); });

Difference between window.onload and document.ready

The difference between  window.onload  and  document.ready  is as follows. The  ready  event occurs after the HTML document has been loaded, while the  onload  event occurs later, when all content (e.g. images) also has been loaded. The  onload  event is a standard event in the DOM, while the  ready  event is specific to jQuery. The purpose of the  ready  event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn't have to wait for all content to load. Example: <script> function myFunction() { alert("Javascript Page load"); } $(document).ready(function() {     alert("Jquery Page load"); }); </script> In the example above"Jquery Page load" alert will load first and then "Javascript page load" alert loads.

Jquery simple Slide up and Slide down

Simple Jquery slide up and slide down Here's the HTML for jquery slide down and slide up. <ul>     <li><a href="index.php" class="current_link">THE LATEST</a></li>     <li><a href="community.php" >COMMUNITY</a>         <ul>             <li><a href="chat.php" >Video Chat</a></li>         </ul>     </li>     <li><a href="business.php" >BUSINESS</a>         <ul>             <li><a href="market_price.php">Market Rates &amp; Trading</a></li>         </ul>     </li>     <li><a href="entertainment.php" >ENTERTAINMENT</a></li>     <li class = "top_menu"><a href="#" >LIF...