asked on

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

ASKER CERTIFIED SOLUTION

NetGroove

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NetGroove

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>  </td>"
For i = 1 to 9
sCode = sCode & "<td><center>" & i & "</center></td>"
Next
sCode = sCode & "<td>  </td></tr>"
sCode = sCode & "<tr style='font-size:6'><td></td><td>  </td>"
For i = 1 to 9
sCode = sCode & "<td><center>|</center></td>"
Next
sCode = sCode & "<td>  </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 & " "
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>

Dopeman

ASKER

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

Dopeman

ASKER

!!!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???

Dopeman

ASKER

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