SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with jquery overlay popup box

    I'm having problems with a jquery overlay box. It works with a little bit of content in the overlay box, but I have a long form that is getting cut off at the top and bottom. Is this just too much info for a overlay box? I also attached a folder with the files.
    Thanks ,
    - Aaron

    here is the js
    Code:
    <script language="javascript">
    
    function showOverlayBox() {
    	//if box is not set to open then don't do anything
    	if( isOpen == false ) return;
    	// set the properties of the overlay box, the left and top positions
    	$('.overlayBox').css({
    		display:'block',
    		left:( $(window).width() - $('.overlayBox').width() )/2,
    		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
    		position:'absolute'
    	});
    	// set the window background for the overlay. i.e the body becomes darker
    	$('.bgCover').css({
    		display:'block',
    		width: $(window).width(),
    		height:$(window).height(),
    	});
    }
    function doOverlayOpen() {
    	//set status to open
    	isOpen = true;
    	showOverlayBox();
    	$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
    	// dont follow the link : so return false.
    	return false;
    }
    function doOverlayClose() {
    	//set status to closed
    	isOpen = false;
    	$('.overlayBox').css( 'display', 'none' );
    	// now animate the background to fade out to opacity 0
    	// and then hide it after the animation is complete.
    	$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
    }
    // if window is resized then reposition the overlay box
    $(window).bind('resize',showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('a.launchLink').click( doOverlayOpen );
    // close it when closeLink is clicked
    $('a.closeLink').click( doOverlayClose );
    
    </script>
    Here is my html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OverlayBox</title>
    
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <!--script language="javascript" src="jquery-ui-personalized-1.6rc2.packed.js"></script-->
    
    <link rel="stylesheet" media="screen" href="css/form.css" >
    
    <style type="text/css">
    
    .bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
    .overlayBox {
    	/*border:5px solid #09F;*/
    	position:absolute;
    	display:none;
    	width:800px;
    
    	margin:0px auto;
    	background-color:#fff;
    	/*height:3000px;*/
    	
    }
    .overlayContent {
    	padding:100px;
    }
    .closeLink {
    	float:right;
    	color:white;
    }
    a:hover { text-decoration:none; }
    
    h2 {
    	padding:5px;
    	margin:0;
    }
    </style>
    </head>
    <body>
    
    
    <!-- normal page content would be here -->
    
    <!-- this is the overlay box -->
    <div class="bgCover">&nbsp;</div>
    <div class="overlayBox">
    	<div class="overlayContent">
            <a href="#" class="closeLink">X</a>
            
    
        <form class="contact_form" action="scripts/procProjectForm.php" method="post" name="contact_form" enctype="multipart/form-data">
    
        <input type="hidden" name="uploadtoken" value="<?= $upload_token ?>" />
        <input type="hidden" name="callback" value="<?= $callback_url ?>" />
    
        <ul>
            <li>
                 <h2>Start A Project</h2>
                 <span class="required_notification">* Denotes Required Field</span>
            </li>
    
            <li>
                <label for="project_title">Project Title:</label>
                <input type="text"  name="project_title" placeholder="Project Title" required />
                <span class="form_hint">Enter a title for new project</span>
            </li>
    
            <li>
                <label for="city">City:</label>
                <input type="text" name="city"  placeholder="city" required />
                <span class="form_hint">Enter city where project will be based out of. </span>
            </li>
    
            <li>
                <label for="state">State:</label>
                <input type="text" name="state"  placeholder="state" required />
                <span class="form_hint">Enter state where project will be based out of. </span>
            </li>
    
            <li>
                <label for="zip">Zip Code:</label>
                <input type="text" name="zip"  placeholder="zip" required />
                <span class="form_hint">Enter zip code where project will be based out of. </span>
            </li>
    
            <li>
                <label for="status">Project Status:</label>
                  <select name='status' >
                      <option value="1">Development</option>
                      <option value="2">Pre-Production</option>
                      <option value="3">In-Production</option>
                      <option value="4">Post-Production</option>
                      <option value="5">Completed</option>
                   </select>
                <span class="form_hint">Select project Status. </span>
            </li>
    
            <li>
                <label for="format">Format:</label>
                  <select name='format' >
                      <option value="1">48 Hour Film Project</option>
                      <option value="2">Behind The Scenes</option>
                      <option value="3">Short Film</option>
                      <option value="4">Feature Film</option>
                      <option value="5">Documentary</option>
                      <option value="6">Series</option>
                   </select>
                <span class="form_hint">Select project format. </span>
            </li>
    
            <li>
                <label for="genre">Genre:</label>
                  <select name='genre' >
                      <option value="1">Sitcoms</option>
                      <option value="2">Reality</option>
                      <option value="3">Sports</option>
                      <option value="4">Specialty</option>
                      <option value="5">Comedy</option>
                      <option value="6">Drama</option>
                      <option value="7">Action</option>
                   </select>
                <span class="form_hint">Select project genre. </span>
            </li>
    
    
            <li>
                <label for="proj_summary">Project Summary:</label>
                <textarea name="tags" cols="40" rows="6" required ></textarea>
            </li>
    
            <li>
                <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
                <label for="thumb">Project Box Cover:</label>
                <input type="file" class='file' name="thumb" size="30" required />
                <span class="form_hint">aaa</span>
                <span class="thumb_hint"> Image must be 250px wide &amp; 380px tall.</span>
                
            </li>
    
            <fieldset>
                <legend>Add Project Position:</legend>
                <li>
                <label for="positions">Position:</label>
                  <select name='genre' >
                      <option value="1">Actor</option>
                      <option value="2">Actress</option>
                      <option value="3">Director</option>
                      <option value="4">Cinematographer</option>
                      <option value="5">Producer</option>
                      <option value="6">Writer</option>
                      <option value="7">Miscellaneous Crew</option>
                      <option value="8">Animator</option>
                      <option value="9">Sound Mixer</option>
                   </select>
                <span class="form_hint">Select project genre. </span>
            </li>
    
            <li>
                <label for="job_title">Position Title:</label>
                <input type="text"  name="project_title" placeholder="Project Title" />
                <span class="form_hint">Enter a title/name for position</span>
            </li>
    
            <li>
                <label for="job_detail">Position Detail:</label>
                <textarea name="job_detail" cols="40" rows="4"></textarea>
            </li>
    
            </fieldset>
    
            <fieldset>
                <legend><a href="" onClick="addField();" >Add Additional Positions:</a></legend>
            </fieldset>
    
    
    
            <li>
                <button class="submit" type="submit" value="Upload">Submit Form</button>
            </li>
        </ul>
    </form>
    
    
    	</div>
    </div>
    </div>
    <a href="#" class="launchLink">Launch Window</a>
    
    </body>
    </html>
    here is my css for the actual form in the overlay
    Code:
    /* === Remove input autofocus webkit === */
    *:focus {outline: none;}
    
    /* === Form Typography === */
    body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    	width:800px;
    	margin:0px auto;
    
    }
    
    form{
    	
    	margin:30px
    
    }
    
    .contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
    .form_hint, .required_notification {font-size: 11px;}
    
    /* === List Styles === */
    .contact_form ul {
        width:750px;
        list-style-type:none;
    	list-style-position:outside;
    	margin:0px;
    	margin-:0px;
    	padding:0px;
    }
    .contact_form li{
    	padding:12px; 
    	border-bottom:1px solid #eee;
    	position:relative;
    } 
    .contact_form li:first-child, .contact_form li:last-child {
    	border-bottom:1px solid #777;
    }
    
    /* === Form Header === */
    .contact_form h2 {
    	margin:0;
    	display: inline;
    }
    .required_notification {
    	color:#d45252; 
    	margin:5px 0 0 0; 
    	display:inline;
    	float:right;
    }
    
    /* === Form Elements === */
    .contact_form label {
    	width:150px;
    	margin-top: 3px;
    	display:inline-block;
    	float:left;
    	padding:3px;
    }
    .contact_form input {
    	height:20px; 
    	width:220px; 
    	padding:5px 8px;
    }
    .contact_form textarea {padding:8px; width:300px;}
    .contact_form button {margin-left:156px;}
    
    	/* form element visual styles */
    	.contact_form input, .contact_form textarea { 
    		border:1px solid #aaa;
    		box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    		border-radius:2px;
    		padding-right:30px;
    		-moz-transition: padding .25s; 
    		-webkit-transition: padding .25s; 
    		-o-transition: padding .25s;
    		transition: padding .25s;
    	}
    	.contact_form input:focus, .contact_form textarea:focus {
    		background: #fff; 
    		border:1px solid #555; 
    		box-shadow: 0 0 3px #aaa; 
    		padding-right:70px;
    	}
    
    /* === HTML5 validation styles === */	
    .contact_form input:required, .contact_form textarea:required {
    	background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
    }
    .contact_form input:required:valid, .contact_form textarea:required:valid {
    	background: #fff url(../images/valid.png) no-repeat 98% center;
    	box-shadow: 0 0 5px #5cd053;
    	border-color: #28921f;
    }
    .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    	background: #fff url(../images/invalid.png) no-repeat 98% center;
    	box-shadow: 0 0 5px #d45252;
    	border-color: #b03535
    }
    
    /* === Form hints === */
    .form_hint {
    	background: #d45252;
    	border-radius: 3px 3px 3px 3px;
    	color: white;
    	margin-left:8px;
    	padding: 1px 6px;
    	z-index: 999; /* hints stay above all other elements */
    	position: absolute; /* allows proper formatting if hint is two lines */
    	display: none;
    }
    .form_hint::before {
    	content: "\25C0";
    	color:#d45252;
    	position: absolute;
    	top:1px;
    	left:-6px;
    }
    .contact_form input:focus + .form_hint {display: inline;}
     /*for file upload*/
    .contact_form input:focus + .thumb_hint {display: inline;}
    
    .contact_form input:required:valid + .form_hint {background: #28921f;}
    .contact_form input:required:valid + .form_hint::before {color:#28921f;}
    	
    /* === Button Style === */
    button.submit {
    	background-color: #68b12f;
    	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    	background: -webkit-linear-gradient(top, #68b12f, #50911e);
    	background: -moz-linear-gradient(top, #68b12f, #50911e);
    	background: -ms-linear-gradient(top, #68b12f, #50911e);
    	background: -o-linear-gradient(top, #68b12f, #50911e);
    	background: linear-gradient(top, #68b12f, #50911e);
    	border: 1px solid #509111;
    	border-bottom: 1px solid #5b992b;
    	border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	-ms-border-radius: 3px;
    	-o-border-radius: 3px;
    	box-shadow: inset 0 1px 0 0 #9fd574;
    	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
    	color: white;
    	font-weight: bold;
    	padding: 6px 20px;
    	text-align: center;
    	text-shadow: 0 -1px 0 #396715;
    }
    button.submit:hover {
    	opacity:.85;
    	cursor: pointer; 
    }
    button.submit:active {
    	border: 1px solid #20911e;
    	box-shadow: 0 0 10px 5px #356b0b inset; 
    	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
    	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
    	-o-box-shadow: 0 0 10px 5px #356b0b inset;
    	
    }
    Attached Files Attached Files

  2. #2
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)


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
  •