/lenasys/trunk

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

« back to all changes in this revision

Viewing changes to trunk/Widget Library/SliderDemo.html

  • Committer: gustav.hartvigsson at gmail
  • Date: 2013-04-02 13:00:31 UTC
  • mfrom: (4.7.8 GammaBear)
  • Revision ID: gustav.hartvigsson@gmail.com-20130402130031-442y89s0cfzmw3r2
Merged stuff.

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/Widget Library/SliderDemo.html
 
1
<!DOCTYPE html>
 
2
<html>
 
3
        <head>
 
4
                <title></title>
 
5
                <script>
 
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
                        }
 
49
                </script>
 
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'