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