Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [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 09:56 PM. Reason: Editing URL to a TinyURL


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •