DHTML Adjust Bars - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


DHTML Adjust Bars		[View Sample]

This is a demonstration of using DHTML to create "adjust" bars, similar in interface to a volume control bar of Windows. In the demo, the bars function as color adjusters, though, through modification, can be set to do virtually anything.


Insert into <HEAD>
<style>.drag {position: relative; cursor: hand}</style> <SCRIPT LANGUAGE="JavaScript1.2"> // Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of code (draglayer, movelayer) by DynamicDrive.com // This script is free for use, please leave this notice intact var sPosition; var showPerc=100; document.onmousedown=dragLayer document.onmouseup=new Function("dragMe=false") var Color= new Array(); Color[0] = "00"; Color[1] = "11"; Color[2] = "22"; Color[3] = "33"; Color[4] = "44"; Color[5] = "55"; Color[6] = "66"; Color[7] = "77"; Color[8] = "88"; Color[9] = "99"; Color[10] = "AA"; Color[11] = "BB"; Color[12] = "CC"; Color[13] = "DD"; Color[14] = "EE"; Color[15] = "FF"; // Demofunction to change bg-color by moving slider var rVal,gVal,bVal, cCol function chgBg() { cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2); ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15; // If more sliders are used, each of them has to be handled separately if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal; if (kObj.id =="knobImg1") document.bgColor="#"+rVal+Color[ind]+bVal; if (kObj.id =="knobImg2") document.bgColor="#"+rVal+gVal+Color[ind]; } // Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated var dragMe=false, kObj, yPos,direction function moveLayer() { if (event.button==1 && dragMe) { oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; // Limit movement of knob to stay inside layer if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up"; if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";} if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";} // Set working variable 'showPerc' depending on 100 or 250 scaling sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; // The following line should be replaced by the function-call with the actual task to perform chgBg(); return false; } } function dragLayer() { if (!document.all) return; if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; } } </script>

Insert into <BODY>
<!-- Each of the 'outerLyr#'-divs creates a slider element. There can be as much sliders as needed. Just make sure, they have different names, especially the img (knob is referred and acted on by name)--> <p>This is an impressive demonstration of using DHTML to create adjust bars. Here in the demo, the bars function as color adjusters, though, through modification, can be set to do virtually anything. <div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000"> <img id="knobImg" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px"> <div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px"> <div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> </div> <div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000"> <img id="knobImg1" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px"> <div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px"> <div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> </div> <div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000"> <img id="knobImg2" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px"> <div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px"> <div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> <!-- This would be a way to configure if slider range is 0-100 or 0-255 --> </div> <input type="radio" name="perCent" value="false">Prozent <input type="radio" name="perCent" value="true" checked>255

Other Options