[jQuery] Re: Show/hide toggle hides form too...bah!
Wizzud,
Everything seems to work fine! Your fix did the trick, and the form
(the Home one at least - I haven't set the rest up as yet) submits
perfectly.
Thanks so much!
On May 24, 5:32 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Ok.
> Couple of things.
> I put a 'return false;' at the end of the click handler (sorry - tends
> to be a reflex action!) when it doesn't actually need it. Either shift
> it up to be within the 'if...' statement block, or remove it
> altogether. It prevents focussing on the input element and activating
> the link. eg.
>
> $('div#homepage_boxes> div.col').click(function(event) {
> // only toggle if it was div.col or its H2 that was clicked...
> if ( this==event.target || $(event.target).is('h2') ){
> $(this).siblings('.selected').andSelf().toggleClass('selected');
> return false;
> }
> });
>
> Secondly, you don't have a 'submit' input type : I'm not that clued up
> on validator, but I can see that you set a submit handler (to
> alert(...)) but without a 'submit' type to attach it to, or a
> specified replacement, I can't see what will handle clicking on the Go
> apart from the div.col handler.
> Basically I can only see one click handler - the div.col one - for
> handling *any* click on *any* element within div.col, so if you want
> to catch the form submission you probably need to add some other
> handler somewhere.
>
> On May 24, 2:17 am, Ridge <[EMAIL PROTECTED]> wrote:
>
> > Oooh SO close Wizzud! Followed your instructions carefully, and set
> > the height of the form equal to the height of div.col.
>
> > The forms now toggle correctly, stay on when the user is inputting
> > their zip, BUT (taking For Your Home, for example) doesn't submit when
> > the Go button is clicked. It also doesn't produce a form validation
> > error message when nothing is clicked. But weirdly, if you enter less
> > than 5 digits and hit Go, it DOES error check. Also, the "Get access
> > to your account" link below doesn't work. Any ideas?
>
> > Nearly there, and thank you so much to all of you for your help!
>
> > On May 23, 7:00 pm, Wizzud <[EMAIL PROTECTED]> wrote:
>
> > > $('div#homepage_boxes> div.col').click(function(event) {
> > > // only toggle if it was div.col or its H2 that was clicked...
> > > if ( this==event.target || $(event.target).is('h2') ){
> > > $(this).siblings('.selected').andSelf().toggleClass('selected');
> > > }
> > > return false;
> > > });
>
> > > And you should ensure that your form covers div.col entirely.
>
> > > On May 23, 5:29 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > > > Karl, thanks.
>
> > > > I modifed your line slightly to give it the same specificity as the
> > > > preceding declaration (it wasn't working at all when it was just
> > > > 'form'), and now the form isn't appearing at all on click!
>
> > > > Here's the whole section:
>
> > > > // Show/hide forms
> > > > $('div#homepage_boxes form').hide();
> > > > $('div#homepage_boxes> div.col').click(function(event) {
> > > > var $tgt = $(event.target);
> > > > if (!$tgt.is('div#homepage_boxes form')) { //don't
> > > > toggle when
> > > > clicking the form!
> > > > $
>
> > > > (this).siblings('.selected').andSelf().toggleClass('selected').end().end();
> > > > }
> > > > });
>
> > > > I may be getting my selectors confused. Oh, honestly I don't know what
> > > > I'm doing wrong at this point...!
>
> > > > On May 23, 10:24 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > > > > This line:
>
> > > > > >if ($tgt.not('form')) { //don't toggle when clicking the
> > > > > > form!
>
> > > > > should be :
>
> > > > > if (!$tgt.is('form')) { //don't toggle when clicking the form!
>
> > > > > The first always returns the jQuery object, so it's always "truthy."
>
> > > > > The second returns a boolean. Will be true if the target element is
> > > > > not a form.
>
> > > > > --Karl
> > > > > _
> > > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > > > > On May 23, 2008, at 10:27 AM, Ridge wrote:
>
> > > > > > Hm. Replaced my code with yours, and it's still toggling the form
> > > > > > when
> > > > > > its clicked. :(
>
> > > > > > On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> > > > > >> You need to have your event handler handle things differently
> > > > > >> depending upon the specific child element that was clicked.
>
> > > > > >> For example:
>
> > > > > >> $('div#homepage_boxes> div.col').click(function(event) {
> > > > > >>var $tgt = $(event.target);
> > > > > >>if ($tgt.not('form')) { //don't toggle when clicking the
> > > > > >> form!
> > > > > >>$
> > > > > >> (this
> > > > > >> ).siblings
> > > > > >> ('.selected').andSelf().toggleClass('selected').end().end();
> > > > > >>}
>
> > > > > >> });
>
> > > > > >> Seehttp://www.learningjquery.com/2008/03/working-with-events-par
[jQuery] Re: Show/hide toggle hides form too...bah!
Ok.
Couple of things.
I put a 'return false;' at the end of the click handler (sorry - tends
to be a reflex action!) when it doesn't actually need it. Either shift
it up to be within the 'if...' statement block, or remove it
altogether. It prevents focussing on the input element and activating
the link. eg.
$('div#homepage_boxes> div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
return false;
}
});
Secondly, you don't have a 'submit' input type : I'm not that clued up
on validator, but I can see that you set a submit handler (to
alert(...)) but without a 'submit' type to attach it to, or a
specified replacement, I can't see what will handle clicking on the Go
apart from the div.col handler.
Basically I can only see one click handler - the div.col one - for
handling *any* click on *any* element within div.col, so if you want
to catch the form submission you probably need to add some other
handler somewhere.
On May 24, 2:17 am, Ridge <[EMAIL PROTECTED]> wrote:
> Oooh SO close Wizzud! Followed your instructions carefully, and set
> the height of the form equal to the height of div.col.
>
> The forms now toggle correctly, stay on when the user is inputting
> their zip, BUT (taking For Your Home, for example) doesn't submit when
> the Go button is clicked. It also doesn't produce a form validation
> error message when nothing is clicked. But weirdly, if you enter less
> than 5 digits and hit Go, it DOES error check. Also, the "Get access
> to your account" link below doesn't work. Any ideas?
>
> Nearly there, and thank you so much to all of you for your help!
>
> On May 23, 7:00 pm, Wizzud <[EMAIL PROTECTED]> wrote:
>
> > $('div#homepage_boxes> div.col').click(function(event) {
> > // only toggle if it was div.col or its H2 that was clicked...
> > if ( this==event.target || $(event.target).is('h2') ){
> > $(this).siblings('.selected').andSelf().toggleClass('selected');
> > }
> > return false;
> > });
>
> > And you should ensure that your form covers div.col entirely.
>
> > On May 23, 5:29 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > > Karl, thanks.
>
> > > I modifed your line slightly to give it the same specificity as the
> > > preceding declaration (it wasn't working at all when it was just
> > > 'form'), and now the form isn't appearing at all on click!
>
> > > Here's the whole section:
>
> > > // Show/hide forms
> > > $('div#homepage_boxes form').hide();
> > > $('div#homepage_boxes> div.col').click(function(event) {
> > > var $tgt = $(event.target);
> > > if (!$tgt.is('div#homepage_boxes form')) { //don't toggle
> > > when
> > > clicking the form!
> > > $
>
> > > (this).siblings('.selected').andSelf().toggleClass('selected').end().end();
> > > }
> > > });
>
> > > I may be getting my selectors confused. Oh, honestly I don't know what
> > > I'm doing wrong at this point...!
>
> > > On May 23, 10:24 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > > > This line:
>
> > > > >if ($tgt.not('form')) { //don't toggle when clicking the form!
>
> > > > should be :
>
> > > > if (!$tgt.is('form')) { //don't toggle when clicking the form!
>
> > > > The first always returns the jQuery object, so it's always "truthy."
>
> > > > The second returns a boolean. Will be true if the target element is
> > > > not a form.
>
> > > > --Karl
> > > > _
> > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > > > On May 23, 2008, at 10:27 AM, Ridge wrote:
>
> > > > > Hm. Replaced my code with yours, and it's still toggling the form when
> > > > > its clicked. :(
>
> > > > > On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> > > > >> You need to have your event handler handle things differently
> > > > >> depending upon the specific child element that was clicked.
>
> > > > >> For example:
>
> > > > >> $('div#homepage_boxes> div.col').click(function(event) {
> > > > >>var $tgt = $(event.target);
> > > > >>if ($tgt.not('form')) { //don't toggle when clicking the form!
> > > > >>$
> > > > >> (this
> > > > >> ).siblings
> > > > >> ('.selected').andSelf().toggleClass('selected').end().end();
> > > > >>}
>
> > > > >> });
>
> > > > >> Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
> > > > >> for more complete coverage of this. It's where I learned it. :)
>
> > > > >> ~Pyro
> > > > >> On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > > > >>> I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> > > > >>> few things - :hover on the main content blocks, form validation, and
> > > > >>> show/hide.
>
> > > > >>> By themselves, everything is working great! But it's the
> > > > >>> interoperability of
[jQuery] Re: Show/hide toggle hides form too...bah!
Oooh SO close Wizzud! Followed your instructions carefully, and set
the height of the form equal to the height of div.col.
The forms now toggle correctly, stay on when the user is inputting
their zip, BUT (taking For Your Home, for example) doesn't submit when
the Go button is clicked. It also doesn't produce a form validation
error message when nothing is clicked. But weirdly, if you enter less
than 5 digits and hit Go, it DOES error check. Also, the "Get access
to your account" link below doesn't work. Any ideas?
Nearly there, and thank you so much to all of you for your help!
On May 23, 7:00 pm, Wizzud <[EMAIL PROTECTED]> wrote:
> $('div#homepage_boxes> div.col').click(function(event) {
> // only toggle if it was div.col or its H2 that was clicked...
> if ( this==event.target || $(event.target).is('h2') ){
> $(this).siblings('.selected').andSelf().toggleClass('selected');
> }
> return false;
> });
>
> And you should ensure that your form covers div.col entirely.
>
> On May 23, 5:29 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > Karl, thanks.
>
> > I modifed your line slightly to give it the same specificity as the
> > preceding declaration (it wasn't working at all when it was just
> > 'form'), and now the form isn't appearing at all on click!
>
> > Here's the whole section:
>
> > // Show/hide forms
> > $('div#homepage_boxes form').hide();
> > $('div#homepage_boxes> div.col').click(function(event) {
> > var $tgt = $(event.target);
> > if (!$tgt.is('div#homepage_boxes form')) { //don't toggle
> > when
> > clicking the form!
> > $
>
> > (this).siblings('.selected').andSelf().toggleClass('selected').end().end();
> > }
> > });
>
> > I may be getting my selectors confused. Oh, honestly I don't know what
> > I'm doing wrong at this point...!
>
> > On May 23, 10:24 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > > This line:
>
> > > >if ($tgt.not('form')) { //don't toggle when clicking the form!
>
> > > should be :
>
> > > if (!$tgt.is('form')) { //don't toggle when clicking the form!
>
> > > The first always returns the jQuery object, so it's always "truthy."
>
> > > The second returns a boolean. Will be true if the target element is
> > > not a form.
>
> > > --Karl
> > > _
> > > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > > On May 23, 2008, at 10:27 AM, Ridge wrote:
>
> > > > Hm. Replaced my code with yours, and it's still toggling the form when
> > > > its clicked. :(
>
> > > > On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> > > >> You need to have your event handler handle things differently
> > > >> depending upon the specific child element that was clicked.
>
> > > >> For example:
>
> > > >> $('div#homepage_boxes> div.col').click(function(event) {
> > > >>var $tgt = $(event.target);
> > > >>if ($tgt.not('form')) { //don't toggle when clicking the form!
> > > >>$
> > > >> (this
> > > >> ).siblings
> > > >> ('.selected').andSelf().toggleClass('selected').end().end();
> > > >>}
>
> > > >> });
>
> > > >> Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
> > > >> for more complete coverage of this. It's where I learned it. :)
>
> > > >> ~Pyro
> > > >> On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > > >>> I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> > > >>> few things - :hover on the main content blocks, form validation, and
> > > >>> show/hide.
>
> > > >>> By themselves, everything is working great! But it's the
> > > >>> interoperability of the last two that are causing me a headache.
> > > >>> When
> > > >>> you click anywhere in the "For your home" box, the content appears.
> > > >>> There's a form in that . However, when you try to focus in that
> > > >>> by clicking, the form hides.
>
> > > >>> So, what I'd like to know is how to show the contents by
> > > >>> clicking anywhere in the , but only hide it by clicking on the
> > > >>> header (which I've temporarily given a background color of green to
> > > >>> make it stand out).
>
> > > >>> For reference, here's the contents of my $(document).ready section
> > > >>> which is linked from the page above. Thanks!:
>
> > > >>> $(document).ready(function(){
>
> > > >>> // Add class to shift background images on load
> > > >>> $('#box_home').addClass('pageload');
> > > >>> $('#box_business').addClass('pageload');
> > > >>> $('#box_account').addClass('pageload');
>
> > > >>> // Show/hide forms
> > > >>> $('div#homepage_boxes form').hide();
> > > >>> $('div#homepage_boxes> div.col').click(function() {
> > > >>> $
> > > >>> (this
> > > >>> ).siblings
> > > >>> ('.selected').andSelf().toggleClass('selected').end().end()
> > > >>> //.next('form').slideToggle('fast')
> > > >>> //.siblings('form:visible').slideUp('fast');
> > > >>> });
>
> > > >>> // Add
[jQuery] Re: Show/hide toggle hides form too...bah!
$('div#homepage_boxes> div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge <[EMAIL PROTECTED]> wrote:
> Karl, thanks.
>
> I modifed your line slightly to give it the same specificity as the
> preceding declaration (it wasn't working at all when it was just
> 'form'), and now the form isn't appearing at all on click!
>
> Here's the whole section:
>
> // Show/hide forms
> $('div#homepage_boxes form').hide();
> $('div#homepage_boxes> div.col').click(function(event) {
> var $tgt = $(event.target);
> if (!$tgt.is('div#homepage_boxes form')) { //don't toggle when
> clicking the form!
> $
>
> (this).siblings('.selected').andSelf().toggleClass('selected').end().end();
> }
> });
>
> I may be getting my selectors confused. Oh, honestly I don't know what
> I'm doing wrong at this point...!
>
> On May 23, 10:24 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > This line:
>
> > >if ($tgt.not('form')) { //don't toggle when clicking the form!
>
> > should be :
>
> > if (!$tgt.is('form')) { //don't toggle when clicking the form!
>
> > The first always returns the jQuery object, so it's always "truthy."
>
> > The second returns a boolean. Will be true if the target element is
> > not a form.
>
> > --Karl
> > _
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On May 23, 2008, at 10:27 AM, Ridge wrote:
>
> > > Hm. Replaced my code with yours, and it's still toggling the form when
> > > its clicked. :(
>
> > > On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> > >> You need to have your event handler handle things differently
> > >> depending upon the specific child element that was clicked.
>
> > >> For example:
>
> > >> $('div#homepage_boxes> div.col').click(function(event) {
> > >>var $tgt = $(event.target);
> > >>if ($tgt.not('form')) { //don't toggle when clicking the form!
> > >>$
> > >> (this
> > >> ).siblings
> > >> ('.selected').andSelf().toggleClass('selected').end().end();
> > >>}
>
> > >> });
>
> > >> Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
> > >> for more complete coverage of this. It's where I learned it. :)
>
> > >> ~Pyro
> > >> On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > >>> I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> > >>> few things - :hover on the main content blocks, form validation, and
> > >>> show/hide.
>
> > >>> By themselves, everything is working great! But it's the
> > >>> interoperability of the last two that are causing me a headache.
> > >>> When
> > >>> you click anywhere in the "For your home" box, the content appears.
> > >>> There's a form in that . However, when you try to focus in that
> > >>> by clicking, the form hides.
>
> > >>> So, what I'd like to know is how to show the contents by
> > >>> clicking anywhere in the , but only hide it by clicking on the
> > >>> header (which I've temporarily given a background color of green to
> > >>> make it stand out).
>
> > >>> For reference, here's the contents of my $(document).ready section
> > >>> which is linked from the page above. Thanks!:
>
> > >>> $(document).ready(function(){
>
> > >>> // Add class to shift background images on load
> > >>> $('#box_home').addClass('pageload');
> > >>> $('#box_business').addClass('pageload');
> > >>> $('#box_account').addClass('pageload');
>
> > >>> // Show/hide forms
> > >>> $('div#homepage_boxes form').hide();
> > >>> $('div#homepage_boxes> div.col').click(function() {
> > >>> $
> > >>> (this
> > >>> ).siblings
> > >>> ('.selected').andSelf().toggleClass('selected').end().end()
> > >>> //.next('form').slideToggle('fast')
> > >>> //.siblings('form:visible').slideUp('fast');
> > >>> });
>
> > >>> // Add homepage box hover effect for IE6
> > >>> $('div#homepage_boxes .col').hover(function() {
> > >>> $(this).addClass('ie6boxhover');
> > >>> }, function() {
> > >>> $(this).removeClass('ie6boxhover');
> > >>> });
>
> > >>> // Form validation
> > >>> $.validator.setDefaults({
> > >>> submitHandler: function() { alert("submitted!"); }
> > >>> });
>
> > >>> $("#homeform").validate({
> > >>> rules: {
> > >>> txtZipcode: {
> > >>>required: true,
> > >>>minlength: 5
> > >>> }
> > >>> },
> > >>> messages: {
> > >>> txtZipcode: {
> > >>>required: "To continue processing your request, we need a
> > >>> 5-digit zip code. Please re-type the zip code of your service
> > >>> address.",
> > >>>minlength: "Your zip co
[jQuery] Re: Show/hide toggle hides form too...bah!
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes> div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> This line:
>
> >if ($tgt.not('form')) { //don't toggle when clicking the form!
>
> should be :
>
> if (!$tgt.is('form')) { //don't toggle when clicking the form!
>
> The first always returns the jQuery object, so it's always "truthy."
>
> The second returns a boolean. Will be true if the target element is
> not a form.
>
> --Karl
> _
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On May 23, 2008, at 10:27 AM, Ridge wrote:
>
>
>
> > Hm. Replaced my code with yours, and it's still toggling the form when
> > its clicked. :(
>
> > On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> >> You need to have your event handler handle things differently
> >> depending upon the specific child element that was clicked.
>
> >> For example:
>
> >> $('div#homepage_boxes> div.col').click(function(event) {
> >>var $tgt = $(event.target);
> >>if ($tgt.not('form')) { //don't toggle when clicking the form!
> >>$
> >> (this
> >> ).siblings
> >> ('.selected').andSelf().toggleClass('selected').end().end();
> >>}
>
> >> });
>
> >> Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
> >> for more complete coverage of this. It's where I learned it. :)
>
> >> ~Pyro
> >> On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> >>> I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> >>> few things - :hover on the main content blocks, form validation, and
> >>> show/hide.
>
> >>> By themselves, everything is working great! But it's the
> >>> interoperability of the last two that are causing me a headache.
> >>> When
> >>> you click anywhere in the "For your home" box, the content appears.
> >>> There's a form in that . However, when you try to focus in that
> >>> by clicking, the form hides.
>
> >>> So, what I'd like to know is how to show the contents by
> >>> clicking anywhere in the , but only hide it by clicking on the
> >>> header (which I've temporarily given a background color of green to
> >>> make it stand out).
>
> >>> For reference, here's the contents of my $(document).ready section
> >>> which is linked from the page above. Thanks!:
>
> >>> $(document).ready(function(){
>
> >>> // Add class to shift background images on load
> >>> $('#box_home').addClass('pageload');
> >>> $('#box_business').addClass('pageload');
> >>> $('#box_account').addClass('pageload');
>
> >>> // Show/hide forms
> >>> $('div#homepage_boxes form').hide();
> >>> $('div#homepage_boxes> div.col').click(function() {
> >>> $
> >>> (this
> >>> ).siblings
> >>> ('.selected').andSelf().toggleClass('selected').end().end()
> >>> //.next('form').slideToggle('fast')
> >>> //.siblings('form:visible').slideUp('fast');
> >>> });
>
> >>> // Add homepage box hover effect for IE6
> >>> $('div#homepage_boxes .col').hover(function() {
> >>> $(this).addClass('ie6boxhover');
> >>> }, function() {
> >>> $(this).removeClass('ie6boxhover');
> >>> });
>
> >>> // Form validation
> >>> $.validator.setDefaults({
> >>> submitHandler: function() { alert("submitted!"); }
> >>> });
>
> >>> $("#homeform").validate({
> >>> rules: {
> >>> txtZipcode: {
> >>>required: true,
> >>>minlength: 5
> >>> }
> >>> },
> >>> messages: {
> >>> txtZipcode: {
> >>>required: "To continue processing your request, we need a
> >>> 5-digit zip code. Please re-type the zip code of your service
> >>> address.",
> >>>minlength: "Your zip code must be 5-digits long. Please
> >>> re-
> >>> type the zip code of your service address."
> >>> }
> >>> }
> >>> });
>
> >>> });
[jQuery] Re: Show/hide toggle hides form too...bah!
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always "truthy."
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes> div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the "For your home" box, the content appears.
There's a form in that . However, when you try to focus in that
by clicking, the form hides.
So, what I'd like to know is how to show the contents by
clicking anywhere in the , but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes> div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$("#homeform").validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: "To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.",
minlength: "Your zip code must be 5-digits long. Please
re-
type the zip code of your service address."
}
}
});
});
[jQuery] Re: Show/hide toggle hides form too...bah!
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus <[EMAIL PROTECTED]> wrote:
> You need to have your event handler handle things differently
> depending upon the specific child element that was clicked.
>
> For example:
>
> $('div#homepage_boxes> div.col').click(function(event) {
> var $tgt = $(event.target);
> if ($tgt.not('form')) { //don't toggle when clicking the form!
> $
> (this).siblings('.selected').andSelf().toggleClass('selected').end().end();
> }
>
> });
>
> Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
> for more complete coverage of this. It's where I learned it. :)
>
> ~Pyro
> On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
>
> > I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> > few things - :hover on the main content blocks, form validation, and
> > show/hide.
>
> > By themselves, everything is working great! But it's the
> > interoperability of the last two that are causing me a headache. When
> > you click anywhere in the "For your home" box, the content appears.
> > There's a form in that . However, when you try to focus in that
> > by clicking, the form hides.
>
> > So, what I'd like to know is how to show the contents by
> > clicking anywhere in the , but only hide it by clicking on the
> > header (which I've temporarily given a background color of green to
> > make it stand out).
>
> > For reference, here's the contents of my $(document).ready section
> > which is linked from the page above. Thanks!:
>
> > $(document).ready(function(){
>
> >// Add class to shift background images on load
> >$('#box_home').addClass('pageload');
> >$('#box_business').addClass('pageload');
> >$('#box_account').addClass('pageload');
>
> >// Show/hide forms
> >$('div#homepage_boxes form').hide();
> >$('div#homepage_boxes> div.col').click(function() {
> > $
> > (this).siblings('.selected').andSelf().toggleClass('selected').end().end()
> > //.next('form').slideToggle('fast')
> > //.siblings('form:visible').slideUp('fast');
> >});
>
> >// Add homepage box hover effect for IE6
> >$('div#homepage_boxes .col').hover(function() {
> > $(this).addClass('ie6boxhover');
> >}, function() {
> > $(this).removeClass('ie6boxhover');
> >});
>
> >// Form validation
> >$.validator.setDefaults({
> > submitHandler: function() { alert("submitted!"); }
> >});
>
> >$("#homeform").validate({
> > rules: {
> > txtZipcode: {
> > required: true,
> > minlength: 5
> > }
> > },
> > messages: {
> > txtZipcode: {
> > required: "To continue processing your request, we need a
> > 5-digit zip code. Please re-type the zip code of your service
> > address.",
> > minlength: "Your zip code must be 5-digits long. Please re-
> > type the zip code of your service address."
> > }
> > }
> >});
>
> > });
[jQuery] Re: Show/hide toggle hides form too...bah!
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes> div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
See http://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote:
> I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
> few things - :hover on the main content blocks, form validation, and
> show/hide.
>
> By themselves, everything is working great! But it's the
> interoperability of the last two that are causing me a headache. When
> you click anywhere in the "For your home" box, the content appears.
> There's a form in that . However, when you try to focus in that
> by clicking, the form hides.
>
> So, what I'd like to know is how to show the contents by
> clicking anywhere in the , but only hide it by clicking on the
> header (which I've temporarily given a background color of green to
> make it stand out).
>
> For reference, here's the contents of my $(document).ready section
> which is linked from the page above. Thanks!:
>
> $(document).ready(function(){
>
> // Add class to shift background images on load
> $('#box_home').addClass('pageload');
> $('#box_business').addClass('pageload');
> $('#box_account').addClass('pageload');
>
> // Show/hide forms
> $('div#homepage_boxes form').hide();
> $('div#homepage_boxes> div.col').click(function() {
> $
> (this).siblings('.selected').andSelf().toggleClass('selected').end().end()
> //.next('form').slideToggle('fast')
> //.siblings('form:visible').slideUp('fast');
> });
>
> // Add homepage box hover effect for IE6
> $('div#homepage_boxes .col').hover(function() {
> $(this).addClass('ie6boxhover');
> }, function() {
> $(this).removeClass('ie6boxhover');
> });
>
> // Form validation
> $.validator.setDefaults({
> submitHandler: function() { alert("submitted!"); }
> });
>
> $("#homeform").validate({
> rules: {
> txtZipcode: {
> required: true,
> minlength: 5
> }
> },
> messages: {
> txtZipcode: {
> required: "To continue processing your request, we need a
> 5-digit zip code. Please re-type the zip code of your service
> address.",
> minlength: "Your zip code must be 5-digits long. Please re-
> type the zip code of your service address."
> }
> }
> });
>
> });
