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 <div>. However, when you try to focus in that
> >>> <div> by clicking, the form hides.
>
> >>> So, what I'd like to know is how to show the <div> contents by
> >>> clicking anywhere in the <div>, 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."
> >>> }
> >>> }
> >>> });
>
> >>> });
