/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: a11patfr at his
  • Date: 2013-03-28 14:32:10 UTC
  • mto: (4.7.6 GammaBear)
  • mto: This revision was merged to the branch mainline in revision 6.
  • Revision ID: a11patfr@student.his.se-20130328143210-ung7pp2n0fcxmc3r
Fixed the last indents

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