Wednesday, December 15, 2010

jQuery hasClassName prototypejs function: How to check if element has class with JQuery

To determine if an element has a class register with jQuery you can use the function .hasClass() which is shorter for .hasClassName() in prototypejs



if($('#target').hasClass('foo')){
// Do something
}

// With Prototype js you would use...

if($('target').hasClassName('foo')){
// Do something
}

jQuery check element is visible : How to check if div is visible with jQuery

Unlike Prototypejs where there is a dedicate function .visible() that return true/false when element style is 'none', jQuery has this function .is() to check the value of given properties.


This is how you can determine if an element is visible.



<div id="target" style="display:none"></div>



if( $('#target').is(':visible') ) {
// this element is visible
}
// Check if its hidden
if( $('#target').is(':hidden') ) {
// this element is hidden
}

Tuesday, December 14, 2010

jQuery add class to element: How to add a class to a div

Adding class or removing a css class from an element with jQuery or Prototypejs is very simple.



// With JQuery

$('#target').addClass('bar');

// With Prototypejs...

$('target').addClassName('bar');

// Removing a class with Jquery

$('#target').removeClass('bar');

// With Prototypejs...
$('target').removeClassName('bar');



Once again, jQuery has shorter function names which is awesome!