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