Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Hello everyone,

    I am trying to find out how I can see the #confirmform div when it is placed outside of the main container div of my website. The reason I want to have it outside of the container div is because when a user successfully submits an email at the first input contact form, the rest of the page will be turned gray and inactive while the rest of the contact form content is displayed and active. So far, I can't really figure out why I can't display the content outside of the container div. The container, obviously, holds all of the other page content inside it.

    The end of my home page's markup:
    HTML Code:
    <form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
            <div>
              <input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" maxlength="60"/>
              <input type="submit" id="submit" value="Join" />
            </div>
          </form>
        </div>
        <div id="rightsideend">&nbsp;</div>
      </div><!-- end side windows -->
    </div><!-- end container -->
      <div id="confirmform">
        <form name="form2" id="submissionform" method="post" action="?">
        <div>
          <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
          <input type="text" name="confirmemail" id="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
          <input type="text" name="name" id="name" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
        </div>
        <div>
          <label for="age" class="fixedwidth">Select your age range:</label>
          <select name="age" id="age" class="inputwidth">
             <option selected="selected">18&ndash;35</option>
             <option>36&ndash;55</option>
             <option>55+</option>
             <option>17 or younger</option>
          </select>
        </div>
        <div>
          <label for="country" class="fixedwidth">Select your country:<span>*</span></label>
          <select name="country" id="country" class="inputwidth">
              <option selected="selected">Select Country</option>
              <option>United States</option>
              <option>United Kingdom</option>
              <option>Canada</option>
              <option>Australia</option>
              <option>Russia</option>
              <option>Brazil</option>
              <option>Somewhere else</option>
          </select>
         </div>
         <p id="errormessage">You didn&apos;t enter the same e-mail address!</p>
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>
          <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
        </form>
      </div>
      <div id="status">&nbsp;</div>
    <script type="text/javascript" src="Scripts/jQuery.js"></script>
    <script type="text/javascript" src="Scripts/emailbox.js"></script>
    <script type="text/javascript" src="Scripts/jQuery.blockUI.js"></script>
    </body>
    </html>
    Stylesheet contains some of the following:
    Code:
    @charset "utf-8";
    /* Home Page CSS Document */
    body{
        background:url(bg2.jpg);
        background-position:top center;
        background-color:#999;
        margin:0 auto;
        overflow:auto;
        font-family:"Times New Roman", Times, serif;
    }
    
    #container{
        height:1000px;
        width:1360px;
        overflow:visible;
        margin:0 auto;
        position:relative;
        z-index:7;
        background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent;
    }
    
    #leftside{
        position:absolute;
        top:405px;
        left:98px;
        width:auto;
    }
        #leftsidestart{
            float:left;
            background:url("sidewindowstart.gif");
            width:27px;
            height:250px;
            margin:0;
        }
        #leftsidebody{
            margin:0 auto;
            float:left;
            background:url("sidewindowbody.gif") repeat-x;
            width:240px;
            height:250px;
        }
        #leftsideend{
            float:left;
            background:url("sidewindowend.gif");
            width:16px;
            height:250px;
            margin:0;
        }
    
    #middle{
        width:626px;
        margin:0 auto;
    }
    #rightside{
        width:auto;
        position:absolute;
        top:405px;
        left:980px;
    }
        #rightsidestart{
            background:url("sidewindowstartright.gif");
            float:left;
            width:27px;
            height:250px;
        }
        #rightsidebody{
            background:url("sidewindowbodyright.gif") repeat-x;
            float:left;
            margin:0 auto;
            width:247px;
            height:250px;
            position:relative;
        }
        #rightsideend{
            background:url("sidewindowendright.gif");
            float:right;
            width:15px;
            height:250px;
        }
    
    #confirmform{
        background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
        width:360px;
        height:280px;
        position:absolute;
        display:none;
        top:48%;
        right:37%;
    }
    #submissionform{
        padding:60px 10px 0 20px;
        text-align:left;
        z-index:999;
    }
    .fixedwidth{width:150px; float:left;}
    .inputwidth{width:170px;}
    #submissionform span{color:red;}
    
    .formsubmitbutton{margin-left:50px; margin-top:10px;}
    
    #errormessage{color:red; font-size:12px; font-weight:bold;}
    
    #status{
        background:url("successorfailure.gif");
        width:450px;
        height:100px;
        position:absolute;
        display:none;
        bottom:37%;
        left:33%;
    }
    My website: World Review Group

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    What are you using to call the event that determines when all the fields in the first section are completed.

    At the very least, there should be some JavaScript event or action call ?

    Now,'as a long time usability tester, I have to ask. Why ?

    How many fields or sections do you have for the user to fill in ? I have a reporting system, nothing but problems with users, server time outs, because it had over 40 fields to fill in... On redesign, I broke it up into sections using the first 5 fields to create a DB RECORD, CSS and JavaScript for a TABBED view of the rest. The user, once they create the main record ( first 5 fields ), can take their time entering each section ... Until complete, each section has its own validation, I use JavaScript to do a DB update anytime the user clicks a tab for a different section. No lost data, no server time outs.

  4. #3
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    The problem was that the z-index of #container div was higher than the z-index for the 2nd form div. Thanks for the reply.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com