www.webdeveloper.com
Results 1 to 3 of 3

Thread: Progress Bar

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    75

    Progress Bar

    I found a nice progress bar on the web but I don't how to modify it.
    When the user clicks on 25%, 50%, 75% or 100% it works perfectly but I'm trying to write a function getValue() where it gets the progress bar to change accordingly to the value in the input box.
    Here's my code but it does not work (i.e function getValue does NOT work)

    HTML Code:
    <!DOCTYPE html>
    
    <html>
    <head><title></title>
    <style>
        .progress-bar {
            background-color: #1a1a1a;
            height: 25px;
            padding: 5px;
            width: 350px;
        }
            
        .progress-bar span {
            display: inline-block;
            height: 100%;
    		background-color: #777;
    
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		-webkit-transition: width .4s ease-in-out;
    		-moz-transition: width .4s ease-in-out;
    		-ms-transition: width .4s ease-in-out;
    		-o-transition: width .4s ease-in-out;
    		transition: width .4s ease-in-out;		
        }
    
    	.purple span{background-color: #514BF2;}
    </style>
    </head>
    
    
    <body>
    <div class="progress-bar purple">
        <span style="width: 40%"></span>
    </div>
    <p>Set above to:
    	<a href="#" class="quarter">25%</a> /
    	<a href="#" class="half">50%</a> /
    	<a href="#" class="three-quarters">75%</a> /
    	<a href="#" class="full">100%</a>
    	<br><br>
    
    	
    	<input type="text" id="inputText" />
    	<input type="button" onclick="getValue()" /><br><br>	
    </p>
    
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    	$(document).ready(function(){ 
    		$('.quarter').click(function(){
    			$(this).parent().prev().children('span').css('width','25%');
    			});
    		$('.half').click(function(){
    			$(this).parent().prev().children('span').css('width','50%');
    			});
    		$('.three-quarters').click(function(){
    			$(this).parent().prev().children('span').css('width','75%');
    			});
    		$('.full').click(function(){
    			$(this).parent().prev().children('span').css('width','100%');
    			});		
    	});
    	
    	function getValue(){
    		var str = document.getElementById("inputText").value;
    		$(this).children('span').css('width',str+'%');
    	}
    </script>
    
    
    
    </body>
    </html>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,082
    why not make it easier on yourself and give the progress bar an id instead of playing around with all that parent prev children stuff which will just break if you ever decide to change the html structure...
    Code:
    <body>
    <div class="progress-bar purple">
        <span style="width: 40%" id="prog"></span>
    </div>
    <p>Set above to:
    	<a href="#" class="quarter">25%</a> /
    	<a href="#" class="half">50%</a> /
    	<a href="#" class="three-quarters">75%</a> /
    	<a href="#" class="full">100%</a>
    	<br><br>
    	<input type="text" id="inputText" />
    	<input type="button" onclick="getValue()" /><br><br>	
    </p>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    	$(document).ready(function(){ 
    		$('.quarter').click(function(){
    			$("#prog").css('width','25%');
    			});
    		$('.half').click(function(){
    			$("#prog").css('width','50%');
    			});
    		$('.three-quarters').click(function(){
    			$("#prog").css('width','75%');
    			});
    		$('.full').click(function(){
    			$("#prog").css('width','100%');
    			});		
    	});
    	
    	function getValue(){
    		var str = document.getElementById("inputText").value;
    		$("#prog").css('width',str+'%');
    	}
    </script>
    </body>
    or ditch the whole thing and use the html5 <progress> tag:

    Code:
    <body>
    <progress id="prog" value="40" max="100"></progress>
    <p>Set above to:
    	<a href="#" class="quarter">25%</a> /
    	<a href="#" class="half">50%</a> /
    	<a href="#" class="three-quarters">75%</a> /
    	<a href="#" class="full">100%</a>
    	<br><br>
    	<input type="text" id="inputText" />
    	<input type="button" onclick="getValue()" /><br><br>	
    </p>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    	$(document).ready(function(){ 
    		$('.quarter').click(function(){
    			$("#prog").val(25);
    			});
    		$('.half').click(function(){
    			$("#prog").val(50);
    			});
    		$('.three-quarters').click(function(){
    			$("#prog").val(75);
    			});
    		$('.full').click(function(){
    			$("#prog").val(100);
    			});		
    	});
    	
    	function getValue(){
    		var str = document.getElementById("inputText").value;
    		$("#prog").val(str);
    	}
    </script>
    </body>
    really no need for jQuery in either case, btw...

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE html>
    
    <html>
    <head><title></title>
    <style>
        .progress-bar {
            background-color: #1a1a1a;
            height: 25px;
            padding: 5px;
            width: 350px;
        }
    
        .progress-bar span {
            display: inline-block;
            height: 100%;
    		background-color: #777;
    
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    		-webkit-transition: width .4s ease-in-out;
    		-moz-transition: width .4s ease-in-out;
    		-ms-transition: width .4s ease-in-out;
    		-o-transition: width .4s ease-in-out;
    		transition: width .4s ease-in-out;
        }
    
    	.purple span{background-color: #514BF2;}
    </style>
    </head>
    
    
    <body>
    <div class="progress-bar purple">
        <span id="tst" style="width: 40%"></span>
    </div>
    <p>Set above to:
    	<a href="#" class="quarter">25%</a> /
    	<a href="#" class="half">50%</a> /
    	<a href="#" class="three-quarters">75%</a> /
    	<a href="#" class="full">100%</a>
    	<br><br>
    
    
    	<input type="text" id="inputText" />
    	<input type="button" value="Bar" onclick="getValue(200);" /><br><br>
    </p>
    
    
    <script>
    function getValue(max){
     var v=document.getElementById('inputText').value;
     if (isFinite(v*1)&&v>=0&&isFinite(max*1)&&max>0&&v<=max){
      document.getElementById('tst').style.width=(v/max*100)+'%';
     }
    }
    
    </script>
    
    
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles