Need Scroll Scale Bars to change values

hi,

i need 2 scroll bars inside the site to change the value of some thing like height and width but they have to work in accordance with each other if one is 25 the other has to be 25 aswell or 98 - 98 . one has to be aligned vertical the other horizontal.

Its very easy to implement these in TCL / TK

have a look at these pics thats in TCL / TK and it would be nice if
they could look like those:

 http://www.apexmedia.de/ebay/scale.gif
 http://www.apexmedia.de/ebay/scale2.gif
DopemanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NetGrooveCommented:
Check this for browser side only:

<html>
<head>
<script>
var sCount = 0;
var theForm;
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>';
sCode+='<input type=hidden name="VS'+sId+'" value="1">';
return sCode;
}

function scrollSlider(theSpan){
sId = theSpan.id;
sVal = Math.round(theSpan.scrollLeft/theSpan.scrollWidth*9)+1;
document.getElementById('L'+sId).innerHTML = sVal;
theForm["V"+sId].value = sVal;
}

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

function showSliderValues(theButton){
 msg = "";
 theForm = theButton.form;
 for(i=1;i<=sCount;i++){
   msg+= "\n\tslider"+i+"= "+theForm["VS"+i].value;
 }
 alert("Slider positions:"+msg)
}
</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>
<input type=button value="Show" onClick="showSliderValues(this)">
</form>
</body>
</html>


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NetGrooveCommented:
And this for ASP server side control:

<%@ LANGUAGE = VBScript %>
<%  Option Explicit     %>
<%

Function newSlider(sId)
 Dim sCode
Dim i
sCode = "<table border=0>"
sCode = sCode & "<tr style='font-size:12'><td></td><td>&nbsp;&nbsp;</td>"
For i = 1 to 9
   sCode = sCode & "<td><center>" & i & "</center></td>"
Next
sCode = sCode & "<td>&nbsp;&nbsp;</td></tr>"
sCode = sCode & "<tr style='font-size:6'><td></td><td>&nbsp;&nbsp;</td>"
For i = 1 to 9
   sCode = sCode & "<td><center>|</center></td>"
Next
sCode = sCode & "<td>&nbsp;&nbsp;</td></tr>"
sCode = sCode & "<tr><td>Slider " & sId & "</td><td colspan='11'>"
 sCode = sCode & "<span id='S" & sId & "' style='overflow-x:scroll; overflow-y:hidden; width:200; height=15;'"
sCode = sCode & " onScroll='scrollSlider(this)'>"
For i = 1 to 600
  sCode = sCode & "&nbsp;"
Next
sCode = sCode & "</span></td><td>"
sCode = sCode & "<span id='LS" & sId & "'>1</span></td></tr></table>"
sCode = sCode & "<input type=hidden name='VS" & sId & "' value='1'>" & Chr(13)
Response.Write sCode
If (Request.form("VS" & sId) > "") Then  
%>
  <script>setSlider('S<%=sId%>', <%=Request.form("VS" & sId)%>)</script>
<%  
End If
End Function

%>

<html>
<head>
<title>Gauge</title>
<script>
function setSlider(sId, sVal){
 sObj = document.getElementById(sId);
 sObj.scrollLeft = sObj.scrollWidth/9*(sVal-1);
}

function scrollSlider(theSpan){
theForm = document.forms[0];
sId = theSpan.id;
sVal = Math.round(theSpan.scrollLeft/theSpan.scrollWidth*9)+1;
theForm["V"+sId].value = sVal;
document.getElementById('L'+sId).innerHTML = sVal;
}

function init(){
 theForm = document.forms[0];
}

</script>

</head>
<body>
<form name="myForm" METHOD="Post">

<% newSlider(1) %>

<% newSlider(2) %>

<% newSlider(3) %>

<br><br>
<input type=submit>

</form>
</body>
</html>

0
DopemanAuthor Commented:
thanks for the quick answer,

i cant try the ASP one because i only have PHP support :( but the other one works fine exept for 4 things.

1. How can i syncronize them so that they work togehter on shows 20 the other one shows 2 aswell.

2. How can i make him show the result after i moved one of the scroll bars?

3. How can make a larger scale? like 100 or 1000

4 How can i make a vertical scale?

i tried to solve them myself but i dont know much about Javascript ;)

thanks,
Dope
0
DopemanAuthor Commented:
!!!UPDATE!!!

Question number one is NOT important any more, but i need something like a preset value so i have a scale from 1 to 100
and the scale is preset on 50.

Is that possible???


0
DopemanAuthor Commented:
Thanks NetGrove for your good and quick help
 but I found a slider solution which has more options i requiered here:

http://webfx.eae.net/dhtml/slider/slider.html

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.