respondsass 1.0 → 1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +179 -0
- data/lib/respondsass.rb +3 -29
- data/stylesheets/_respondsass.scss +8 -0
- data/stylesheets/respondsass/_baseline.scss +56 -0
- data/stylesheets/respondsass/_buttons.scss +32 -0
- data/stylesheets/respondsass/_col-generator.scss +11 -0
- data/stylesheets/respondsass/_create-grid.scss +40 -0
- data/stylesheets/respondsass/_easy-nav.scss +44 -0
- data/stylesheets/respondsass/_rem-sizing.scss +9 -0
- data/stylesheets/respondsass/_respond-to.scss +14 -0
- data/templates/project/_base.scss +12 -0
- data/templates/project/examples.html +130 -0
- data/templates/project/index.html +44 -0
- data/templates/project/manifest.rb +27 -0
- data/templates/project/screen.scss +38 -0
- data/templates/project/scripts/boxsizing.htc +501 -0
- data/templates/project/scripts/html5shiv.js +8 -0
- data/templates/project/scripts/modernizr.custom.js +4 -0
- data/templates/project/scripts/respond.min.js +6 -0
- metadata +37 -27
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
|
|
3
|
+
<!--[if IE 7 ]><html lang="en" class="no-js ie7><![endif]-->
|
|
4
|
+
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
|
|
5
|
+
<!--[if IE 9 ]><html lang="en" class="no-js ie9"><![endif]-->
|
|
6
|
+
<!--[if (gt IE 9)|!(IE)]><!-->
|
|
7
|
+
<html lang="en" class="no-js"><!--<![endif]-->
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="utf-8">
|
|
10
|
+
<title>Title here</title>
|
|
11
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
12
|
+
<meta name="description" content="Page description here">
|
|
13
|
+
<meta name="keywords" content="keywords, here">
|
|
14
|
+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
15
|
+
<link rel="stylesheet" href="stylesheets/screen.css">
|
|
16
|
+
<script type="text/javascript" async src="javascripts/modernizr.custom.js"></script>
|
|
17
|
+
<script type="text/javascript" async src="javascripts/respond.min.js"></script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<div class="container">
|
|
22
|
+
<section class="row">
|
|
23
|
+
<div class="span-1">
|
|
24
|
+
<p>Column 1</p>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="span-1">
|
|
27
|
+
<p>Column 2</p>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="span-1">
|
|
30
|
+
<p>Column 3</p>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="span-1">
|
|
33
|
+
<p>Column 4</p>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="span-1">
|
|
36
|
+
<p>Column 5</p>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="span-1">
|
|
39
|
+
<p>Column 6</p>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="span-1">
|
|
42
|
+
<p>Column 7</p>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="span-1">
|
|
45
|
+
<p>Column 8</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="span-1">
|
|
48
|
+
<p>Column 9</p>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="span-1">
|
|
51
|
+
<p>Column 10</p>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="span-1">
|
|
54
|
+
<p>Column 11</p>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="span-1">
|
|
57
|
+
<p>Column 12</p>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="span-1">
|
|
60
|
+
<p>Column 13</p>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="span-1">
|
|
63
|
+
<p>Column 14</p>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="span-1">
|
|
66
|
+
<p>Column 15</p>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="span-1">
|
|
69
|
+
<p>Column 16</p>
|
|
70
|
+
</div>
|
|
71
|
+
</section>
|
|
72
|
+
<section class="row">
|
|
73
|
+
<div class="thirds-1">
|
|
74
|
+
<p>One Third</p>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="thirds-2">
|
|
77
|
+
<p>Two Thirds</p>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
<section class="row">
|
|
81
|
+
<div class="fifths-3">
|
|
82
|
+
<p>3 Fifths</p>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="fifths-2">
|
|
85
|
+
<p>2 Fifths</p>
|
|
86
|
+
</div>
|
|
87
|
+
</section>
|
|
88
|
+
<section class="row">
|
|
89
|
+
<div class="fifths-4">
|
|
90
|
+
<p>4 Fifths</p>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="fifths-1">
|
|
93
|
+
<p>1 Fifth</p>
|
|
94
|
+
</div>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<section class="row">
|
|
98
|
+
<div class="cols-2">
|
|
99
|
+
<p>Cols span 2</p>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="cols-3">
|
|
102
|
+
<p>Cols span 3</p>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="cols-6">
|
|
105
|
+
<p>Cols span 6</p>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="cols-1">
|
|
108
|
+
<p>Cols span 1</p>
|
|
109
|
+
</div>
|
|
110
|
+
</section>
|
|
111
|
+
<!-- End .row -->
|
|
112
|
+
</div>
|
|
113
|
+
<!-- End .container.row -->
|
|
114
|
+
|
|
115
|
+
<script type="text/javascript">
|
|
116
|
+
// Your Google analytics here
|
|
117
|
+
var _gaq = _gaq || [];
|
|
118
|
+
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
|
|
119
|
+
_gaq.push(['_trackPageview']);
|
|
120
|
+
|
|
121
|
+
(function() {
|
|
122
|
+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
123
|
+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
124
|
+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
125
|
+
})();
|
|
126
|
+
|
|
127
|
+
</script>
|
|
128
|
+
</body>
|
|
129
|
+
|
|
130
|
+
</html>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
|
|
3
|
+
<!--[if IE 7 ]><html lang="en" class="no-js ie7><![endif]-->
|
|
4
|
+
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
|
|
5
|
+
<!--[if IE 9 ]><html lang="en" class="no-js ie9"><![endif]-->
|
|
6
|
+
<!--[if (gt IE 9)|!(IE)]><!-->
|
|
7
|
+
<html lang="en" class="no-js"><!--<![endif]-->
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="utf-8">
|
|
10
|
+
<title>Title here</title>
|
|
11
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
12
|
+
<meta name="description" content="Page description here">
|
|
13
|
+
<meta name="keywords" content="keywords, here">
|
|
14
|
+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
15
|
+
<link rel="stylesheet" href="stylesheets/screen.css">
|
|
16
|
+
<script type="text/javascript" async src="javascripts/modernizr.custom.js"></script>
|
|
17
|
+
<script type="text/javascript" async src="javascripts/respond.min.js"></script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<div class="container">
|
|
22
|
+
<section class="row">
|
|
23
|
+
|
|
24
|
+
</section>
|
|
25
|
+
<!-- End .row -->
|
|
26
|
+
</div>
|
|
27
|
+
<!-- End .container.row -->
|
|
28
|
+
|
|
29
|
+
<script type="text/javascript">
|
|
30
|
+
// Your Google analytics here
|
|
31
|
+
var _gaq = _gaq || [];
|
|
32
|
+
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
|
|
33
|
+
_gaq.push(['_trackPageview']);
|
|
34
|
+
|
|
35
|
+
(function() {
|
|
36
|
+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
37
|
+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
38
|
+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
39
|
+
})();
|
|
40
|
+
|
|
41
|
+
</script>
|
|
42
|
+
</body>
|
|
43
|
+
|
|
44
|
+
</html>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Make sure you list all the project template files here in the manifest.
|
|
2
|
+
stylesheet 'screen.scss', :media => 'screen, projection'
|
|
3
|
+
stylesheet '_base.scss'
|
|
4
|
+
|
|
5
|
+
file 'scripts/boxsizing.htc', :like => :javascript, :to => 'boxsizing.htc'
|
|
6
|
+
file 'scripts/html5shiv.js', :like => :javascript, :to => 'html5shiv.js'
|
|
7
|
+
file 'scripts/modernizr.custom.js', :like => :javascript, :to => 'modernizr.custom.js'
|
|
8
|
+
file 'scripts/respond.min.js', :like => :javascript, :to => 'respond.min.js'
|
|
9
|
+
|
|
10
|
+
html 'index.html'
|
|
11
|
+
html 'examples.html'
|
|
12
|
+
|
|
13
|
+
description "Respondsass: a fully configurable grid system native to Compass."
|
|
14
|
+
|
|
15
|
+
help %Q{
|
|
16
|
+
Please see the Respondsass website for all documentation and tutorials:
|
|
17
|
+
|
|
18
|
+
http://ww.my-html-codes.com/respondsass
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
welcome_message %Q{
|
|
22
|
+
Please see the Respondsass website for all documentation and tutorials:
|
|
23
|
+
|
|
24
|
+
http://ww.my-html-codes.com/respondsass
|
|
25
|
+
|
|
26
|
+
To get started, set up your grid in the base partial by following the inline instructions.
|
|
27
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
//import compass css3 mixins for use in your project.
|
|
2
|
+
@import "compass/css3";
|
|
3
|
+
//import compass reset for use in your project.
|
|
4
|
+
@import "compass/reset";
|
|
5
|
+
|
|
6
|
+
//DO NOT DELETE
|
|
7
|
+
//set boxing sizing to border-box for all browsers.
|
|
8
|
+
*{
|
|
9
|
+
@include box-sizing(border-box);
|
|
10
|
+
*behavior: url(scripts/boxsizing.htc);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
//Imports the _base.scss file into the main css file.
|
|
14
|
+
@import "base";
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
// ***** JUST FOR EXAMPLES DELETE AS NECESSARY ******
|
|
18
|
+
body {
|
|
19
|
+
font-family: $fontFamily;
|
|
20
|
+
@include rem-sizing(font-size, 0.8);
|
|
21
|
+
line-height:1.5;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@include create-grid(thirds, 3); // The thirds argument is your own column name and will create class name of thirds suffixed with a number, number of columns
|
|
25
|
+
|
|
26
|
+
@include create-grid(); // This is the default and will create a 16 column grid with class names of span suffixed with a number
|
|
27
|
+
|
|
28
|
+
@include create-grid(fifths, 5); // 5 columns with class name of fifths
|
|
29
|
+
|
|
30
|
+
@include create-grid(cols, 12); // 12 columns with class name of cols
|
|
31
|
+
|
|
32
|
+
.span-1, .thirds-1, .thirds-2, .fifths-1, .fifths-2, .fifths-3, .fifths-4, .cols-1, .cols-2, .cols-3, .cols-4, .cols-5, .cols-6 {
|
|
33
|
+
background-color: #ccc;
|
|
34
|
+
border:3px solid #fff;
|
|
35
|
+
height: 50px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// ******* END OF EXAMPLE CSS ********
|
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* box-sizing Polyfill
|
|
3
|
+
*
|
|
4
|
+
* A polyfill for box-sizing: border-box for IE6 & IE7.
|
|
5
|
+
*
|
|
6
|
+
* JScript
|
|
7
|
+
*
|
|
8
|
+
* This program is free software: you can redistribute it and/or modify
|
|
9
|
+
* it under the terms of the GNU Lesser General Public License as published
|
|
10
|
+
* by the Free Software Foundation, either version 3 of the License, or
|
|
11
|
+
* (at your option) any later version.
|
|
12
|
+
*
|
|
13
|
+
* This program is distributed in the hope that it will be useful,
|
|
14
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
15
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
16
|
+
* GNU Lesser General Public License for more details.
|
|
17
|
+
*
|
|
18
|
+
* See <http://www.gnu.org/licenses/lgpl-3.0.txt>
|
|
19
|
+
*
|
|
20
|
+
* @category JScript
|
|
21
|
+
* @package box-sizing-polyfill
|
|
22
|
+
* @author Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
|
|
23
|
+
* @copyright 2012 Christian Schepp Schaefer
|
|
24
|
+
* @license http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
|
|
25
|
+
* @link http://github.com/Schepp/box-sizing-polyfill
|
|
26
|
+
*
|
|
27
|
+
* PREFACE:
|
|
28
|
+
*
|
|
29
|
+
* This box-sizing polyfill is based on previous work done by Erik Arvidsson,
|
|
30
|
+
* which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
|
|
31
|
+
*
|
|
32
|
+
* USAGE:
|
|
33
|
+
*
|
|
34
|
+
* Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
|
|
35
|
+
*
|
|
36
|
+
* box-sizing: border-box;
|
|
37
|
+
* *behavior: url(/scripts/boxsizing.htc);`
|
|
38
|
+
*
|
|
39
|
+
* Prefix the `behavior` property with a star, like seen above, so it will only be seen by
|
|
40
|
+
* IE6 & IE7, not by IE8+ who already implement box-sizing.
|
|
41
|
+
*
|
|
42
|
+
* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
|
|
43
|
+
* That's why I'd advise you to use absolute paths like in the example.
|
|
44
|
+
*
|
|
45
|
+
*/
|
|
46
|
+
<component lightWeight="true">
|
|
47
|
+
<attach event="onpropertychange" onevent="checkPropertyChange()" />
|
|
48
|
+
<attach event="ondetach" onevent="restore()" />
|
|
49
|
+
<attach event="onresize" for="window" onevent="update()" />
|
|
50
|
+
<script type="text/javascript">
|
|
51
|
+
//<![CDATA[
|
|
52
|
+
|
|
53
|
+
var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
|
|
54
|
+
|
|
55
|
+
// Shortcut for the document object
|
|
56
|
+
var doc = element.document;
|
|
57
|
+
|
|
58
|
+
// Buffer for multiple resize events
|
|
59
|
+
var resizetimeout = null;
|
|
60
|
+
|
|
61
|
+
// Don't apply box-sizing to certain elements
|
|
62
|
+
var apply = false;
|
|
63
|
+
switch(element.nodeName){
|
|
64
|
+
case '#comment':
|
|
65
|
+
case 'HTML':
|
|
66
|
+
case 'HEAD':
|
|
67
|
+
case 'TITLE':
|
|
68
|
+
case 'SCRIPT':
|
|
69
|
+
case 'STYLE':
|
|
70
|
+
case 'LINK':
|
|
71
|
+
case 'META':
|
|
72
|
+
break;
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
apply = true;
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/*
|
|
80
|
+
* update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation
|
|
81
|
+
*/
|
|
82
|
+
function update(){
|
|
83
|
+
if(resizetimeout !== null){
|
|
84
|
+
window.clearTimeout(resizetimeout);
|
|
85
|
+
}
|
|
86
|
+
resizetimeout = window.setTimeout(function(){
|
|
87
|
+
restore();
|
|
88
|
+
init();
|
|
89
|
+
resizetimeout = null;
|
|
90
|
+
},100);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/*
|
|
94
|
+
* restore gets called when the behavior is being detached (see event binding at the top),
|
|
95
|
+
* resets everything like it was before applying the behavior
|
|
96
|
+
*/
|
|
97
|
+
function restore(){
|
|
98
|
+
if(apply){
|
|
99
|
+
try{
|
|
100
|
+
element.runtimeStyle.removeAttribute("width");
|
|
101
|
+
element.runtimeStyle.removeAttribute("height");
|
|
102
|
+
}
|
|
103
|
+
catch(e){}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/*
|
|
108
|
+
* init gets called once at the start and then never again,
|
|
109
|
+
* triggers box-sizing calculations and updates width and height
|
|
110
|
+
*/
|
|
111
|
+
function init(){
|
|
112
|
+
if(apply){
|
|
113
|
+
updateBorderBoxWidth();
|
|
114
|
+
updateBorderBoxHeight();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/*
|
|
119
|
+
* checkPropertyChange gets called as soon as an element property changes
|
|
120
|
+
* (see event binding at the top), it then checks if any property influencing its
|
|
121
|
+
* dimensions was changed and if yes recalculates width and height
|
|
122
|
+
*/
|
|
123
|
+
function checkPropertyChange(){
|
|
124
|
+
if(apply){
|
|
125
|
+
var pn = event.propertyName;
|
|
126
|
+
if(pn === "style.boxSizing" && element.style.boxSizing === ""){
|
|
127
|
+
element.style.removeAttribute("boxSizing");
|
|
128
|
+
element.runtimeStyle.removeAttribute("boxSizing");
|
|
129
|
+
element.runtimeStyle.removeAttribute("width");
|
|
130
|
+
element.runtimeStyle.removeAttribute("height");
|
|
131
|
+
}
|
|
132
|
+
switch (pn){
|
|
133
|
+
case "style.width":
|
|
134
|
+
case "style.minWidth":
|
|
135
|
+
case "style.maxWidth":
|
|
136
|
+
case "style.borderLeftWidth":
|
|
137
|
+
case "style.borderLeftStyle":
|
|
138
|
+
case "style.borderRightWidth":
|
|
139
|
+
case "style.borderRightStyle":
|
|
140
|
+
case "style.paddingLeft":
|
|
141
|
+
case "style.paddingRight":
|
|
142
|
+
updateBorderBoxWidth();
|
|
143
|
+
break;
|
|
144
|
+
|
|
145
|
+
case "style.height":
|
|
146
|
+
case "style.minHeight":
|
|
147
|
+
case "style.maxHeight":
|
|
148
|
+
case "style.borderTopWidth":
|
|
149
|
+
case "style.borderTopStyle":
|
|
150
|
+
case "style.borderBottomWidth":
|
|
151
|
+
case "style.borderBottomStyle":
|
|
152
|
+
case "style.paddingTop":
|
|
153
|
+
case "style.paddingBottom":
|
|
154
|
+
updateBorderBoxHeight();
|
|
155
|
+
break;
|
|
156
|
+
|
|
157
|
+
case "className":
|
|
158
|
+
case "style.boxSizing":
|
|
159
|
+
updateBorderBoxWidth();
|
|
160
|
+
updateBorderBoxHeight();
|
|
161
|
+
break;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/*
|
|
167
|
+
* Helper function, taken from Dean Edward's IE7 framework,
|
|
168
|
+
* added by Schepp on 12.06.2010.
|
|
169
|
+
* http://code.google.com/p/ie7-js/
|
|
170
|
+
*
|
|
171
|
+
* Allows us to convert from relative to pixel-values.
|
|
172
|
+
*/
|
|
173
|
+
function getPixelValue(value){
|
|
174
|
+
var PIXEL = /^\d+(px)?$/i;
|
|
175
|
+
if (PIXEL.test(value)) return parseInt(value);
|
|
176
|
+
var style = element.style.left;
|
|
177
|
+
var runtimeStyle = element.runtimeStyle.left;
|
|
178
|
+
element.runtimeStyle.left = element.currentStyle.left;
|
|
179
|
+
element.style.left = value || 0;
|
|
180
|
+
value = parseInt(element.style.pixelLeft);
|
|
181
|
+
element.style.left = style;
|
|
182
|
+
element.runtimeStyle.left = runtimeStyle;
|
|
183
|
+
|
|
184
|
+
return value;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
function getPixelWidth(object, value){
|
|
188
|
+
// For Pixel Values
|
|
189
|
+
var PIXEL = /^\d+(px)?$/i;
|
|
190
|
+
if (PIXEL.test(value)) return parseInt(value);
|
|
191
|
+
|
|
192
|
+
// For Percentage Values
|
|
193
|
+
var PERCENT = /^[\d\.]+%$/i;
|
|
194
|
+
if (PERCENT.test(value)){
|
|
195
|
+
try{
|
|
196
|
+
var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
|
|
197
|
+
var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
|
|
198
|
+
var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeft);
|
|
199
|
+
var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRight);
|
|
200
|
+
|
|
201
|
+
//var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
|
|
202
|
+
var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
|
|
203
|
+
var value = (parseFloat(value) / 100) * parentWidth;
|
|
204
|
+
}
|
|
205
|
+
catch(e){
|
|
206
|
+
var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
|
|
207
|
+
}
|
|
208
|
+
return parseInt(value);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
// For EM Values
|
|
212
|
+
var style = object.style.left;
|
|
213
|
+
var runtimeStyle = object.runtimeStyle.left;
|
|
214
|
+
object.runtimeStyle.left = object.currentStyle.left;
|
|
215
|
+
object.style.left = value || 0;
|
|
216
|
+
value = parseInt(object.style.pixelLeft);
|
|
217
|
+
object.style.left = style;
|
|
218
|
+
object.runtimeStyle.left = runtimeStyle;
|
|
219
|
+
|
|
220
|
+
return value;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
function getPixelHeight(object, value){
|
|
224
|
+
// For Pixel Values
|
|
225
|
+
var PIXEL = /^\d+(px)?$/i;
|
|
226
|
+
if (PIXEL.test(value)) return parseInt(value);
|
|
227
|
+
|
|
228
|
+
// For Percentage Values
|
|
229
|
+
var PERCENT = /^[\d\.]+%$/i;
|
|
230
|
+
if (PERCENT.test(value)){
|
|
231
|
+
try{
|
|
232
|
+
if(object.parentElement.currentStyle.height != "auto"){
|
|
233
|
+
switch(object.parentElement.nodeName){
|
|
234
|
+
default:
|
|
235
|
+
if(object.parentElement.currentStyle.height !== "auto"){
|
|
236
|
+
var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
|
|
237
|
+
var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
|
|
238
|
+
var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTop);
|
|
239
|
+
var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottom);
|
|
240
|
+
|
|
241
|
+
var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
|
|
242
|
+
//var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
|
|
243
|
+
|
|
244
|
+
value = (parseFloat(value) / 100) * parentHeight;
|
|
245
|
+
}
|
|
246
|
+
else {
|
|
247
|
+
value = "auto";
|
|
248
|
+
}
|
|
249
|
+
break;
|
|
250
|
+
|
|
251
|
+
case 'HTML':
|
|
252
|
+
parentHeight = element.document.documentElement.clientHeight;
|
|
253
|
+
if(parentHeight !== "auto"){
|
|
254
|
+
value = (parseFloat(value) / 100) * parentHeight;
|
|
255
|
+
}
|
|
256
|
+
else {
|
|
257
|
+
value = "auto";
|
|
258
|
+
}
|
|
259
|
+
break;
|
|
260
|
+
}
|
|
261
|
+
if(value !== "auto") value = parseInt(value);
|
|
262
|
+
}
|
|
263
|
+
else {
|
|
264
|
+
value = "auto";
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
catch(e){
|
|
268
|
+
value = "auto";
|
|
269
|
+
}
|
|
270
|
+
return value;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
// For EM Values
|
|
274
|
+
var style = object.style.left;
|
|
275
|
+
var runtimeStyle = object.runtimeStyle.left;
|
|
276
|
+
object.runtimeStyle.left = object.currentStyle.left;
|
|
277
|
+
object.style.left = value || 0;
|
|
278
|
+
value = parseInt(object.style.pixelLeft);
|
|
279
|
+
object.style.left = style;
|
|
280
|
+
object.runtimeStyle.left = runtimeStyle;
|
|
281
|
+
|
|
282
|
+
return value;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
/*
|
|
287
|
+
* getBorderWidth & friends
|
|
288
|
+
* Border width getters
|
|
289
|
+
*/
|
|
290
|
+
function getBorderWidth(sSide){
|
|
291
|
+
if(element.currentStyle["border" + sSide + "Style"] == "none"){
|
|
292
|
+
return 0;
|
|
293
|
+
}
|
|
294
|
+
var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
|
|
295
|
+
return n || 0;
|
|
296
|
+
}
|
|
297
|
+
function getBorderLeftWidth() { return getBorderWidth("Left"); }
|
|
298
|
+
function getBorderRightWidth() { return getBorderWidth("Right"); }
|
|
299
|
+
function getBorderTopWidth() { return getBorderWidth("Top"); }
|
|
300
|
+
function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
/*
|
|
304
|
+
* getPadding & friends
|
|
305
|
+
* Padding width getters
|
|
306
|
+
*/
|
|
307
|
+
function getPadding(sSide) {
|
|
308
|
+
var n = getPixelValue(element.currentStyle["padding" + sSide]);
|
|
309
|
+
return n || 0;
|
|
310
|
+
}
|
|
311
|
+
function getPaddingLeft() { return getPadding("Left"); }
|
|
312
|
+
function getPaddingRight() { return getPadding("Right"); }
|
|
313
|
+
function getPaddingTop() { return getPadding("Top"); }
|
|
314
|
+
function getPaddingBottom() { return getPadding("Bottom"); }
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
/*
|
|
319
|
+
* getBoxSizing
|
|
320
|
+
* Get the box-sizing value for the current element
|
|
321
|
+
*/
|
|
322
|
+
function getBoxSizing(){
|
|
323
|
+
var s = element.style;
|
|
324
|
+
var cs = element.currentStyle
|
|
325
|
+
if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
|
|
326
|
+
return s.boxSizing;
|
|
327
|
+
}
|
|
328
|
+
if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
|
|
329
|
+
return s["box-sizing"];
|
|
330
|
+
}
|
|
331
|
+
if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
|
|
332
|
+
return cs.boxSizing;
|
|
333
|
+
}
|
|
334
|
+
if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
|
|
335
|
+
return cs["box-sizing"];
|
|
336
|
+
}
|
|
337
|
+
return getDocumentBoxSizing();
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
/*
|
|
342
|
+
* getDocumentBoxSizing
|
|
343
|
+
* Get the default document box sizing (check for quirks mode)
|
|
344
|
+
*/
|
|
345
|
+
function getDocumentBoxSizing(){
|
|
346
|
+
if(doc.compatMode === null || doc.compatMode === "BackCompat"){
|
|
347
|
+
return "border-box";
|
|
348
|
+
}
|
|
349
|
+
return "content-box"
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
/*
|
|
354
|
+
* setBorderBoxWidth & friends
|
|
355
|
+
* Width and height setters
|
|
356
|
+
*/
|
|
357
|
+
function setBorderBoxWidth(n){
|
|
358
|
+
element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
|
|
359
|
+
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
|
|
360
|
+
}
|
|
361
|
+
function setBorderBoxMinWidth(n){
|
|
362
|
+
element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() -
|
|
363
|
+
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
|
|
364
|
+
}
|
|
365
|
+
function setBorderBoxMaxWidth(n){
|
|
366
|
+
element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() -
|
|
367
|
+
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
|
|
368
|
+
}
|
|
369
|
+
function setBorderBoxHeight(n){
|
|
370
|
+
element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
|
|
371
|
+
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
|
|
372
|
+
}
|
|
373
|
+
function setBorderBoxMinHeight(n){
|
|
374
|
+
element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
|
|
375
|
+
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
|
|
376
|
+
}
|
|
377
|
+
function setBorderBoxMaxHeight(n){
|
|
378
|
+
element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() -
|
|
379
|
+
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
|
|
380
|
+
}
|
|
381
|
+
function setContentBoxWidth(n){
|
|
382
|
+
element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
|
|
383
|
+
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
|
|
384
|
+
}
|
|
385
|
+
function setContentBoxMinWidth(n){
|
|
386
|
+
element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() +
|
|
387
|
+
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
|
|
388
|
+
}
|
|
389
|
+
function setContentBoxMaxWidth(n){
|
|
390
|
+
element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() +
|
|
391
|
+
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
|
|
392
|
+
}
|
|
393
|
+
function setContentBoxHeight(n){
|
|
394
|
+
element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
|
|
395
|
+
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
|
|
396
|
+
}
|
|
397
|
+
function setContentBoxMinHeight(n){
|
|
398
|
+
element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() +
|
|
399
|
+
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
|
|
400
|
+
}
|
|
401
|
+
function setContentBoxMaxHeight(n){
|
|
402
|
+
element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() +
|
|
403
|
+
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
/*
|
|
408
|
+
* updateBorderBoxWidth & updateBorderBoxHeight
|
|
409
|
+
*
|
|
410
|
+
*/
|
|
411
|
+
function updateBorderBoxWidth() {
|
|
412
|
+
if(getDocumentBoxSizing() == getBoxSizing()){
|
|
413
|
+
return;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
var csw = element.currentStyle.width;
|
|
417
|
+
if(csw != "auto"){
|
|
418
|
+
csw = getPixelWidth(element,csw);
|
|
419
|
+
if(getBoxSizing() == "border-box"){
|
|
420
|
+
setBorderBoxWidth(parseInt(csw));
|
|
421
|
+
}
|
|
422
|
+
else{
|
|
423
|
+
setContentBoxWidth(parseInt(csw));
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
csw = element.currentStyle.minWidth;
|
|
428
|
+
if(csw != "none"){
|
|
429
|
+
csw = getPixelWidth(element,csw);
|
|
430
|
+
if(getBoxSizing() == "border-box"){
|
|
431
|
+
setBorderBoxMinWidth(parseInt(csw));
|
|
432
|
+
}
|
|
433
|
+
else{
|
|
434
|
+
setContentBoxMinWidth(parseInt(csw));
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
csw = element.currentStyle.maxWidth;
|
|
439
|
+
if(csw != "none"){
|
|
440
|
+
csw = getPixelWidth(element,csw);
|
|
441
|
+
if(getBoxSizing() == "border-box"){
|
|
442
|
+
setBorderBoxMaxWidth(parseInt(csw));
|
|
443
|
+
}
|
|
444
|
+
else{
|
|
445
|
+
setContentBoxMaxWidth(parseInt(csw));
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
function updateBorderBoxHeight() {
|
|
451
|
+
if(getDocumentBoxSizing() == getBoxSizing()){
|
|
452
|
+
return;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
var csh = element.currentStyle.height;
|
|
456
|
+
if(csh != "auto"){
|
|
457
|
+
csh = getPixelHeight(element,csh);
|
|
458
|
+
if(csh !== "auto"){
|
|
459
|
+
if(getBoxSizing() == "border-box"){
|
|
460
|
+
setBorderBoxHeight(parseInt(csh));
|
|
461
|
+
}
|
|
462
|
+
else{
|
|
463
|
+
setContentBoxHeight(parseInt(csh));
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
csh = element.currentStyle.minHeight;
|
|
469
|
+
if(csh != "none"){
|
|
470
|
+
csh = getPixelHeight(element,csh);
|
|
471
|
+
if(csh !== "none"){
|
|
472
|
+
if(getBoxSizing() == "border-box"){
|
|
473
|
+
setBorderBoxMinHeight(parseInt(csh));
|
|
474
|
+
}
|
|
475
|
+
else{
|
|
476
|
+
setContentBoxMinHeight(parseInt(csh));
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
csh = element.currentStyle.maxHeight;
|
|
482
|
+
if(csh != "none"){
|
|
483
|
+
csh = getPixelHeight(element,csh);
|
|
484
|
+
if(csh !== "none"){
|
|
485
|
+
if(getBoxSizing() == "border-box"){
|
|
486
|
+
setBorderBoxMaxHeight(parseInt(csh));
|
|
487
|
+
}
|
|
488
|
+
else{
|
|
489
|
+
setContentBoxMaxHeight(parseInt(csh));
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
// Run the calculations
|
|
497
|
+
init();
|
|
498
|
+
|
|
499
|
+
//]]>
|
|
500
|
+
</script>
|
|
501
|
+
</component>
|