Solved

Dynamic Slider Control

Posted on 2003-11-19
5
719 Views
Last Modified: 2008-02-01
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=limit;}else if(newnum<1){newnum=1;}
document.forms[0].output.value=newnum-1; newnum=(newnum-1)*int;
obj.style.left=newnum+base.offsetLeft;}

function init(){
obj=document.getElementById('tab');
base=document.getElementById('base');
document.forms[0].output.value=startnum-1;
obj.style.top=base.offsetLeft+10;
obj.style.left=(startnum-1)*int+base.offsetLeft;}
</script>

<body bgcolor=cccccc onload="init();" onmousemove="if(drag){dragit(event.x+document.body.scrollLeft);}" onmouseup="drag=false;">
<form>
<div id=base>
<img src='base.gif'></div>
<div id=tab style="font-size:0;position:absolute;" onmousedown="drag=true;">
<img src='tab.gif' unselectable=on
onmousedown="this.src='tab2.gif';" onmouseup="this.src='tab.gif';">
</div>
<input type=text name=output size="2">
</form>

I'll always Appreciate for any helps.
Your effort will appreciate if any source/references/modification code above to lead me to solve the problems.

Thanks.

Regards
x_com

0
Comment
Question by:David H.H.Lee
  • 3
5 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9785780
How about this:


<html>
<head>
<script>
var sCount = 0;
function incSlidCount(theField){
  theField.value=theField.value.replace(/\D/g,'');
  newCount = theField.value * 1;
  if(newCount>sCount){
    sArea = document.getElementById('sliderFarm');
    for(i=sCount;i<theField.value;i++){
      sArea.innerHTML += newSlider(i+1)
    }
    sCount = newCount;
  }
}
function newSlider(sId){
  sCode = '<table border=0>'
  sCode += '<tr style="font-size:12"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>'+i+'</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr style="font-size:6"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>|</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</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(this)">';
  for(var i=0;i<600;i++){
    sCode+= "&nbsp;";
  }
  sCode+='</span></td><td>';
  sCode+='<span id="LS'+sId+'">1</span></td></tr></table>';
  return sCode;
}

function scrollSlider(theSpan){
  sId = theSpan.id;
  document.getElementById('L'+sId).innerHTML = Math.round(theSpan.scrollLeft/260)+1;
}

function enter(e){
  keyCode = (e.keyCode)?e.keyCode:e.which;
  if(keyCode==13) {
    e.srcElement.onchange();
    return false;
  }
}
</script>

</head>
<body onLoad="document.forms[0].slidCount.focus()">
<form>
How many slider you need? Total:
<input type=text name="slidCount" size="1" value="0" onChange="incSlidCount(this)" onKeyPress="return enter(event)">
<div id="sliderFarm"></div>
</form>
</body>
</html>



0
 
LVL 10

Accepted Solution

by:
NetGroove earned 0 total points
ID: 9785865
Here a small improvement:


<html>
<head>
<script>
var sCount = 0;
function incSlidCount(theField){
  theField.value=theField.value.replace(/\D/g,'');
  newCount = theField.value * 1;
  if(newCount>sCount){
    sArea = document.getElementById('sliderFarm');
    for(i=sCount;i<theField.value;i++){
      sArea.innerHTML += newSlider(i+1)
    }
    sCount = newCount;
  }
}
function newSlider(sId){
  sCode = '<table border=0>'
  sCode += '<tr style="font-size:12"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>'+i+'</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</td></tr>'
  sCode += '<tr style="font-size:6"><td></td><td>&nbsp;&nbsp;</td>';
  for(var i=1;i<10;i++){
    sCode+='<td><center>|</center></td>'
  }
  sCode += '<td>&nbsp;&nbsp;</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(this)">';
  for(var i=0;i<600;i++){
    sCode+= "&nbsp;";
  }
  sCode+='</span></td><td>';
  sCode+='<span id="LS'+sId+'">1</span></td></tr></table>';
  return sCode;
}

function scrollSlider(theSpan){
  sId = theSpan.id;
  document.getElementById('L'+sId).innerHTML = Math.round(theSpan.scrollLeft/theSpan.scrollWidth*9)+1;
}

function enter(e){
  keyCode = (e.keyCode)?e.keyCode:e.which;
  if(keyCode==13) {
    e.srcElement.onchange();
    return false;
  }
}
function init(){
  document.forms[0].slidCount.select();
  document.forms[0].slidCount.focus();
}
</script>

</head>
<body onLoad="init()">
<form>
How many slider you need? Total:
<input type=text name="slidCount" size="1" value="0" onChange="incSlidCount(this)" onKeyPress="return enter(event)">
<div id="sliderFarm"></div>
</form>
</body>
</html>



0
 
LVL 29

Author Comment

by:David H.H.Lee
ID: 9792542
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/Web/Web_Languages/JavaScript/Q_20804660.html

THANKS!!!

Regards
x_com
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9795270
Thank you!
0
 

Expert Comment

by:sowji0909
ID: 20817308
how can I get  the slider  values  for further processing
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Tag input html 4 38
listing all functions in JavaScript 19 105
JavaScript error 1 33
Put upload button on your image and change it 2 24
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now