Posts

Showing posts from January, 2016

MAKE PROGRESS BAR THAT LOOKS LIKE YOUTUBE'S

Image
Progress bars are created using the Progress bar element. For example: <progress id = "pBar" width = "576" height = "4" value = "0"></progress> Being essentially a time clock, progress bar theoretically needs to perform an uniform motion with constant velocity v (v=xmax/tmax). However this velocity needs to change in two cases: 1- When the currently playing video reaches to its end and the new one starts playing (tmax changes). 2- When the webpage user click on the 'player size' button to change the player's and progress-bar's width (xmax changes).  So we need to build the following mathematical  function : distance(x) = velocity(v) * time(t) = (xmax/tmax)*t  = f(t, tmax, xmax) where t is variable and tmax, xmax are parametters (parametter are the variable which rarely changes) (Notice that, in javascript all of them t, tmax, xmax are known as function's parameters ) (1) xmax = document.getElemen