All posts by Jason Campbell

How to send 2 HTML forms at once

Code Snippets,

I was doing a project and it required that I sent the same information to 2 different sites using 2 different forms. It wasn’t easy to edit the back end code so I couldn’t used the API. After researching I came up with this solution.

  1. Hide the second form with CSS 
     <form style="display:none;"....
  2. When the first form is submitted do 3 things.
    1. Populate the second form using the values from the first. I used jQuery .val 
       var name = $("#name").val();

 $("#name2").val(name);
    2. Send the first form through an IFrame. 
       <form target="iFrameID"....
    3. Set the thank you page for the form to come back to an html file with basic HTLM code and a script like this to trigger a function to send the second form. This page has to be on the original domain so it doesn’t violate the cross domain rules. 
       <script>

 parent.sendForm2();

 </script>

 

Example of code for the main page….

<iframe id="iFrame1" name="iFrame1"></iframe>

<form id="form1" target=”iFrame1″>
   Name: <input type=”text” id=”name” name=”name”/>
</form>

<form id=”form2″ style=”display:none;”>
   Name: <input type=”text” id=”name2″ name=”name”/>
</form>

<script>
function sendForm1(){
   $(“#form1”).submit();
}

function sendForm2(){
   $(“#form2”).submit();
}

function populateForm2(){
   var name = $(“#name”).val();
   $(“#name2”).val(name);
   sendForm1();
}

$("#form1").submit(function() {
   populateForm2();
   return false;
});
</script>

 

Example of code for the thank you page (for the first form) HTML file ….

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script>
parent.sendForm2();
</script>
</head>
<body>
<p>Sending...</p>
</body>
</html>

Note: This page has to be on the original domain so it doesn’t violate the cross domain rules. If you need to do it with a subdomain you could add document.domain = “subdomain.mydomain.com”; to the main page and the thank you page.

Code Demo for Simple Responsive Pop Up Modal Box

Uncategorized

Here is the basic code. First, I make a wrapper with the ID “popUp”. Inside I add a fixed div with 100% width, 100% height and a transparent background using rgba(0, 0, 0, 0.5). In the rgba code the first 3 spaces set the color (rgb) and the last space sets the opacity (1 being full opacity). So now I have a dark transparent background. Next I add the pop up box/modal. I give this a height and width. I set the top and left attributes to 50%. Then I give a negative value for the top and left margins. I set these to minus half of the width and half of the height of the box. Width = minus 300px/2 (-150px). And the same with the top.

CSS:

#popUp {
  display: none;
}
#popUpBg {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
top: 0;
left: 0;
display: block;
}

#popUpBox {
display: block;
position: fixed;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
margin: -125px 0 0 -150px;
background: #FFFFFF;
border: solid 3px #ed1c24;
z-index: 20;
text-align: center;
box-shadow: 0 0 20px #222222;
}

#popUpBox p {
font-size: 2.2em;
font-weight: bold;
padding: 40px 20px;
line-height: 1.2;
margin: 0;
}

#popUpBox a.button {
font-size: 1.4em;
font-weight: bold;
background: #ed1c24;
padding: 10px 30px;
border-radius: 5px;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
}

HTML:

<div id="popUp">
  <div id="popUpBg">&nbsp;</div>
  <div id="popUpBox">
    <p>Important Message...</p>
    <a id="popUpOk" class="button" href="javascript:;">OK</a>
  </div>
</div>
<a class="openPopUp" href="javascript:;">Open Pop Up</a>

Lastly, I add some jQuery to animate the box. When the page loads the code adds onclick events to the pop up background, the ok/close button and the “Open Pop Up” link.

jQuery:

$(document).ready(function() {
  $(".openPopUp").click(function() {
    $("#popUp").show()
  });
  $("#popUpBg").click(function() {
    $("#popUp").hide()
  });
  $("#popUpOk").click(function() {
    $("#popUp").hide()
  });
});

 

See a demo on Fiddle

Left navigation responsive Word Press slide show plug-in

Word Press Plug Ins, , ,

This is my first official word press plug in. I have seen these types of slide shows on sites like Wayfair. I didn’t see a plug in that does this style so I decided to design my own.

I like this style of slide show because it isn’t a total mystery what the next slide will be. It gives the user a little more incentive to click to see the next slide.

I took my time and added a bunch of features and made it as light weight as possible. Unlike a lot of plug ins, the javascript file only loads on pages that have the short code instead of loading on every page no matter what.

See a Demo >>

Read Documentation >>

Download Plug In >>

Word Press Slide Show Plug In Back End Word Press Slide Show Plug In Back End Edit jtc-slides-screen-shot-1