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."
> > }
> > }
> > });
>
> > });
