/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-02 12:13:01 UTC
  • mfrom: (4.2.7 hitlerhorabajs)
  • Revision ID: gustav.hartvigsson@gmail.com-20130402121301-ytfzuo7y6cku9s3o
Merge from implemenation group 2:s branch.

Show diffs side-by-side

added added

removed removed

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