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