[orginal] slide bar based on web , from ABC

hi , today we go with slider,we try to explain the greneral three aspects mean 'css, js and HTML'

slider consist of two main parts which are the backbone and  the slide part,

tow parts  can be separated in to tow images ,

here is the css code :

.Hslider
{
   width:55px;
   height:10px;
   margin-left:0px;
   margin-top:0px;
   position:absolute;
   background-image:url('images/HbackBone.png');
   background-repeat:no-repeat;
   background-position:left;

}



.Hslider span
{
    position:absolute;
    width:5px;
    height:10px;
    margin-top:0px;
    margin-left:0px;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url('images/Hslide.png');
    
}



.Vslider
{
    
   width:9px;
   height:55px;
   margin-left:0px;
   margin-top:0px;
   position:absolute;
   background-image:url('images/VbackBone.png');
   background-repeat:no-repeat;
   background-position:center;
   border:1px red solid;

}


.Vslider span
{
    position:absolute;
    width:10px;
    height:5px;
    margin-top:25px;
    margin-left:0px;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url('images/Vslide.png');
    
}


.ttt
{
    width:0px;
    position:absolute;
    margin:0px;
    color:red;
    font-size:x-small;

    
}

from js point we jsut consider the returned value , in other hand the poisiton of the slide part can be controled by the object left  property if the slide bar  is horizintally otherwise the we consider the top property for the object that is becuase the slide bar will be vertically layouted, the tooltiptext for the  slide that is to show where it slided now.

here the code for slide object:

function SlidetttHtmlCode(parentId)
    {
     
      var newLable = document.createElement('span');
          newLable.className='ttt';
          newLable.id=parentId+'Label';
      var parent=document.getElementById(parentId);
        parent.appendChild(newLable);
   }
   
   

 function STTT(ParentId)
 {
   
   
   var left;
   var top;
   var width;
   var height;
   
   
    SlidetttHtmlCode(ParentId);
       
   var txtId=ParentId+"Label";
   var txtObject=document.getElementById(txtId);
  
   
   var pObject=document.getElementById(ParentId);


    this.setText=function(val)
    {
      document.getElementById(txtId).innerHTML=val;
    }
    this.getText=function()
    {
     return (document.getElementById(txtId).innerHTML);
    }
    
    
    
  this.getWidth=function(){return width;}
  this.setHeight=function(value)
  {
    pObject.style.height=value
    txtObject.style.height=value;
    height=value;
  }
  this.getHeight=function(){return height;}
  
  this.setWidth=function(value)
  {
   if(pObject && txtObject)
   {
    pObject.style.width=value
    txtObject.style.width=value;
    width=value;
    }
    else
    {
     alert('object is not found  ..');
    }
  }
  this.getWidth=function(){return width;}


  this.setMarginTop=function(value)
  {
    pObject.style.marginTop=value;
    top=value;
  }
  this.getMarginTop=function(){return top};
  
  this.setMarginLeft=function(value)
  {
    pObject.style.marginLeft=value;
    left=value;
  }
  this.getMarginLeft=function(){return left};



    
   
 }












function CreateSlidebarHTMLCode(pid)
{
   var backBone=document.createElement('div');
       backBone.id=pid+'Slider';
       document.getElementById(pid).appendChild(backBone);
}


function Slider(pid,width,height,left,top)
{
    
    var value;
    var ttt=new STTT('body');
    var Hslide=false;
    var Vslide=false;
    var IsMouseClicked=false;
    function GetX(oEvent)
    {
   
      return oEvent.clientX;
      
     }
     function GetY(oEvent)
      {
   
      return oEvent.clientY;
      
      }
      

     CreateSlidebarHTMLCode(pid);
     var backBoneObject= document.getElementById(pid+'Slider');
         backBoneObject.innerHTML="<span id="+pid+"sliderPart></span>";
      backBoneObject.style.marginLeft=left;
      backBoneObject.style.marginTop=top;
      var slidePartId=pid+'sliderPart';
      var slidePartObj=document.getElementById(pid+'sliderPart');
      
    


      // mouse down:
      backBoneObject.onmousedown=function()
      {
       if(Hslide)
       {
         
         IsMouseClicked=true;
         var ml=GetX(event)-left-15;
         if(ml<=width && ml>=0)
         {
          slidePartObj.style.marginLeft=ml;
           value=ml;
           
         }
         else if(ml>width)
         {
           slidePartObj.style.marginLeft=width;
           value=width;
           
         }
         else if(ml<0)
         {
          slidePartObj.style.marginLeft=0;
          value=0;
          

         }
         ttt.setText(value);
         ttt.setMarginLeft(GetX(event));
         ttt.setMarginTop(GetY(event)-30); 
        }
      
      }
      
      // mouse up:
      backBoneObject.onmouseup=function()
      {
       IsMouseClicked=false;
      }
      // mouse move:
      backBoneObject.onmousemove=function()
      {
      
       if(IsMouseClicked)
       {    
           if(Hslide)
           {
          
                var ml=GetX(event)-left-15;
                if(ml<=width && ml>=0)
                {
                 slidePartObj.style.marginLeft=ml;
                 value=ml;
                }
               else if(ml>width)
                {
                 slidePartObj.style.marginLeft=width;
                 value=width;
                }
               else if(ml<0)
                {
                 slidePartObj.style.marginLeft=0;
                 value=0;
                }
               
              ttt.setText(value);
              ttt.setMarginLeft(GetX(event));
              ttt.setMarginTop(GetY(event)-30);

           }
        }
     }
      
      // mouse out:
      backBoneObject.onmouseout=function()
      {
       ttt.setText('');
      }
      
      this.getValue=function(){return value;}
      this.setValue=function(val){slidePartObj.style.marginLeft=val;}
      
      
      this.setType=function(val)
      {
       if(val=='H')
       {
        Hslide=true;
        Vslide=false;
        document.getElementById(pid).style.width=width;
        document.getElementById(pid).style.height=height;
        backBoneObject.className='Hslider';
       }
      }

      
}

now we conside  how to  call these to headers(js & css)  to create full functionall silde bar 

include the headers in your html file by

<head>
<link rel="stylesheet" type="text/css" href="Slider.css"/>
<script language="javascript" type="text/javascript" src="Slider.js"></script>
</head>

now add the object where will slide be located

 <div id="slide2"></div>

now go with js object for slider

  var s2=new Slider('slide2',50,10,200,300);
      s2.setType('H');

here is the slide object , In IE.