SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Trying to See 2nd Form Content Outside of the Container Div

    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:
    <!-- more page content above here -->
     <div id="rightside">
        <div id="rightsidestart">&nbsp;</div>
        <div id="rightsidebody">
          <h2 class="sideWindowHeaderText">Not Recommended</h2>
          <ul class="sideWindowLinks">
            <li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
            <li><a href="#">Mobile Mass Media</a></li>
            <li><a href="#">Prorexin</a></li>
          </ul>
          <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>
    The stylesheet:
    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;
    	}
    
    h1{
    	height:206px;
    	width:626px;
    	position:relative;
    	padding:0;
    	margin:0;
    	text-align:center;
    }
    /* mac hide */
    h1{overflow:hidden;}
    /* end hide */
    h1 span{
    	background:url("header.jpg");
    	position:absolute;
    	left:0;
    	top:0;
    	display:block;
    	height:206px;
    	width:626px;
    }
    
    #body{
    	background-image:url(body.jpg);
    	width:626px;
    	text-align: center;
    	margin:0 auto;
    }
    
    #footer{
    	background-image:url(footer.jpg);
    	width:626px;
    	height:30px;
    	text-align: center;
    	margin:0 auto;
    	padding:0;
    }
    
    #welcomestatement{
    	display:block;
    	background-color:#FF9;
    	text-align:left;
    	padding:3px 20px;
    	border-bottom:2px inset #F8CB87;
    	margin:auto;
    	width:400px;
    	position:relative;
    	top:10px;
    	/*for IE*/
    	filter:alpha(opacity=50);
    	/*standard CSS3*/
    	opacity:0.5;
    }
    p#welcomestatement{
    	/*for IE*/
    	filter:alpha(opacity=100);
    	/*standard CSS3*/
    	opacity:1;
    	font-weight:bold;
    }
    
    .sideWindowHeaderText{
    	font-size:18px;
    	color:#000;
    	font-weight:bold;
    	width:200px;
    	padding:1px 0 0 5px;
    	/*text shadow*/
    	text-shadow:0px 0px 6px #009, 2px 0px 12px #066;
    }
    
    #copytagatbottom{
    	font-size:12px;
    	text-align:center;
    	color:#000;
    	display:block;
    	background-color:#FFF;
    	width:200px;
    	margin:0 auto;
    	padding:2px;
    	padding-bottom:4px;
    	border:1px dashed #6B6B6B;
    }
    
    #emailbox{
    	background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
    	height:200px;
    	width:156px;
    	margin:0 0 0 8px;
    	position:absolute;
    	top:96%;
    }
    #go{width:80px; margin-top:165px; margin-left:12px;}
    
    #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%;
    }
    h4{
    	margin:0;
    	padding:8px 10px 1px 12px;
    	text-shadow:1px 1px 1px #090;
    }
    #status p{
    	margin:0;
    	padding:2px 10px 1px 17px;
    }
    
    .sideWindowLinks li{
    	list-style:disc;
    	padding:3px 3px 3px 0;
    	width:auto;
    }
    .sideWindowLinks li a{
    	font-size:14px;
    	font-weight:bold;
    	color:#069;
    }
    .sideWindowLinks a:hover, .sideWindowLinks a:focus, .sideWindowLinks a:active{color:#09C; text-decoration:none;}
    My website: World Review Group


  2. #2
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I guess the solution may be extremely simple, or I've asked too many questions and people don't want to help me anymore. Maybe I can help on other's questions (I'm not exactly a professional, but I'll try my best), and others will, in turn, help me continue to figure things out as I finish developing this website.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,617
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    There isn't a second form on the page you posted.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Right, it's not been uploaded. The reason I didn't upload it is because I've read that it's potentially harmful to a website to upload unfinished PHP/JavaScript files. I guess I can upload the newest index.html file as well as the latest main.css sheet and leave the PHP and JavaScript in my local directory.

    I'm sure I can do only upload those files and the form action referring to "emailtester.php" won't do anything bad to the website.

    It's done. Uploaded.

    ..and more precisely, the div that I am trying to display that contains the 2nd form has an id of confirmform. It's at the bottom of the page.

    I might not need a div for the form. I may be able to do the background, size and width all for the form with the id of submissionform, which is inside the #confirmform div.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,617
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Yeah, this is an HTML/CSS issue, so the HTML form on its own is harmless.

    Quote Originally Posted by etidd View Post
    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.
    It is visible now. So what do you want to "see"? You can style it any way you like. E.g.

    Code:
    #confirmform {background: white;}

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I am able to see the 2nd form when it is inside of the #container div and the user enters a valid e-mail in the first #emailbox form, but it's not there when I move it outside of the container (because I'm going to make everything inside the #container div inactive while the user is interacting with the submission forms)

    Currently, I have these styles (that I'm sure you've already seen) for #confirmform, which is what I want to see.

    Code:
    #confirmform{
    	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    	width:360px;
    	height:280px;
    	position:absolute;
    	/*display:none;   It is still invisible when placed outside of the container if I remove this property */
    	top:48%;
    	right:37%;
    }
    This is a screenshot I manipulated that demonstrates what I'm trying to see.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think it may have to do with my absolute positioning of the div.

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I just found the solution on my own: container had a higher z-index than #confirmform

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,617
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, good. So you're OK now? Live version isn't updated yet. You didn't have pos:abs when I looked.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Unrelated:

    etidd, you might consider the recommendations in this older message:

    http://www.sitepoint.com/forums/show...=1#post5295035

    The site still demands more width than it needs.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    There are a few errors on your page that can be found using the validator.


    The following two lines each contain two instances of the "class" attribute.
    Those classes should be written within one attribute and separated by spaces: class="class1 class2"

    Change Line 397
    Code:
    FROM:
          <input type="text" name="confirmemail" id="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
    TO:
          <input type="text" name="confirmemail" id="confirmemail" class="fixedwidth inputwidth" value="" maxlength="60"/>
    Change Line 399
    Code:
    FROM:
          <input type="text" name="name" id="name" class="fixedwidth"  value="" maxlength="60" class="inputwidth" />
    TO:
          <input type="text" name="name" id="name" class="fixedwidth inputwidth"  value="" maxlength="60"/>

    Line 427 contains an invalid id name. id and class names cannot start with a digit.
    Code:
          <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>

    Line 284 is missing an opening <li> tag which should be added:
    Code:
              <li><a href="businessservices.html" title="Business Services Page">business services</a></li>
              <li>
              	<!-- business services -->
                <div id="bizservices">
                  <ul>

    Line 241 contains a stray </li> tag which should be deleted.





  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

    I have corrected the errors. Valid markup now.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    I think something went awry, etidd. The e-mail form is being displayed below and to the left of the page. Methinks a div was deleted.

    Looks like the div around form2 was deleted.

    <div id="confirmform"> <!-- HELP! I have been deleted! -->
    <form name="form2"
    ...
    ...
    ...
    </div> <!-- HELP! I have been deleted! -->

  14. #14
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm... Yes, it doesn't look right on the live version, even after I uploaded the most recent files (or maybe I'm not seeing the changes yet). It looks right on my local machine.

    I guess that div around the 2nd form is necessary?

    As for the changes you recommended in another previous thread, I'll test them out and see what I come up with. I thought I would have already implemented your suggestions.

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've tried to make it right and uploaded the new files. The form still appears incorrectly on the live version.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    homepagebgwinter.gif is in #container, so reducing the width of #container per my suggestion may not be desirable.

    On the other hand, you can combine bg2.jpg and homepagebgwinter.gif into one image and apply it to the body tag (and no image to the #container div) and have the best of both worlds, so to speak. Something like this...

    homewinterbg.jpg


    I remember that there was a darker gray background image, too, so the above combo might not work for you. Just a thought.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Yes, the mailing list form was not visible until a short while ago. Now it is misplaced on the screen. There is a problem with the way it is positioned.

    Did you make any changes to the CSS or were the only changes to the HTML? Do you have a backup of the HTML? If not, I can attach my copy.

  18. #18
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I had uploaded new files and tested the live version. On the first load, the form displayed in its correct position. Now, it is off in the bottom-left corner, without the form background image, right where it should not be. It was right, and then it's wrong on the live version, while the local version is displaying correctly without issue.

    ...and, no, I didn't save a backup in this case... oh well, that's okay. I haven't exactly been changing it into a totally distorted mess.

  19. #19
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The live version of main.css is different than my local version. I guess I'm waiting on the web host to reflect the changes to see if this issue is solved.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Interesting. How long does it usually take between the time you submit a change and the time it goes live? I upload things directly with ftp (small time). I guess you use a CMS of some kind? Is that the reason for the delay?

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The live version seems to be displaying OK now.

    Two things to do...

    One: think about the background image idea and decide if it will work in your design.

    Two: we need to make that sign-up form visible so we can make sure it is positioned correctly.

    BTW - I clicked on the "Join" button (Join the Mailing List) and went to a "page not found" dead end. Should it display that address form?


    (EDIT: I posted this message in the previous thread. Realized my mistake. Deleted it from the other thread and posted it here.)

  22. #22
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, it should display the address form when a user submits a valid e-mail address, but I've also not uploaded my PHP/JavaScript files because this part is incomplete. I'm also looking for a way to block the rest of the page except for that second form after the user submits an e-mail. I started a thread on that in the JavaScript/jQuery section.

    I also want to apply a gray mask over the entire page except for that second form for when it is active and displayed on the page. I don't know what is an optimal way to accomplish that right now.

    I combined the homepagebgwinter.gif and bg2.jpg so I can have the best of both worlds.

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    I would like to recommend that you move the "submission form" up a few lines on your HTML page. Doing this will make it the last item inside <div id="body"> where it can be more appropriately positioned. Right now, that form is out of place.

    HTML:

    Cut from Line 392 <div id="submissionform"> down through the close </div> on Line 428.

    Paste it above the close </div> on line 350 (immediately below the comment <!-- end wrapping div --> )


    CSS:

    You will need to make a few CSS changes too (Delete the RED, Add the BLUE):

    Code:
    body {
        overflow:auto;
    }
    #container {
        width:1171px;
        height:1010px;        /* CHANGED from 1000px */
        overflow:visible;
        position:relative;
        z-index:7;
        margin:0 auto;
    }
    #body {
        background-image:url(body.jpg);
        width:626px;
        text-align: center;
        position:relative;        /* ADDED */
        margin:0 auto;
    }
    
    #submissionform {
    /*    outline:1px solid magenta;    /* LAYOUT TEST OUTLINE - DELETE when finished */
    /*    display:none;            /* toggled icw #graymask */
        background:url("emailsubmission.gif") no-repeat;
        width:330px;             /* CHANGED from 360px */
        height:220px;            /* CHANGED from 280px */
        position:absolute;
        display:none;
        top:300px;               /* CHANGED from 500px */
        left:130px;              /* CHANGED from right:460px */
        z-index:1;               /* CHANGED from 8 */
        text-align:left;
        padding:60px 10px 0 20px;   /* CHANGED from 60px 10px 0 45px */
    }
    You'll notice that #submissionform is no longer display:none. You can remove the left-most open comment mark to set it back to display:none. I did this so you could see what these changes are doing.

    Let me know if you're game.

    The combined image (last week) works nicely!

  24. #24
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I am definitely down to make these changes, especially if it makes my page more stable across different browsers; however, I am trying to place a black overlay div over the entire body of the page using jQuery, which is triggered by the 1st form being successfully submitted. If I re-arrange the order and place the 2nd form within the body of the page, I think that will make placing the black overlay over everything impossible (correct me if I'm wrong) simply because of the order that it's in.

    That issue is being discussed over here.

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Based on your description in this forum, here's where I'm going with this. It is a "magic" solution that works because your page has a fixed width and height. Ya still need JavaScript to toggle the effect. The gray screen blocks clicks to everything behind the e-mail signup form. Sounds like your requirements might have changed, so maybe I'm off base.

    grayscreen.jpg


Bookmarks

Posting Permissions

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