jquerypp/dom/dimensions/dimensions.html at builder · mischou/jquerypp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Dimensions Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            #inner {
                height: 100%;
                width: 100%;
                background-color: red;
            }
            #block {
                height: 200px;
                width: 200px;
                padding: 0 40px 40px 0;
                margin: 0 10px 10px 0;
                background-color: blue;
                border-right: solid 20px green;
                border-bottom: solid 20px green;
            }
            #wrapper {
                border: dashed 1px gray;
                float: left;
                clear: left;
                background-color: yellow;
            }
            #width { background-color: red;}
            #paddingRight {background-color: blue;}
            #borderRightWidth {background-color: green;}
            #innerWidth {color: #000080;}
            #outerWidth {color: #008000;}
            #marginRight {background-color: yellow}
            input {
                text-align: right;
                font-size: 14pt;
                font-weight: bold;
                width: 100px;
            }
            label {
                display: inline-block;
                width: 100px;
                text-align: right;
            }
        </style>
    </head>
    <body>


<div id="demo-html">
<p>Adjust The red box's layout properties.</p>
<label>  Width</label> <input id='width'/><br/>
<label>+ Padding </label> <input id='paddingRight'/><br/>
<label>= Inner</label> <input id='innerWidth'/><br/>
<label>+ Border</label> <input id='borderRightWidth'/><br/>
<label>= Outer</label> <input id='outerWidth'/><br/>
<label>  Margin</label> <input id='marginRight'/><br/>
<br/>

<div id='wrapper'>
    <div id='block'>
        <div id='inner'>
            Adjust My Layout Properties
        </div>
    </div>
</div>
</div>
<div style='clear:both'></div>
        <script type='text/javascript'
                src='../../../steal/steal.js'>
        </script>
<script type='text/javascript' id="demo-source">
steal('jquerypp/dom/dimensions').then(function(){
// sets the values in the input boxes
var set = function() {

  var block =  $('#block');

  //get with .fn helpers
  $("#outerWidth, #innerWidth, #width").each(function(){
    $(this).val( block[this.id]() )
  })

  //use styles
  $.each($('#block').styles("paddingRight",
    "borderRightWidth",
    "marginRight"), function(name, val){
    $("#"+name).val( parseInt(val)  )
  });
}
set();

// updates the dimensions of the block
var update = function( ev ) {
  var name = ev.target.id,
      val = parseInt( $(ev.target).val() ),
      opposite = {Width: "Height", Right: "Bottom"},
      // the opposite dimension name
      otherName = name.replace(/width|right/i, function(part, i){
        return i == 0 ? "height" : opposite[part];
      }),
      block = $('#block'),
      css = {};

  if( block[name] ) {
    // set with innerHeight, outerHeight, etc
    block[name]( val )[otherName](val)
  }else{
    // set as css property
    css[name] = val+"px"
    css[otherName] = val+"px"
    block.css(css)
  }

  set();
};

// call update on change or after
// typing has stopped for a second
var timer;
$("input").live('change',update)
$("input").live('keyup',function(ev) {
  clearTimeout(timer)
  timer = setTimeout(function() {
    update(ev)
  },1400)
})
})
</script>
    </body>
</html>