/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: c11emian
  • Date: 2013-04-03 12:27:12 UTC
  • mfrom: (9 lenasys)
  • mto: (9.2.2 lenasys)
  • mto: This revision was merged to the branch mainline in revision 11.
  • Revision ID: c11emian@student.his.se-20130403122712-ha93wrxm4isfv16h
Adjusted the file showcode.php so that it conforms to our code standard.

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'