Sometimes while using jquery we need to get the javascript object of a dom element to call javascript functions on them.
For eg suppose we want to find the scrollHeight of a div. In case this div is given an id then it can be very easily done using
var divObj = document.getElementById(”myid”);
var sH = divObj.scrollHeight;
but what if we want to find the scrollHeight of tbody element inside a table inside the div#myid
in jquery we traverse it using $(”#myid>table>tbody”)
var sH = $(”#myid>table>tbody”)[0].scrollHeight;
This will return us the 1st element of the array. If there is only one such tbody, it will give us the required Object to call the function
Tags: javascript, jquery
Posted in tricks on July 8th, 2010 by vineet>
In php to determine if a certain variable is set we use the function,
isset($variable)
it returns a boolean value.
To do the same thing in javascript, use the following condition,
if(typeof variable != ‘undefined’){
alert(’This variable is not defined yet’);
}
else {
alert(’The variable is defined’);
}
Tags: javascript, kodetricks
Posted in tricks on June 25th, 2010 by vineet>
Paste the following code in your [head] section and firebug will run in any browser :
[script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'] [/script]
Replace [] with <> accordingly
Tags: Firebug, javascript, UI
Posted in tricks on June 24th, 2010 by kiran>
Many times we use jquery’s .serializeArray function to send form field values by $.post or $.ajax methods. Suppose we want to send some other data besides serialized form data, it can be done by pushing additional objects into the array returned by .serializeArray as follows
var data = $(”#my-form”).serializeArray();
data.push({ ‘name’:'category_id’ , ‘value’:this.categoryId });
data.push({ ‘name’:'entity_id’, ‘value’:this.entityId });
the elements returned by serializeArray are objects with properties ‘name’ and ‘value’ .. Once the post request is sent these can be accessed on the server side as $_POST['category_id'] and $_POST['entity_id'] just like the other parameters.
This method is better over hidden input field method particularly when dynamic values are needed to be set to the hidden form fields using javascript.
Tags: javascript, jquery
Posted in tricks on June 16th, 2010 by vineet>
Unfortunately JQuery doesn’t have function to toggle text of a given element 
. But here is a trick by which you can add toggleText function to your jQuery.
jQuery.fn.toggleText = function(a, b) {
return this.each(function() {
jQuery(this).text(jQuery(this).text() == a ? b : a);
});
};
code:
$(element).toggleText('Preview','Back');
Tags: javascript, jquery
Posted in tricks on June 15th, 2010 by jimy>
If you want to add a relatively large chunk of html code to the DOM using javascript, and if you find it annoying to write the markup as a string in js, here is a simple trick!
write the mark up normally in the html and use inline display:none to hide it
[html]
[html]
now in js (using jquery)
//for inserting dynamic html, insert all the required values in the dummy div first and then assign the inner content to a variable
$(”.htmltoadd>p”).html(’Hello World’);
var myhtml = $(”.htmltoadd”).html();
$(”#required-container”).html(myhtml’);
Tags: html, javascript, jquery
Posted in tricks on May 27th, 2010 by vineet>
To attach a callback function in js :
function test(callback){
//some code for test function
if(callback && typeof callback == ‘function’){
callback.call();
}
}
test(doendtest);
The endtest function will execute after the test function .
Tags: javascript
Posted in tricks on May 21st, 2010 by admin>
suppose there are 2 buttons with id’s of “test” and “test4″
we want to bind the function with name as “getmember” on click of “test” and mouseout of “test4″ then
$(’#test’)['click'](getmember);
$(’#test4′)['mouseout'](getmember);
Hope this is useful 
Tags: javascript, jquery
Posted in tricks on April 4th, 2010 by karan>
To use jquery ui draggable on dom elements that will be added to the doc later, the initialization can be done on its mouseover event by using .live() method of jquery
as in
$(”#newdiv”).live(’mouseover’,function(){
$(this).draggable({
stop: function(){
//do something
}
});
});
Tags: javascript, jquery
Posted in tricks on March 16th, 2010 by naikvin>
if($(’element:visible’).length < 1){
alert(’Element is In Visible’);
}
else{
alert(’Element is Visible’);
}
Tags: javascript
Posted in tricks on February 12th, 2010 by jimy>
