/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: Henrik G.
  • Date: 2013-03-26 23:42:29 UTC
  • Revision ID: henrik.gustavsson@his.se-20130326234229-hkq5am6szg5g2akr
Added slider library

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
                function updateslider(e,kind,smin,smax,slen,sliderid,boxid)
 
23
                {
 
24
                                if(mb){
 
25
                                                coords=findPos(e.currentTarget);
 
26
                                                coords.x=e.clientX-coords.x;
 
27
                                                coords.y=e.clientY-coords.y;
 
28
                        
 
29
                                                cx=coords.x/slen;
 
30
                                                sd=smax-smin;
 
31
                                                
 
32
                                                val=smin+(sd*cx);       
 
33
                                                
 
34
                                                if(kind==1) val=Math.round(val);
 
35
                                                
 
36
                                                document.getElementById(boxid).value=val;                               
 
37
                                                document.getElementById(sliderid).style.left=Math.ceil((slen)*((val-smin)/sd));
 
38
                                }
 
39
                }
 
40
 
 
41
                var mb=0;
 
42
                
 
43
                function mbpress(e)
 
44
                {
 
45
                                mb=1;
 
46
                }
 
47
 
 
48
                function mbrelease(e)
 
49
                {
 
50
                                mb=0;
 
51
                }
 
52
 
 
53
                </script>
 
54
                </head>
 
55
                <body onmousedown="mbpress(event);" onmouseup="mbrelease(event);">
 
56
                                
 
57
                                <div style="background-color:#d0d0d4;border-radius:10px;width:220;height:300;padding:6px;">
 
58
                                                <br/>
 
59
                                                <input id="slider1box" type="text" style="float:left;width:40px;height:32px;font-family:Trebuchet;font-size:18px;"/>
 
60
                                                <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');">
 
61
                                                                <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>
 
62
                                                </div>
 
63
                                </div>
 
64
 
 
65
 
 
66
                                <div id="demo">Poo
 
67
                                </div>
 
68
                
 
69
                </body>
 
70
</html>
 
71
 
 
72
<!---
 
73
<div title="50" style="background-image: url(&quot;codebase/imgs/skins/dhx_skyblue/bg.gif&quot;); width: 260px;" class="dhtmlxSlider_dhx_skyblue">
 
74
        <div class="leftSide"></div>
 
75
        <div style="width: 122.5px;" class="leftZone"></div>
 
76
        <div style="width: 137.5px; left: 123.5px;" class="rightZone"></div>
 
77
        <div class="rightSide"></div>
 
78
        <div style="background-image: url(&quot;codebase/imgs/skins/dhx_skyblue/selector.gif&quot;); left: 122.5px;" class="selector">
 
79
                </div>
 
80
        </div>
 
81
 
 
82
 
 
83
 
 
84
 
 
85
 
 
86
        ---->
 
87
        
 
 
b'\\ No newline at end of file'