How to override jquery's show() and hide() functions
- by Max Williams
hi all
Short version of question: see title
Long version of question:
I've used jquery's show() and hide() functions extensively in my code and just encountered a bit of a problem: they work by changing the display attribute of the element to 'block' or 'none' respectively, so that if you have somethin that has display: inline and then hide and show it, you've changed its display to block, which screws up the layout in a couple of cases.
In my code, whenever i want something to be hidden initially i give it a class 'hidden'. This class is simply {display: none}. I'd like the change show and hide to remove or add this class, instead of directly changing the display attribute, so that if you add the hidden class and then remove it again (ie hide and show something) then it's back to exactly how it was to start off with (since adding a class overrides the attributes rather than directly changing them). Something like this (this is a little pseucodey as i don't know how to set the function up properly - let's assume that 'this' is the object that show/hide was called on)
function show(){
this.removeClass("hidden");
}
function hide(){
this.addClass("hidden");
}
how and where would i go about overriding the jquery methods? (I'm not a javascript expert)
thanks - max
