Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-22-2008, 03:39 PM   PM User | #1
Ridge
New to the CF scene

 
Join Date: May 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Ridge is an unknown quantity at this point
[JQuery] - Show/hide causing issue

Hi folks,

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:

Code:
$(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."
         }
      }
   });
});
I'm hoping this is a viable option, but it's beyond my limited JQuery expertise.

Thanks in advance!

Last edited by Ridge; 05-22-2008 at 08:56 PM.. Reason: Editing URL to a TinyURL
Ridge is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:57 PM.


Advertisement
Log in to turn off these ads.