Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    The <progress> tag and Javascript

    Hi.
    I'm trying to created a login page with complete with a progress tag to show how many more login attempts you are allowed. I'm adapting some Javascript that I found on another site that does a similar job each time an input box is filled ( to show your progress through a form. I can't get the linkage right. (I'm a javascript newbie) and would appreciate any help.

    I'm posting all the code (HTML, CSS and javascript). This is just a demo page, so please excuse the garish colours! Also, please accept my apologies if you have seen this post on another site - I'm trying to find the best one to use.

    Code:
          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="utf-8">
                  <title>Untitled Document</title>
              <link href="css/access.css" rel="stylesheet" type="text/css">
              <script src="_js/jquery-1.9.1.min.js"></script> 					      	  <script src="_js/modernizr.js"></script>
          </head>
          
          <body>
          
          <div class = "accessbox" id="accessbox">
          
                  <form method="post" accept-charset="UTF-8" action="#" class="login" id="login">
     	<div class="field">     
                  <input id="username" required class="username" type="text" placeholder="Username"  name="username"/>
         </div>
         <div class="field"> 
                  <input id="pass" required class="pass" type="text" placeholder="Password" name="password"/>
          </div>        
                  <input type="submit" name="submit" class="submit" id="submit">
              <script src="js/progress_1.js"></script>
                  </form>	
          </div>        
          <div class="progress-wrap">
                    <progress max="100" value="0" id="progress"></progress>
                    <div class="progress-message" id="progress-message">The Counter</div>
                    <!--script src="js/progress.js"></script-->
                    
          </div>       
          
          
          </body>
          </html>
    Code:
    	  *{@include box-sizing:border-box;}	
    	  
    	  body{
    		  background-image:url(../images/progress_grunge_background.gif);
    		  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    		  font-size: 14px;
    		  line-height: 1.4;
    		  padding: 20px;}
    	  
    	  .login {
    		  padding:20px 2px 2px 2px;
    		  position:absolute;
    		  background-color:#006;
    		  width:200px;
    		  height: 100px;
    		  -webkit-border-radius: 1px;
    		  -moz-border-radius: 1px;
    		  border-radius: 5px;
    		  border: 2px solid red;
    		  left:190px;
    		  top: 400px; }
    		  
    	  input[type="text"], input[type="submit"] {
    		  font-family:Tahoma, Geneva, sans-serif;
    		  background-color:#99FFFF;
    		  margin-top:2px;
    		  margin-bottom:2px;
    		  border:2px solid #999;
    		  width:96%; }
    		  
    	  input[type="submit"] {
    		  margin-top:5px;
    		  margin-left:40px;
    		  width:50%; }	
    		  
    	  progress {
    		  width:200px;
    		  height:20px;}
    		  
    	  .progress-wrap {
    		  top:550px;
    		  left:165px;
    		  position:relative;
    		 /* text-align: center; */
    		  font-size: 10px;
    		  color: red;
    		  margin: 0 0 20px 0;
    		  progress {
    		  width: 100%; 
    		  margin: 0 0 5px 0; 
    		}
    	  }
    Code:
    var numValid = 0;
    
    $(document).ready( function (){ 
    
    $("#login submit").on("click",function(){	  
    $("#login submit[required]").each(function() {
        if (this.validity.valid) {
            numValid++;
        }
    	
    });
    });
    
    $("#login submit").click( function(){
    
    var progress = $("#progress"),
        progressMessage = $("#progress-message");
    
    if (numValid == 0) {
        progress.attr("value", "0");
        progressMessage.text("The Counter");
    }
    if (numValid == 1) {
        progress.attr("value", "20");
        progressMessage.text("1st");
    }
    if (numValid == 2) {
        progress.attr("value", "40");
        progressMessage.text("2nd");
    }
    if (numValid == 3) {
        progress.attr("value", "60");
        progressMessage.text("3rd");
    }
    if (numValid == 4) {
        progress.attr("value", "80");
        progressMessage.text("4th");
    }
    if (numValid == 5) {
        progress.attr("value", "95");
        progressMessage.text("5th");
    }
      
    });
     
    });

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I'm adapting some Javascript that I found on another site
    Your main selector should be $("#login #submit") not $("#login submit"). and I stopped right here. Don't reinvent the wheel use jQuery Validation Plugin http://jqueryvalidation.org/

    Look at their code if you want to study how things are done.
    Evolution - The non-random survival of random variants.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you.
    I do indeed use jquery validation. I didn't bother to use anything other that the HTML "required" here as it's only a bit of code to work out how something works.

    What I'm trying to do here is have a <progress> tag that increments with every incorrect login attempt. After 5 attempts the user will be denied access.

    This is for my own personal site (coding for fun!) - a good way to learn how to do things.


  •  

    Posting Permissions

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