Part 3: eModal with Javascipt, jQuery, and CSS

Screen Shot 2014-02-03 at 7.01.14 PM

 

Okay, let’s get visual…

 

So, for Part 2 a lot of time was spent researching and playing with plugins. I’ve now got a canvas that pops up they way I want. And I can display an iFrame with the survey form from my Wufoo survey. So it’s time to roll up my sleeves and dig into the code required to display and validate a password prompt.

 

Screen Shot 2014-02-04 at 12.12.48 AM

 

The first part uses jQuery to load events that will occur when the password is validated. Despite its misleading name, jQuery is a really important tool in modern web sites. Let’s face it, people want sites that look cool! It’s not enough to just present crude form elements and stock HTML buttons. So jQuery was invented to animate different parts of a website. The function I’m going to focus on is a slide effect.

 

Basically, when the form first appears and the user enters a password, the result will be evaluated and a jQuery slide effect will be used to display the result. The result will be either an error message, or if successful the WuFoo survey form.

 

The script that I will use can be broken into several components. First, there is the jQuery code that creates the animations. Next, there is the CSS that controls the appearance. The next section is a function to trap and prevent the Enter key from working in the Password input field. Normally, this would provide an automated Form/Post action that would break the continuity of the workflow. The final section is the definition of the panels (“Div’s”) that are a container to hold the form controls.

 

If you imagine a few pieces of paper with controls drawn on them, then the paper size and shape itself is the Div control. The code that we are going to use will animate the Div’s sliding up and down to cover one another.

 

So in the first section:

 

<script>
     $(document).ready(function(){
     $(“button”).click(function(){
     var password = document.forms[‘PasswordField’].elements[‘password’].value;
     if (password == “MyPassord”){
          $(“#flip”).slideToggle(“slow”);
          $(“#panel”).slideToggle(“slow”);
          if ($(‘#wrongpasscode’).is(‘:visible’)){
               $(“#wrongpasscode”).slideUp(“slow”);
          }
          }else{
               $(“#wrongpasscode”).slideDown(“slow”);
               };
          });
     });
</script>

 

The first two lines are jQuery calls that configure the Document Object Model (DOM). This is somewhat like XML, where all of the elements on a page are available in a tree that can be traversed and different properties read and manipulated.

 

The next line sets up a variable called password and reads the value from the password field.

 

The remaining lines setup conditional actions based on whether the password is correct or not. One of the trickier parts of this code was to determine if an incorrect password had already been displayed. If so then an additional correct attempt should remove the error message while still making the form available. Hence, if the ‘wrongpasscode’ is visible, then the wrongpasscode panel should be slid up…

 

The next section deals with CSS:

 

<style type=”text/css”>
#panel,#flip,#wrongpasscode
{
     padding:5px;
     text-align:center;
     background-color:#a8b646;
     border:solid 1px #c3c3c3;
}
#panel
{
     padding:50px;
     display:none;
}
#wrongpasscode
{
     padding:50px;
     display:none;
}
</style>

 

CSS uses the ‘style’ element wrapped around the code. The code uses pair values delimited by a colon and each line is terminated by a semi-colon. The style sheet sets properties for objects that are used on screen such as color, alignment, height, border width and color, etc.

 

The next section is a function to control the behaviour of the Enter key:

 

<script>
function disableEnterKey(e){
     var key;
     if(window.event)
          key = window.event.keyCode; //IE
     else
          key = e.which; //firefox
          if(key == 13)
             return false;
          else
             return true;
     }
</script>

 

The function is pretty self-explanatory. One addition that I would like to make is to trap the Enter key press and call the same function as the ‘submit’ button. A lot of people expect to be able to hit the Enter key when they type content into an input control.

 

The final code is the panels themselves:

 

<div id=”flip” style=”background-color:#a8b646″>
     <script>document.getElementById(“flip”).style.borderColor=”#a8b646″;</script>
     <P>
     <P>

     <img src=”http://conorhearn.com/wp-content/uploads/2014/02/shutterstock_88764304.jpg” alt=”Assessment” height=”300″ width=”400″>
     <P>
     <P>
     <P>
     <P>

     <form name=”PasswordField” action=””>
     Please enter the password that was supplied to you.
     <input type=”password” id=”password” name=”password” onKeyPress=”return disableEnterKey(event)”>
     </form>
     <P>
     <button>Log in</button>
</div>

<div id=”panel”>
     <iframe seamless src=”https://conorhearn.wufoo.com/forms/z1sa59ug0sji3px/” scrolling=”yes” height=”690″ width=”100%”></iframe>
</div>

<div id=”wrongpasscode”>
     <script type=”text/javascript”>
         document.getElementById(“wrongpasscode”).style.borderColor=”#a8b646″;
         errortxt = “You have entered an incorrect password. Please try again”
         document.write(“<span style=’color:#990033′>” + errortxt + “</span>”);
    </script>
</div>

 

Basically, each of these div’s are identified by an id=”” property so they can be accessed by the other functions. Each of the panels contain controls and text that can be displayed based on the text entered in the password control. Finally, there is an image that I have included to make the form look more interesting.

 

Screen Shot 2014-02-04 at 1.11.34 AM

 

So, once again… it’s the wee hours of the morning and I’m still focusing on this small but colossal project! I can’t really communicate how frustrating this kind of development can be. It’s really a giant exercise in trial and error.

 

But then again, Wow! I did it! It works! Holy cow! 

 

Thanks for taking time to review this post.

 

 

 

 

Leave a comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>