[orginal] Progressbar implementation with js,css,and html

in this article i just want to explain how we can create progress bar from scratch , the visual design , how to be invokable ,easy to layout ,important methods and finally it's properties .

 physical  point: the progress bar as you see in figure 1 is consist of tow parts only , first is the backbone or the container of progress line  ,the second is the progress line .physically the backbone is Div tag with background repeated-x ,but progress line is span also with background repeated-x but it's width is variable .

  figure1:

here you see four images  to accomplish the visual style of progress bar and progress line 

all are with one px width , have the same height and  border.

  

CSS style :

in css style we consider the visual style,but not the layout of progress bar , we will consider that using js latter 

/*div , the background image which*/
.progressbar
{
    
    width:300PX;;
    height:25px;
    position:absolute;
    background-image:url('images/M.png');
    background-repeat:repeat-x;
    
}

/*span*/
.progressbar .LeftProgSide
{
  width:2px;
  height:25px;
  margin-left:0px;
  background-image:url('images/L.png');
  position:absolute;
  
}
/*span*/
.progressbar .RightProSide
{
  width:2px;
  height:25px;
  float:right;
  background-image:url('images/R.png');
}

/* span :line*/
.progressbar .ProgLine
{ 
   width:40px;
   height:23px;
   margin-left:1px;
   margin-top:1px;
   position:absolute;
   background-image:url('images/progressbar.png');
   background-repeat:repeat-x;
}

js code :

with OOP of js we just need to create a class  Progressbar. as you know   class in js can be created with function keyword ,

in progressbar class we also add some main methods  and properties.

function changeState( element ,height ,statNumber)
  {
      //statNumber the number of state we want to show currently
      // elemnt is imageBackground for span
     /// 0: normal status,1 mouseMove status,2 mousepress status, 3 fucuse,4 disable ,5 no
     var top=height*statNumber;
      // alert('100% -'+left+'px');
     document.getElementById(element).style.backgroundPosition='100% -'+top+'px';     
    
  }
  
  
   // class. the class pf progress bar 
  function Progressbar(proLineName,ProgressBar)
  {
    //proLineName is animation line in the ProgressBar
    
      var visible="";
      var maximum_value;// for progresse line, but not for the progressbar
      var minimum_value; // for the progress line 
      var Current_value; // for the porgress line 
      var width;
      var Par=0;
      var MarginLeft;
      var MarginTop;
      // for the progress bar
      this.setWidth=function(value)
      {
        width=value;
        maximum_value=value; // the max value for the progress line is the width of progressBar
        Par=value/100;
        document.getElementById(ProgressBar).style.width=value;
        
      }
      this.getMarginLeft=function(){return MarginLeft;}
      
      this.setMarginLeft=function(value)
      {
        MarginLeft=value;
        document.getElementById(ProgressBar).style.marginLeft=value;
      }
      
      
      this.getMarginTop=function(){return MarginTop;}
      
      this.setMarginTop=function(value)
      {
        MarginTop=value;
        document.getElementById(ProgressBar).style.marginTop=value;
      }


      this.getWidth=function(){alert(width); return  width;}
      
      this.getVisible=function() {return visible;}
      
      this.setVisible=function(v)
      {
        var temp="";
        if(v=='false')
        {
          temp='none'
        }
        else if( v=='true')
        { 
         temp='block';
        }
        visible=v;
       document.getElementById(proLineName).style.display=temp;
      }
      
      
      this.setValue=function(value)
      {
        value=value*Par
        if(value<width)
        {
         Current_value=value;
         document.getElementById(proLineName).style.width=value;
        }
        else if(value==maximum_value)
        {
          Current_value=value;
      
          document.getElementById(proLineName).style.width=value-2;
        }
        else if(value>width)
        {
         alert( 'overflow value..');
        }
      }
      
      
      this.getValue=function()
      {
       return Current_value;
      }
      this.getMaxValue=function(){return maximum_value;}
      
      
   
  
  }

create an object of progress bar 

var progLine=new Progressbar('progline','progressbar');
    progLine.setVisible('true');
    progLine.setWidth(100);
    progLine.setMarginLeft(10);
    progLine.setMarginTop(10);

html code :

 <div id="progressbar" class="progressbar">
      <span class="LeftProgSide"></span>
      <span class="RightProSide"></span>
      <span id="progline" class="ProgLine" onmouseover="changeState('progline',23,1);" onmouseout="changeState('progline',23,0);"></span>
    </div>

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="progressebar.css"/>
<script language="javascript" type="text/javascript" src="progressebar.js"></script>
<title>Untitled 1</title>
</head>

  <body>
     <div id="progressbar" class="progressbar">
      <span class="LeftProgSide"></span>
      <span class="RightProSide"></span>
      <span id="progline" class="ProgLine" onmouseover="changeState('progline',23,1);" onmouseout="changeState('progline',23,0);"></span>
    </div>

   <script language="javascript" type="text/javascript">
   

   var progLine=new Progressbar('progline','progressbar');
    progLine.setVisible('true');
    progLine.setWidth(100);
    progLine.setMarginLeft(10);
    progLine.setMarginTop(10);
    

    
   </script>
   
   <a style="top:100px;position: fixed;" href="#" onclick="progLine.setValue(0);">0</a>
    <a style="top:150px;position: fixed;"  href="#" onclick="progLine.setValue(30);">30</a> 
    <a style="top:180px;position: fixed;"  href="#" onclick="progLine.setValue(50);">50</a>
    <a style="top:200px;position: fixed;"  href="#" onclick="progLine.setValue(100);">100</a>
    
    
    

</body> 
</html>