Kolak Roy M. schrieb:
> Hello all,
>
>
>
> I am just starting my jquery experience and I ran into a little problem.
>
>
>
> Here is the setup – I have a form that I want to keep hidden until the
> user clicks on a certain spot. Once the user clicks this spot the form
> should show itself with a nice transition. The user can then either
> submit the form or click in the same spot to hide the form.
>
>
>
> Here is the code –
>
> $("#newAnnouncement").click(function(){
>
>
> if(document.getElementById('announcement_form').style.display == "none")
>
> {
>
> $("#announcement_form:hidden").show("slow");
>
> }
>
> else
>
> {
>
>
> $("#announcement_form:visible").hide("slow");
>
> }
>
> });
>
> });
>
>
>
> This works great in FireFox, but in I.E., the form is displayed, but
> with no transition (it is either visible or not)
>
>
>
> Help,
>
> Roy
Hi Roy,
I suggest a little more jquerish style (getting rid of DOM methods and
use jQuery's power):
$("#newAnnouncement").click(function() {
var jqForm = $('#announcement_form');
if (jqForm.is(':hidden')) {
jqForm.show("slow");
} else {
jqForm.hide("slow");
}
});
I'm using the prefix "jq" to indicate that it is an jQuery object.
Michael Geary once proposed to use "$" (like $form), but I found that it
was not so very readable. Anyway, it's just a habit of mine...
Does that work?
PS: If you just need a simple show/hide, you could use toggle and
shorten the code even more:
$("#newAnnouncement").click(function() {
$('#announcement_form').toggle();
});
PPS: To make it unobtrusive and accessible, you could specify the target
in the anchor and get the id out of it:
<a id="newAnnouncement" href="#announcement_form">...</a>
$("#newAnnouncement").click(function() {
var jqForm = $( this.href.split('#')[1] );
...
});
That way it's reusable/enhancable as well...:
$("#newAnnouncement, #otherAnnouncement").click(function() {
var jqForm = $( '#' + this.href.split('#')[1] );
...
});
Ok, that's enough :-)
-- Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
