David H.H.Lee
asked on
Dynamic Slider Control
Greeting to all Experts :
I want to build a slider control based on user input. Let me explain it based on layout HTML :
Basically i want to do create a dynamically slider control based on user input. The layout should be like that :
How many slider you need? Total :>> [User key in value]
Eg:
I key in 3, then, that's will be 3 dynamically slider control + label will be generate :
____________________
Slider 1 |-------------------||---- ----| label //If i drag value 1, i'also need to see the label change to 1 too
-------------------------- -----
____________________
Slider 2 |-------------------||---- ----| label
-------------------------- ------
____________________
Slider 3 |-------------------||---- ----| label
-------------------------- ------
Last, i need to see the scale for each slider control too. Like this format :
eg:
1 2 3 4 5 6 7 8 9
| | | | | | | | | <-----------value is 1 - 9 only
____________________
Slider 1 |-------------------||---- ----| label
-------------------------- ------
-After user key in all the value, i'll need to able to get the value from each slider value selected by user.
Later, i'll need to retrieve it based on value come from database. But, it's ok for me if my requirement above achieve.
I got some snippet code, can you modify it based on my problems?
slider.html
==========
<script>
var drag=false, obj, base, lbl;
var int=20, head=5, w=1, dif=int-head+w, limit=10; int+=w;
var startnum=1;
function dragit(x){
var fromleft=x-base.offsetLeft -dif, newnum=Math.round(fromleft /int);
if(newnum>limit){newnum=li mit;}else if(newnum<1){newnum=1;}
document.forms[0].output.v alue=newnu m-1; newnum=(newnum-1)*int;
obj.style.left=newnum+base .offsetLef t;}
function init(){
obj=document.getElementByI d('tab');
base=document.getElementBy Id('base') ;
document.forms[0].output.v alue=start num-1;
obj.style.top=base.offsetL eft+10;
obj.style.left=(startnum-1 )*int+base .offsetLef t;}
</script>
<body bgcolor=cccccc onload="init();" onmousemove="if(drag){drag it(event.x +document. body.scrol lLeft);}" onmouseup="drag=false;">
<form>
<div id=base>
<img src='base.gif'></div>
<div id=tab style="font-size:0;positio n:absolute ;" onmousedown="drag=true;">
<img src='tab.gif' unselectable=on
onmousedown="this.src='tab 2.gif';" onmouseup="this.src='tab.g if';">
</div>
<input type=text name=output size="2">
</form>
I'll always Appreciate for any helps.
Your effort will appreciate if any source/references/modifica tion code above to lead me to solve the problems.
Thanks.
Regards
x_com
I want to build a slider control based on user input. Let me explain it based on layout HTML :
Basically i want to do create a dynamically slider control based on user input. The layout should be like that :
How many slider you need? Total :>> [User key in value]
Eg:
I key in 3, then, that's will be 3 dynamically slider control + label will be generate :
____________________
Slider 1 |-------------------||----
--------------------------
____________________
Slider 2 |-------------------||----
--------------------------
____________________
Slider 3 |-------------------||----
--------------------------
Last, i need to see the scale for each slider control too. Like this format :
eg:
1 2 3 4 5 6 7 8 9
| | | | | | | | | <-----------value is 1 - 9 only
____________________
Slider 1 |-------------------||----
--------------------------
-After user key in all the value, i'll need to able to get the value from each slider value selected by user.
Later, i'll need to retrieve it based on value come from database. But, it's ok for me if my requirement above achieve.
I got some snippet code, can you modify it based on my problems?
slider.html
==========
<script>
var drag=false, obj, base, lbl;
var int=20, head=5, w=1, dif=int-head+w, limit=10; int+=w;
var startnum=1;
function dragit(x){
var fromleft=x-base.offsetLeft
if(newnum>limit){newnum=li
document.forms[0].output.v
obj.style.left=newnum+base
function init(){
obj=document.getElementByI
base=document.getElementBy
document.forms[0].output.v
obj.style.top=base.offsetL
obj.style.left=(startnum-1
</script>
<body bgcolor=cccccc onload="init();" onmousemove="if(drag){drag
<form>
<div id=base>
<img src='base.gif'></div>
<div id=tab style="font-size:0;positio
<img src='tab.gif' unselectable=on
onmousedown="this.src='tab
</div>
<input type=text name=output size="2">
</form>
I'll always Appreciate for any helps.
Your effort will appreciate if any source/references/modifica
Thanks.
Regards
x_com
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
NetGroove ,
One word to describe you : AWESOME!!!
Your code is work prefectly as i need! THANKS a millions time!!!!
I really appreciate your help, should be award with bonus points for your great help!
I'm willing to award BONUS points to you at this thread :
http://oldlook.experts-exchange.com/questions/20804660/Points-only-For-NetGroove.html
THANKS!!!
Regards
x_com
One word to describe you : AWESOME!!!
Your code is work prefectly as i need! THANKS a millions time!!!!
I really appreciate your help, should be award with bonus points for your great help!
I'm willing to award BONUS points to you at this thread :
http://oldlook.experts-exchange.com/questions/20804660/Points-only-For-NetGroove.html
THANKS!!!
Regards
x_com
Thank you!
how can I get the slider values for further processing
<html>
<head>
<script>
var sCount = 0;
function incSlidCount(theField){
theField.value=theField.va
newCount = theField.value * 1;
if(newCount>sCount){
sArea = document.getElementById('s
for(i=sCount;i<theField.va
sArea.innerHTML += newSlider(i+1)
}
sCount = newCount;
}
}
function newSlider(sId){
sCode = '<table border=0>'
sCode += '<tr style="font-size:12"><td><
for(var i=1;i<10;i++){
sCode+='<td><center>'+i+'<
}
sCode += '<td> </td></tr
sCode += '<tr style="font-size:6"><td></
for(var i=1;i<10;i++){
sCode+='<td><center>|</cen
}
sCode += '<td> </td></tr
sCode += '<tr><td>Slider '+sId+'</td><td colspan="11">';
sCode += '<span id="S'+sId+'" style="overflow-x:scroll; overflow-y:hidden; width:200; height=15;"';
sCode += ' onScroll="scrollSlider(thi
for(var i=0;i<600;i++){
sCode+= " ";
}
sCode+='</span></td><td>';
sCode+='<span id="LS'+sId+'">1</span></t
return sCode;
}
function scrollSlider(theSpan){
sId = theSpan.id;
document.getElementById('L
}
function enter(e){
keyCode = (e.keyCode)?e.keyCode:e.wh
if(keyCode==13) {
e.srcElement.onchange();
return false;
}
}
</script>
</head>
<body onLoad="document.forms[0].
<form>
How many slider you need? Total:
<input type=text name="slidCount" size="1" value="0" onChange="incSlidCount(thi
<div id="sliderFarm"></div>
</form>
</body>
</html>