Template:Foo-lib-sliders

From Wikipedia

<foo-eventset id="slidernormal" register="true"> <foo-events targetpath="//*[contains(@class,'foo-slider')]" mousedown=" try { var t=event.currentTarget; var el=$($attr(t,'control')); document.fooSlider=el; document.fooSliderX=event.clientX; document.fooSliderY=event.clientY; el.fooHeight=parseInt(el.style.height) || el.clientHeight; el.fooWidth=parseInt(el.style.width) || el.clientWidth; el.fooType=$attr(t,'type') || 'horizontal'; fooEventsRegister('sliderdrag'); return false; } catch (e){alert(e).message} "/> </foo-eventset> <foo-eventset id="sliderdrag"> <foo-events targetref="content" mousemove=" var x = event.clientX; var y = event.clientY; el=document.fooSlider; switch (el.fooType) { case 'left': el.style.width = (el.fooWidth + x - document.fooSliderX)+'px'; break; case 'right': el.style.width = (el.fooWidth - x + document.fooSliderX)+'px'; break; case 'bottom': el.style.height = (el.fooHeight - y + document.fooSliderY)+'px'; break; case 'top': default: el.style.height = (el.fooHeight + y - document.fooSliderY)+'px'; } " mouseup=" el=document.fooSlider; switch (el.fooType) { case 'right': case 'left': el.style.width = el.clientWidth + 'px'; break; case 'top': case 'bottom': default: el.style.height = el.clientHeight + 'px'; } document.fooSlider=null; fooEventsUnregister('sliderdrag'); " /> </foo-eventset>
<style> .foo-slider[type=bottom], .foo-slider[type=top] { border:solid 2px #ddd; height:6px; background:#eee; margin:2px; cursor:s-resize; overflow:hidden; padding:0; } .foo-slider[type=left], .foo-slider[type=right] { border:solid 2px #ddd; width:3px; max-width:3px; background:#eee; margin:2px; cursor:e-resize; height:100px; overflow:hidden; padding:0; } </style>
Navigation