Over the last couple of weeks I have been doing alot of work on a UI for client/matter conception application at my work involving javascript and the almight framework jQuery. I have done a couple of posts in relation to jQuery before:
- Subtext Galleries, using jQuery for funk
- Adding a Javascript onClick event to a Radio Button List Item on DataBound
- Adding a Javascript onClick event to a Radio Button List Item on DataBound Pt 2
Also my 1st ever patch to subtext project uses jQuery.
After receiving countless emails about some of the above I thought I would post a couple of articles to outline how jQuery can make any developers life easier. This post is aimed at developers who haven't looked at jQuery before or people who want quick and easy examples. This is a very basic article and I will be going into more depth of the fQuery framework over the next couple of months.
How I am going to do this is show the javascript equivalent and the jQuery statement. Worst case is you walk away from reading this article knowing how to manipulate html elements. If you're doing any manipulation to the dom it's always worth putting in validation to make sure the element exists. Also note that the object that's being passed to the function is the elements Id.
This first part will compare the following:
- Show/Hide an element
- Toggle an element
- Adding a css class to an element
- Removing a css class from an element
- Adding them together
show/hide an element - Javascript
function HideElement(object)
{
document.getElementById(object).style.display = 'none';
}
function ShowElement(object)
{
document.getElementById(object).style.display = 'block';
}
show/hide an element - jQuery
function HideElementjQuery(object)
{
$('#' + object).hide('fast');
}
Usage: <a href="#" onclick="javascript:HideElementjQuery('objectid');">Click Me</a>
function ShowElementjQuery(object)
{
$('#'+ object).show('fast');
}
Usage: <a href="#" onclick="javascript:ShowElementjQuery('objectid');">Click Me</a>
Thoughts on show/hide an element
While both are straight forward you'll notice that on the jQuery functions there is a "show('fast')". jQuery gives the developer options to play with. This can be the speed in which the object is hidden or shown, it can also be the effect you'd like to use when it appears and disappears. More information can be found UI/Effects - jQuery.
Toggle an elements display property - Javascript
function toggleElement(object)
{
if(document.getElementById(object).style.display != 'none')
{
document.getElementById(object).style.display = 'none';
}else{
document.getElementById(object).style.display = '';
}
}
Toggle an elements display property - jQuery
function toggleElementjQuery(object)
{
$('#' + object).slideToggle('slow');
}
Usage: <a href="#" onclick="javascript:toggleElementjQuery('objectid');">Click Me</a>
Thoughts on toggle an elements display property
Straight away you see a reduction in code here. How simple is that. jQuery does the checking for you and dictates what state the object should be in.
Adding a css class to an element - Javascript
function addcssclass(object,cssclass)
{
document.getElementById(object).setAttribute("class",cssclass);//For FF
document.getElementById(object).setAttribute("className",cssclass);//For IE
}
Adding a css class to an element - jQuery
function addcssclassjQuery(object,cssclass)
{
$('#'+object).addClass(cssclass);
}
Usage: <a href="#" onclick="javascript:addcssclassjQuery('objectid','cssclass');">Click Me</a>
Thoughts on adding a class to an element
Again another reduction in code and jQuery takes away the worry of what browser the user is using and adds the class. Another flaw with the javascript code is that if the object had a css class by default then this is removed and the new one assigned. jQuery adds to any css classes that may already be assigned to the object. If we added a method to check for existing css classes and to add our new class then we'd run into may more lines of code that would have to be cross browser compatiable.
Removing a css class from an element - JavaScript
function removecssclass(object,cssclass)
{
document.getElementById(object).removeAttribute("class",cssclass);//For FF
document.getElementById(object).removeAttribute("className",cssclass);//For IE
}
Removing a css class from an element - jQuery
function removecssclassjQuery(object,cssclass)
{
$('#'+object).removeClass(cssclass);
}
Usage: <a href="#" onclick="javascript:removecssclassjQuery('objectid','cssclass');">Click Me</a>
Thoughts on removing a class from an element
As with adding a css class jQuery has taken away the worry of what browser the user is using.
Adding them together
This I am going to add a class while toggling the elements display property.
function ToggleAddClass(object,cssclass)
{
$('#'+ object).slideToggle('slow').addClass(cssclass);
}
Usage: <a href="#" onclick="javascript:ToggleAddClass('objectid','cssclass');">Click Me</a>
function ShowElementRemoveClass(object,cssclass)
{
$('#'+ object).show('fast').removeClass(cssclass);
}
Usage: <a href="#" onclick="javascript:ShowElementRemoveClass('objectid','cssclass');">Click Me</a>
Thoughts on adding them all together
As you can see from the above piece of code all that's needed is to add the effects needed to the object.
Final Thoughts
This post outlines the tip of the iceberg but as you can see one liners can do so much without having to worry about what browser is being used, or having to write long complicated functions. Part will be looking at input Element Manipulation and validation.