notes and other stuff

I was looking a bit at yui slider packet, and it seems todo way too much. I am one of these crasy people that like to know how my code works and after look at yui code base, I decided it was too much for just a simple little slider.
 
Naturally js-frames are perfect if you just want something quick and dont think its fun to deal with cross browser issues. As I have come to know javascript better, I prefer to avoid all these frameworks.
I just want something that is easy to change/maintain/simple and doesnt have to many dependency.
 
So I decide to spend a little hour to create a simple slider that does what i want. It ended up just below 30 lines of javascript.
 
The HTML :

<div id="volumeBar" class="volumeBar">
<div id="volumeSlider" class="volumeSlider">

The Javascript: 
 
   
  var volumeBar = document.getElementById('volumeBar'); 
 
     var slider = document.getElementById('volumeSlider'); 
 
     var getPosition = function(el) { 
       var curLeft = curTop = 0; 
       while(el) { 
         curLeft += el.offsetLeft; 
         curTop += el.offsetTop; 
         el = el.offsetParent; 
       } 
       return {left : curLeft, top : curTop}; 
     } 
 
     volumeBar.onmouseup = function(e) { 
       volumeBar.onmousemove = null; 
       var event = e || window.event; 
       var volLeft = getPosition(volumeBar).left; 
       var width = volumeBar.offsetWidth; 
       slider.style.width = (event.clientX - volLeft)/width * 100 + 'px'; 
     }; 
 
     volumeBar.onmousedown = function() { 
       var volLeft = getPosition(volumeBar).left; 
       var width = volumeBar.offsetWidth; 
       document.onmouseup = function() { 
         document.onmouseup = null; 
         volumeBar.onmousemove = null; 
       }; 
       volumeBar.onmousemove = function(e) { 
         var event = e || window.event; 
         slider.style.width = (event.clientX - volLeft)/width * 100 + 'px'; 
       }; 
       return false; 
     };



						
						
						
            
          						
						
						
							
                
                  
							  

							    Filed under  //  
							      
              
                
							        javascript  
							      
              
                
							        slider  
							      
              
            
							  
     
							
                
              
						

						
						
            
          
					

I wish html forms could do more, they are just so static, and more less useless on a dynamic website.

Like imaging if you could do something like this :

<form action="/api/rest/createUser" onsubmit="jsonRequest(this.requestUrl)">


  <input type="submit" value="do magic"/>


  <select name="video">


    <option value="1">Video 1</option> 


    <option value="2">Video 2</option>


  </select>


</form> 

Where jsonRequest would do a asyc request, and the requestUrl would have the value of the action and all the parameters.

eg. if Video 1 was selected, the requestUrl would have the value on submit of :

/api/rest/createUser?video=1

That would make forms a bit more useful. Perhaps I should take a look at HTML5 and see if help is coming.