Three little pigs and Buttons Conflict

**Webiter** · 07-03-2012, 05:52 PM

Each page is a full HTML file in it's own right?

Have been looking around at modals!

**ApacheTech** · 07-03-2012, 06:22 PM

By that, I meant that you don't use any <php include 'header.php'; ?> style features of PHP.

If you do, it will be easy to integrate another module into the site.

**Webiter** · 07-04-2012, 11:13 AM

Still working of basic navigation like so:

HTML Code:

 <div class="nav">
		    <ol class="dropnav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Raffle</a></li>                   				
                <li><a href="javascript:popup()">Tell a Friend</a></li>
                <li><a href="contact.html">Contact</a></li>
				
            </ol>			
  </div>

but must look into the <php include 'header.php'; ?> method!

**jscheuer1** · 07-04-2012, 02:34 PM

I've broken this out into separate css, js and two include files:

contactform.css:

Code:

#contact_form_wrap { 
    background-color:#101a25; 
    border:2px solid red; 
    margin: 0; 
    padding:10px; 
    width:340px; 
    position: fixed;
    _position: absolute;
    top: 0;
    left: 50%;
    margin-left: -182px;
} 
#contact_form_wrap #form_title 
{ 
   float:left; 
   width:180px;   
   color:#fff; 
   font-family:Verdana, Arial, Helvetica, sans-serif; 
   font-size:12pt; 
   font-weight:bold;    
} 
/*style the sent response*/ 
#contact_form_wrap div#checkPostsMsg {
	color: white;
}
#contact_form_wrap h2.invalidheading{ 
    color:#af1010; 
    text-shadow:#000000 1px 1px 1px;  
    padding:5px 0 0 3px; 
    background-color:yellow; 
} 
#contact_form_wrap p.invalidmessage{ 
    color: white; 
    font-size: 12px;
} 
#contact_form_wrap label { 
    font-size: 12px; 
    font-weight:bold;     
} 
/*style the fields required*/ 
#contact_form_wrap .required { 
    color: red; 
    font-size: 9px; 
    float:right;     
} 
/* style field label texts */
#contact_form_wrap .label {
	float: left;
	color: white;
}
/*style the input fields on hover*/ 
#contact_form_wrap input:hover{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
#contact_form_wrap textarea:hover{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
/*style the input fields on focus*/ 
#contact_form_wrap input:focus { 
    background-color: #900; 
    border: 1px solid blue; 
} 
#contact_form_wrap textarea:focus{ 
    background-color: #900; 
    border: 1px solid blue; 
} 
#contact_form_wrap .textfield { 
    padding:5px 0 0 3px; 
    width:330px; 
    height:20px; 
    border: 1px solid #e9e9e9; 
    background-color:#303942; 
    color:#fff; 
} 
#contact_form_wrap .textarea { 
    padding:3px; 
    width:330px; 
    height:144px; 
    overflow: auto;
    border: 1px solid #e9e9e9; 
    background-color:#303942; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#fff; 
} 
#contact_form_wrap .button, #contact_form_wrap .dbutton { 
    padding:3px 0 5px 0; 
    width:175px; 
    height:25px; 
    border-width: 0; 
    background-color:#303942; 
    font-weight:bold; 
    cursor:pointer; 
    color: #f1f1f1; 
    float: left;
    font-family:Arial, Helvetica, sans-serif; 
} 
#contact_form_wrap .dbutton { 
	cursor: text;
	cursor: not-allowed;
}
#contact_form_wrap .button:hover { 
    background-color:#f1f1f1; 
    color: #333; 
} 
#contact_form_wrap .dbutton:hover { 
    background-color:#303942; 
    border-width: 0; 
    color: #f1f1f1; 
} 
#contact_form_wrap .X /*Close(X) to hide form popup*/ 
{ 
   float:right; 
   font-size:16px; 
   font-weight:bold; 
   color:#fff; 
   cursor: pointer;
}

contactjs.php:

Code:

<?php
Header("content-type: application/x-javascript");
?>
(function(){
	var cook = {
		set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
			if(d){var dt = new Date(); 
				dt.setDate(dt.getDate() + d);
			d = '; expires=' + dt.toGMTString();}
			document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
		},
		get: function(n){ // cook.get takes (name)
			var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
			return c? unescape(c[2]) : null;
		}
	},
    	addEvent = (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(){f.call(el);});
		}:function(){return;};
	})(), obj;
	addEvent(window, 'load', function(){
		obj = document.getElementById('contact_form_wrap');
		function show_popup() {
			cook.set('popupopen'); //set session cookie
			if (obj.style.display == "none") {
				obj.style.display = "";
				obj.style.top = ((window.innerHeight || document.documentElement.clientHeight) - obj.offsetHeight) / 2 + 'px';
			}
		}
		function hide_popup(){
			cook.set('popupopen', '', -1); //delete cookie
			var imsg, sub = obj.getElementsByTagName('input');
			if(sub.length){
				sub = sub[sub.length - 1];
			} else {sub = false;}
			if (obj.style.display == ""){
				obj.style.display = "none";
				(imsg = document.getElementById('checkPostsMsg')) && imsg.parentNode.removeChild(imsg);
				if(sub && sub.disabled){
					sub.disabled = false;
					sub.className = 'button';
					document.getElementsByName('message')[0].value = '';
				}
			}
		}
		addEvent(document.getElementById('showcontactform'), 'click', function(e){
			e = e || event;
			e.preventDefault && e.preventDefault();
			e.returnValue = false;
			show_popup();
		});
		addEvent(document.getElementById('hidecontactform'), 'click', function(e){
			e = e || event;
			e.preventDefault && e.preventDefault();
			e.returnValue = false;
			hide_popup();
		});
		if(cook.get('popupopen') || <?php echo (isset($_GET['contact']) and $_GET['contact'] == 'yes')? 'true' : 'false'; ?>){
			show_popup();
		}
	});
	addEvent(window, 'resize', function(){
		if (obj.style.display == ""){
			obj.style.top = ((window.innerHeight || document.documentElement.clientHeight) - obj.offsetHeight) / 2 + 'px';
		}
	});
})();

contactformheader.inc:

Code:

<?php
// start the session 
session_start();   

ini_set('display_errors', 1); 
ini_set('log_errors', 1); 
ini_set('error_log', dirname(__FILE__) . '/error_log.txt'); 
ERROR_REPORTING(E_ALL); 

//define variables and receiving email 
$name=""; $email=""; $phone=""; $message=""; 

//for now assume the form has yet to be submitted and so of course has not yet been approved
$submitted = false;
$mailApproved = false;

//validate form inputs 
function check_posts() { 
  $found = array(); 
  foreach ($_POST as $x => $y) { 
    if ($x == "check") break; 
    $conditions = array( 
      "name"    => (strlen($y) < 5),  
      "phone"   => (strlen($y) < 6), 
      "email"   => (!filter_var($y, FILTER_VALIDATE_EMAIL)),  
      "message" => (strlen($y) < 10));      
    $errors = array( 
      "name"    => "Valid Name ",  
      "phone"   => "Valid phone only",  
      "email"   => "Valid email only",  
      "message" => "Valid message only" );      
    if ($conditions[$x]) $found[] = $errors[$x]; 
  } 
  echo "<div id='checkPostsMsg'>";
  $i = 1; if (count($found) > 0) { 
    echo "<h2 class='invalidheading'>Please address:</h2>";
    foreach ($found as $z) { echo "<p class='invalidmessage'>$i.  $z</p>"; $i++; } 
    echo "</div>";
    return false;
  } else { 
    echo " Your message has been sent. "; 
    echo "</div>";
    return true;
  } 
}
//end validation code 

?>

contactformfooter.inc:

Code:

    <div id="contact_form_wrap" style="display: none;"> 
      <div id="form_title">Contact Us Form
      </div><br /> 
<?php
	if (isset($_POST["check"])) { 
		$submitted = true;
		$mailApproved = check_posts(); 
		//assign post data to variables 
		$name    = trim($_POST['name']); 
		$email   = trim($_POST['email']); 
		$phone   = trim($_POST['phone']); 
		$message = trim($_POST['message']);
		if($mailApproved){
			define("EMAIL", "mmmmmmm@gmail.com"); 
			$header   = "From: $email\n" . "Reply-To: $email\n"; 
			$subject  = "A message from the Contact Form"; 
			$email_to = EMAIL; 
			$todayis  = date("l, F j, Y, g:i a") ; 
			$emailMessage  = "Name:    " . $name  . "\n"; 
			$emailMessage .= "Email:   " . $email . "\n"; 
			$emailMessage .= "Phone:   " . $phone . "\n"; 
			$emailMessage .= "Date:    " . $todayis  . "\n\n"; 
			$emailMessage .= "Message: " . $message; 
			mail($email_to, $subject, $emailMessage, $header ); 
		}     
	} 
?>
        <form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <!--[if lt IE 8]>
<br />
<![endif]-->
          <p><label><span class="label">Name:</span> <span class="required">Required</span> 
          <input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" /> 
          </label></p>           
          <p><label><span class="label">Email:</span> <span class="required">Required</span> 
          <input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" /> 
          </label></p>  
          <p><label><span class="label">Phone:</span> <span class="required">Required</span> 
          <input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" /> 
          </label></p> 
          <p><label><span class="label">Message:</span> <span class="required">Required</span> 
          <textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea> 
          </label></p> 
          <p><input type="hidden" name="check" value="c"><input type="submit" value="Send Message"<?php echo $mailApproved? ' class="dbutton" disabled' : ' class="button"'; ?>><a id="hidecontactform" href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a></p> 
           
       </form> 
    </div>

Due to space limitations, I will post a page that uses them in my next post.

**jscheuer1** · 07-04-2012, 02:43 PM

Here's a typical page that uses them:

Code:

<?php 
include 'contactformheader.inc';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>| :: Some Page :: | </title> 

<style type="text/css"> 
body { 
    margin:0; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    color:#000; 
    background-color:#ffffff; 
} 
#wrapper{ 
    background-color:transparent; 
    border:solid 0px #000000; 
    margin:auto; 
    padding:1px; 
    height:100%; 
} 
h2{ 
    color:#af1010; 
    text-shadow:#000000 1px 1px 1px;  
    padding:5px 0 0 3px; 
    background-color:yellow; 
} 
p.clear 
{ 
    clear:both; 
    height:0; 
    padding:0; 
    margin:0; 
} 
</style> 
<link rel="stylesheet" href="contactform.css" type="text/css">
<script type='text/javascript' src="contactjs.php?contact=<?php echo isset($_GET['contact'])? $_GET['contact'] : 'no'; ?>"></script>

</head> 
<body>
	<h2>Click image to present Popup</h2>
	<br />
	<a id="showcontactform" href="javascript:show_popup('contact_form_wrap')"><img border='1' height='39'  width='213' src='http://www.validation.webitry.net/contact-us-button.png' alt="Contact Us"/></a>
  <div id="wrapper"> 
  <p>All kinds of content can go here here</p>
  </div> 
<?php
include 'contactformfooter.inc';
?>
</body> 
</html>

You can load it up with content anywhere between the opening <body> tag and the footer include, the popup will show over that content. If some of that content is positioned, the popup's wrapper's z-index might need to be set in the contactform.css file. For example (addition highlighted):

Code:

#contact_form_wrap { 
    background-color:#101a25; 
    border:2px solid red; 
    margin: 0; 
    padding:10px; 
    width:340px; 
    position: fixed;
    _position: absolute;
    top: 0;
    left: 50%;
    margin-left: -182px;
    z-index: 100;
}

Certain paths can be made absolute or network to facilitate site wide implementation.

As you can see, the js file has a PHP extension. It need not right now unless you want to be able to pass GET data to it. All I have it for is to get the data from the page as regards contact=yes, but this is handled by the cookie, so is not being used. So that logic could be removed and it could become an ordinary .js file.

The header include starts a session. In it's current form, that's not used but it was there in your original code. It could be used though to maintain some or all of the information in the form for subsequent instances of the form in the same PHP session. If the session start command is removed though, the include no longer needs to come before the DOCTYPE, only before the footer include, and could perhaps be combined with it.

There are probably still tweaks and/or explanations to be made, but this is a working model. Requires a standards invoking DOCTYPE.

**Webiter** · 07-06-2012, 11:29 AM

Just tried it in the engine and walla..... it worked a treat. Now I know what you mean by disabling the send button. A super
result and thank you for your effort in getting the thing working. There was quite a bit more involved in getting it working
than what I anticipated on commencement. As well as being a great working tool it provided for a great learning
experience.

**jscheuer1** · 07-06-2012, 05:34 PM

I just saw a typo in the javascript. Where I had:

Code:

cook.set('popupopen', 1); //set session cookie

It should be:

Code:

cook.set('popupopen'); //set session cookie

I've fixed it in the post where it's introduced. But your copy has it the 'old' way. The former set a 1 day cookie, the latter sets a browser session only cookie.

Thread: Three little pigs and Buttons Conflict

Thread Tools

Search Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions