1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<html>
<head>
<script>
// Recursive Pos of div in document - should work in most browsers
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return {
x:curleft,
y:curtop
}
}
// The idea is to have a few functions like this one and minimum javascript intervention
function updateslider(e,kind,smin,smax,slen,sliderid,boxid)
{
if(mb){
coords=findPos(e.currentTarget);
coords.x=e.clientX-coords.x;
coords.y=e.clientY-coords.y;
cx=coords.x/slen;
sd=smax-smin;
val=smin+(sd*cx);
if(kind==1) val=Math.round(val);
document.getElementById(boxid).value=val;
document.getElementById(sliderid).style.left=Math.ceil((slen)*((val-smin)/sd));
}
}
var mb=0;
function mbpress(e)
{
mb=1;
}
function mbrelease(e)
{
mb=0;
}
</script>
</head>
<body onmousedown="mbpress(event);" onmouseup="mbrelease(event);">
<div style="background-color:#d0d0d4;border-radius:10px;width:220;height:300;padding:6px;">
<br/>
<input id="slider1box" type="text" style="float:left;width:40px;height:32px;font-family:Trebuchet;font-size:18px;"/>
<div id="slider1" style="margin-left:42px;width:160;height:32;border-style:none;border-width:1px;background-position:center;background-image:url('sliderline.png');background-repeat: repeat-x;" onmousemove="updateslider(event,1,2,7,160,'slider1marker','slider1box');" onmouseup="updateslider(event,1,2,7,160,'slider1marker','slider1box');">
<div id="slider1marker" style="position:relative;left:60;width:14;height:32;background-image:url('sliderring14.png');background-repeat:no-repeat;background-position:center;"></div>
</div>
</div>
<div id="demo">Poo
</div>
</body>
</html>
|