Tuesday, March 15, 2011

javascript attributes

I was trying to find a way to make an image grow big and then small each time you click on it. I used these functions

function open_enlarge(plan){
$('#'+plan).addClass('largemap');
$('#'+plan).removeClass('smallmap');
document.getElementById(plan).setAttribute('onclick', 'close_enlarge("'+plan+'");');
$('#addjob_floorplan').attr('onclick', 'close_enlarge("addjob_floorplan")');
}

function close_enlarge(plan){
$('#'+plan).removeClass('largemap');
$('#'+plan).addClass('smallmap');
document.getElementById(plan).setAttribute('onclick', 'open_enlarge("'+plan+'");');
$('#addjob_floorplan').attr('onclick', 'open_enlarge("addjob_floorplan")');
}

Then it didn't work in internet explorer so I decided to go with a simpler way with jQuery with only 1 function call toggling 2 classes back and forth instead of having to change the onclick event and having to make it different for Internet explorer 7:

function open_enlarge(plan){
$('#'+plan).toggleClass('largemap','smallmap')
}

No comments: