Gliding Phenomena: JQuery

Showing posts with label JQuery. Show all posts

jQuery: Disable backgroud scrolling when simplemodal modal box is opened.

When using jQuery simplemodal, when the modal box is box is opened , following is one way to disable the scrolling in the background.

We change the css overflow property of the background in the onShow and onClose functions..

Example:


$("#sample").modal({  
      maxWidth:800, minHeight:800,  
       onShow: function(dialog) {  
                 $("html,body").css("overflow","hidden");  
                 //YOur remaining javascript...  
            },  
       onClose: function(dialog) {  
                 $("html,body").css("overflow","auto");  
                 $.modal.close();  
            }  
 });

jQuery: Select a radio button by name and value

Using jQuery, if you want to select a specific radio button based on name and value

 $(':radio[name="radioBtnName"][value="radioValue"]');

Example:



<div id="radioGrps">  
   <div id="setOne">  
       <input type="radio" name="orange" value="5" />  
       <input type="radio" name="orange" value="10" checked />  
       <input type="radio" name="orange" value="20" />  
   </div>  
   <div id="setTwo">  
      <input type="radio" name="peach" value="10" />  
      <input type="radio" name="peach" value="15" />  
      <input type="radio" name="peach" value="20" checked />  
  </div>  
 </div>

In the above example, if you want to select radio button in div#setOne with value 10, then


$('#setOne :radio[name="orange"][value="10"]');  
 or  
 $(':radio[name="orange"][value="10"]');  
 //to make it checked  
 $(':radio[name="orange"][value="10"]').attr('checked', 'checked');

jQuery: get specific list item by id

Consider the following html snippet

<div id="fruits">  
      <ul>  
           <li id="5">Apples</li>  
           <li id="29">Oranges</li>  
           <li id="32">Peaches</li>  
           <li id="47">Bananas</li>  
           <li id="30">Grapes</li>  
      </ul>  
 </div>

You can get a specific list item using jQuery

 $jq("#fruits ul li[id=32]");

jQuery : Scroll to top/bottom of a specific DIV

Scroll to the bottom of the div:

 $jq('#divWithOverflowAuto').animate({   
         scrollTop: $jq('#divWithOverflowAuto')[0].scrollHeight}  
      );  
 }

Or you can use:

 $jq('#divWithOverflowAuto').animate({   
   scrollTop: $jq('#divWithOverflowAuto').attr('scrollHeight')}  
 );  
}

Scroll to the top of the div:

 $jq('#divWithOverflowAuto').animate({   
         scrollTop: 0 }  
      );  
 }

jQuery: Count number of visible divs

 $("div:visible").length  
 or  
 $("div:visible").size()

If we need for a specific 'class', then

 $(".myclass div:visible").length  
 or  
 $(".myclass div:visible").size()

Displaying the AJAX content in a separate window

Write the following piece of code in your call back function to display the AJAX content in a separate browser window.

function(data) {
  var myWindow = window.open('','Name of the Window','');
  
  myWindow.document.open();
  myWindow.document.write(data);
  myWindow.document.close();
}

Note: You need to make sure your browser pop up blocker has disabled.

CakePHP: remove cakePHP Flash messages using JQuery

Typically you would have all the cakePHP flash messages inside the div - alert_messages.

By using JQuery, we can remove these after intended time period.
The following example removes the cakePHP flash message after 5 seconds time period.


$(document).ready(function() {
  $('#alert_messages').animate({opacity: 1.0}, 5000).fadeOut();  
});

jQuery: Select all options in a Multiple-option Select Box

The following code will programmatically select all the options in a multiple-option Select box. Assuming you have jQuery setup.

$("#selectAllButt").click(function() {
  $("#mySelectList option").each(function() {
    $(this).attr("selected","selected");
  });
});

The following code will programmatically UN-Select all the options in a multiple-option Select box.

$("#selectNoneButt").click(function() {
  $("#mySelectList option").each(function() {
    $(this).removeAttr("selected");
  });
});

jQuery: Get checked checkboxes, radio buttons using Pseudo selectors

jQuery Pseudo Selectors are very efficient way to get the checked checkboxes or radio buttons.
The Pseudo Selector used is - :checked

Following are some simple examples to follow:

$("#chkBoxIdOrRadioButtId").is(":checked");

- returns a boolean true if checked or false

$("#chkBoxIdOrRadioButtId").not(":checked");

- returns a boolean true if unchecked or false

$("#chkBoxIdOrRadioButtId").attr('checked','checked');

- programmatically check the desired.

$("input:radio[name='myRadioGrpName']:checked").val();

- return the value of the checked radio from the 'myRadioGrpName' group.

$("input[name='myChkBoxGrp']:checked").length;

- returns the count of the checked

$("input[name='myChkBoxGrp']:not(:checked)").length;

- returns the count of the unchecked

jQuery : Get the number of options in a select box

Using jQuery to get the number of options in a select box

$('#mySelectBoxId option').length;

Using jQuery to get the number of options that are selected in a select box

$('#mySelectBoxId option:selected').length;

jQuery, CakePHP: Submit a form using ajax; implementing "quick save"

In CakePHP, If you want to submit a FORM using an AJAX request, use jQuery Form Plugin.

You can find a detailed example at http://marcgrabanski.com/article/cakephp-ajax-quick-save-jquery

An alternative to this plugin is invoking a javascript function, when a submit button is clicked, and which would read all the input data inside the form and send it to the controller.

jQuery: Using jQuery with Other Libraries

Ever faced a problem to use jQuery with other Library ?
By default, jQuery uses "$" as a shortcut for "jQuery"

jQuery provides the convenience by defining our own shortcut which eliminates the conflict.
A simple example


<script src="jquery.js"> </script>
<script src="prototype.js"> </script>

<script type="text/javascript" >
jQuery.noConflict()  //now by default, $ is jQuery.
  //But you can reassign it to your own variable.
    var $jq = jQuery;
    //start using $jq for jquery's $
    $jq(document).ready(function() {
    $jq("div").hide();    });
</script>

CSS/HTML : ID or CLASS attribute? Which one to use when ?

A simple, yet powerful classification of the DOM elements can done using the element attributes ID and CLASS. By giving a CLASS attribute, we can refer/select MULTIPLE elements with the same class. Example:


<div class="myclassA">first content</div>
<div class="myclassA">second content</div>
<div class="myclassA">third content</div>

Once we have such layout, we can access all the div's easily, some of them would be: 1. In the .CSS file as :


.myclassA{
 color : red;
}

2. If ur using JQuery:


$(".myclassA").css("color", "blue");

By giving a ID attribute, we can refer/select EXACTLY one element with that ID. Example:


<div id="myDivIdA">first content&lt;/div>
<div id="myDivIdB">second content</div>

Once we have such layout, we can access EXACTLY one div easily, some of them would be: 1. In the .CSS file as :


#myDivIdA{
 color : red;
}

2. If ur using JQuery:


$("#myDivIdB").css("color", "blue");

NOTE:
When accessing, CLASS attributes are prefixed with '.'
and ID attributes are prefixed with '#'

Elements can have both CLASS and ID attributes. So you can can even more flexibility.

jQuery: $("#elementId") != document.getElementById("elementId")

The most natural assumption is that $ in jQuery is equivalent to document.getElementById. But it is NOT !! Took me a while to figure it out.

$("#elementId")!=document.getElementById("elementId")

$("#elementId") method gives a jQuery object that is always an array of Elements.

So to the get the real DOM element you have to use $("#myElementId")[0] or the more readable $("#myElementId").get(0)

jQuery : Execute particular code after the animation effect has completed

If you want to execute particular code after the animation has completed, try the following:


$("#myDivToFade").fadeOut(function() {
 // This code will be executed
 // after the animation is complete
});

Gliding Phenomena