From: Brandon Aaron <brandon.aaron@gmail.com>
Date: Tue, 29 Apr 2008 03:26:06 +0000 (+0000)
Subject: Merged dimensions with core
X-Git-Url: http://git.asbjorn.biz/?a=commitdiff_plain;h=aea452f1624df811c8b0b2916bfb22213d153f9d;p=jquery.git
Merged dimensions with core
---
diff --git a/Makefile b/Makefile
index 3ca4c3b..05e8a42 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,8 @@ BASE_FILES = ${SRC_DIR}/core.js\
${SRC_DIR}/event.js\
${SRC_DIR}/ajax.js\
${SRC_DIR}/fx.js\
- ${SRC_DIR}/offset.js
+ ${SRC_DIR}/offset.js\
+ ${SRC_DIR}/dimensions.js
PLUGINS = ${PLUG_DIR}/button/*\
${PLUG_DIR}/center/*\
diff --git a/build.xml b/build.xml
index ddc23bf..6ccb0af 100644
--- a/build.xml
+++ b/build.xml
@@ -40,6 +40,7 @@
<fileset dir="${SRC_DIR}" includes="ajax.js" />
<fileset dir="${SRC_DIR}" includes="fx.js" />
<fileset dir="${SRC_DIR}" includes="offset.js" />
+ <fileset dir="${SRC_DIR}" includes="dimensions.js" />
<fileset dir="${SRC_DIR}" includes="outro.js" />
</concat>
<java jar="${JAR}" fork="true">
diff --git a/src/dimensions.js b/src/dimensions.js
new file mode 100644
index 0000000..e707f83
--- /dev/null
+++ b/src/dimensions.js
@@ -0,0 +1,28 @@
+// Create innerHeight, innerWidth, outerHeight and outerWidth methods
+jQuery.each([ "Height", "Width" ], function(i, name){
+
+ var tl = name == "Height" ? "Top" : "Left", // top or left
+ br = name == "Height" ? "Bottom" : "Right"; // bottom or right
+
+ // innerHeight and innerWidth
+ jQuery.fn["inner" + name] = function(){
+ return this[ name.toLowerCase() ]() +
+ num(this, "padding" + tl) +
+ num(this, "padding" + br);
+ };
+
+ // outerHeight and outerWidth
+ jQuery.fn["outer" + name] = function(margin) {
+ return this["inner" + name]() +
+ num(this, "border" + tl + "Width") +
+ num(this, "border" + br + "Width") +
+ (!!margin ?
+ num(this, "margin" + tl) + num(this, "margin" + br) : 0);
+ };
+
+});
+
+function num(elem, prop) {
+ elem = elem.jquery ? elem[0] : elem;
+ return elem && parseInt( jQuery.curCSS(elem, prop, true) ) || 0;
+}
\ No newline at end of file
diff --git a/src/offset.js b/src/offset.js
index 045a580..23923c3 100644
--- a/src/offset.js
+++ b/src/offset.js
@@ -98,31 +98,68 @@ jQuery.fn.offset = function() {
return results;
};
-// Create innerHeight, innerWidth, outerHeight and outerWidth methods
-jQuery.each(["Height", "Width"], function(i, name){
- var tl = name == "Height" ? "Top" : "Left", // top or left
- br = name == "Height" ? "Bottom" : "Right"; // bottom or right
-
- // innerHeight and innerWidth
- jQuery.fn["inner" + name] = function(){
- return this[ name.toLowerCase() ]() +
- num(this, "padding" + tl) +
- num(this, "padding" + br);
- };
-
- // outerHeight and outerWidth
- jQuery.fn["outer" + name] = function(margin) {
- return this["inner" + name]() +
- num(this, "border" + tl + "Width") +
- num(this, "border" + br + "Width") +
- (!!margin ?
- num(this, "margin" + tl) + num(this, "margin" + br) : 0);
- };
+jQuery.fn.extend({
+ position: function() {
+ var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results;
+
+ if (elem) {
+ // Get *real* offsetParent
+ offsetParent = this.offsetParent();
+
+ // Get correct offsets
+ offset = this.offset();
+ parentOffset = offsetParent.offset();
+
+ // Subtract element margins
+ offset.top -= parseInt( jQuery.curCSS(elem, 'marginTop', true) ) || 0;
+ offset.left -= parseInt( jQuery.curCSS(elem, 'marginLeft', true) ) || 0;
+
+ // Add offsetParent borders
+ parentOffset.top += parseInt( jQuery.curCSS(offsetParent[0], 'borderTopWidth', true) ) || 0;
+ parentOffset.left += parseInt( jQuery.curCSS(offsetParent[0], 'borderLeftWidth', true) ) || 0;
+
+ // Subtract the two offsets
+ results = {
+ top: offset.top - parentOffset.top,
+ left: offset.left - parentOffset.left
+ };
+ }
+
+ return results;
+ },
+ offsetParent: function() {
+ var offsetParent = this[0].offsetParent;
+ while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && jQuery.css(offsetParent, 'position') == 'static') )
+ offsetParent = offsetParent.offsetParent;
+ return jQuery(offsetParent);
+ }
});
-function num(elem, prop) {
- elem = elem.jquery ? elem[0] : elem;
- return elem && parseInt( jQuery.curCSS(elem, prop, true) ) || 0;
-}
\ No newline at end of file
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( ['Left', 'Top'], function(i, name) {
+ jQuery.fn[ 'scroll' + name ] = function(val) {
+ if (!this[0]) return;
+
+ return val != undefined ?
+
+ // Set the scroll offset
+ this.each(function() {
+ this == window || this == document ?
+ window.scrollTo(
+ name == 'Left' ? val : jQuery(window)[ 'scrollLeft' ](),
+ name == 'Top' ? val : jQuery(window)[ 'scrollTop' ]()
+ ) :
+ this[ 'scroll' + name ] = val;
+ }) :
+
+ // Return the scroll offset
+ this[0] == window || this[0] == document ?
+ self[ (name == 'Left' ? 'pageXOffset' : 'pageYOffset') ] ||
+ jQuery.boxModel && document.documentElement[ 'scroll' + name ] ||
+ document.body[ 'scroll' + name ] :
+ this[0][ 'scroll' + name ];
+ };
+});
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index bca5f5b..ce0d248 100644
--- a/test/index.html
+++ b/test/index.html
@@ -8,6 +8,7 @@
<script type="text/javascript" src="../dist/jquery.js"></script>
<script type="text/javascript" src="data/testrunner.js"></script>
<script type="text/javascript" src="unit/core.js"></script>
+ <script type="text/javascript" src="unit/dimensions.js"></script>
<script type="text/javascript" src="unit/selector.js"></script>
<script type="text/javascript" src="unit/event.js"></script>
<script type="text/javascript" src="unit/ajax.js"></script>
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
new file mode 100644
index 0000000..af35850
--- /dev/null
+++ b/test/unit/dimensions.js
@@ -0,0 +1,85 @@
+module("dimensions");
+
+test("innerWidth()", function() {
+ expect(3);
+
+ var $div = $("#nothiddendiv");
+ // set styles
+ $div.css({
+ margin: 10,
+ border: "2px solid #fff",
+ width: 30
+ });
+
+ equals($div.innerWidth(), 30, "Test with margin and border");
+ $div.css("padding", "20px");
+ equals($div.innerWidth(), 70, "Test with margin, border and padding");
+ $div.hide();
+ equals($div.innerWidth(), 70, "Test hidden div");
+
+ // reset styles
+ $div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("innerHeight()", function() {
+ expect(3);
+
+ var $div = $("#nothiddendiv");
+ // set styles
+ $div.css({
+ margin: 10,
+ border: "2px solid #fff",
+ height: 30
+ });
+
+ equals($div.innerHeight(), 30, "Test with margin and border");
+ $div.css("padding", "20px");
+ equals($div.innerHeight(), 70, "Test with margin, border and padding");
+ $div.hide();
+ equals($div.innerHeight(), 70, "Test hidden div");
+
+ // reset styles
+ $div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("outerWidth()", function() {
+ expect(6);
+
+ var $div = $("#nothiddendiv");
+ $div.css("width", 30);
+
+ equals($div.outerWidth(), 30, "Test with only width set");
+ $div.css("padding", "20px");
+ equals($div.outerWidth(), 70, "Test with padding");
+ $div.css("border", "2px solid #fff");
+ equals($div.outerWidth(), 74, "Test with padding and border");
+ $div.css("margin", "10px");
+ equals($div.outerWidth(), 74, "Test with padding, border and margin without margin option");
+ equals($div.outerWidth(true), 94, "Test with padding, border and margin with margin option");
+ $div.hide();
+ equals($div.outerWidth(true), 94, "Test hidden div with padding, border and margin with margin option");
+
+ // reset styles
+ $div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("outerHeight()", function() {
+ expect(6);
+
+ var $div = $("#nothiddendiv");
+ $div.css("height", 30);
+
+ equals($div.outerHeight(), 30, "Test with only width set");
+ $div.css("padding", "20px");
+ equals($div.outerHeight(), 70, "Test with padding");
+ $div.css("border", "2px solid #fff");
+ equals($div.outerHeight(), 74, "Test with padding and border");
+ $div.css("margin", "10px");
+ equals($div.outerHeight(), 74, "Test with padding, border and margin without margin option");
+ equals($div.outerHeight(true), 94, "Test with padding, border and margin with margin option");
+ $div.hide();
+ equals($div.outerHeight(true), 94, "Test hidden div with padding, border and margin with margin option");
+
+ // reset styles
+ $div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
\ No newline at end of file