/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to trunk/Widget Library/SliderDemo.html

  • Committer: gustav.hartvigsson at gmail
  • Date: 2013-04-04 11:04:16 UTC
  • mfrom: (11.1.4 duggor)
  • Revision ID: gustav.hartvigsson@gmail.com-20130404110416-gbdfygvxsbe40bfh
Merged Wikxen:s fixes for DuggaSys SQL.

Show diffs side-by-side

added added

removed removed

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