diff options
| author | Eduardo Lundgren <eduardolundgren@gmail.com> | 2008-06-01 19:44:10 +0000 |
|---|---|---|
| committer | Eduardo Lundgren <eduardolundgren@gmail.com> | 2008-06-01 19:44:10 +0000 |
| commit | 0a2cc194d5ccd8155b9591236667cdabef87807f (patch) | |
| tree | eaf97f0179c5d1f785b305c538ae0758549113ed /ui | |
| parent | 814e9d6ca02e649d6adf6cd91720d4e32bc54e87 (diff) | |
| download | jquery-ui-0a2cc194d5ccd8155b9591236667cdabef87807f.tar.gz jquery-ui-0a2cc194d5ccd8155b9591236667cdabef87807f.zip | |
Image-cropper real-world demo css fixed
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/demos/real-world/image-cropper/index.html | 28 | ||||
| -rw-r--r-- | ui/demos/real-world/image-cropper/real-world.css | 104 |
2 files changed, 119 insertions, 13 deletions
diff --git a/ui/demos/real-world/image-cropper/index.html b/ui/demos/real-world/image-cropper/index.html index 6f00035ba..528575aef 100644 --- a/ui/demos/real-world/image-cropper/index.html +++ b/ui/demos/real-world/image-cropper/index.html @@ -19,7 +19,7 @@ /*************************************/
/* Real-World CSS */
-@import "../../css/real-world.css";
+@import "real-world.css";
/*************************************/
/* Demo CSS */
@@ -125,21 +125,23 @@ minHeight: 100,
resize: function(e, ui) {
+ var self = $(this).data("resizable");
+
+ this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
+
- this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
+ $("#log-top").html(self.position.top+"px");
- $("#log-top").html(ui.instance.position.top+"px");
+ $("#log-left").html(self.position.left+"px");
- $("#log-left").html(ui.instance.position.left+"px");
+ $("#log-height").html(self.size.height+"px");
- $("#log-height").html(ui.instance.size.height+"px");
-
- $("#log-width").html(ui.instance.size.width+"px");
+ $("#log-width").html(self.size.width+"px");
},
stop: function(e, ui) {
-
- this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
+ var self = $(this).data("resizable");
+ this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
}
})
@@ -150,12 +152,12 @@ containment: $('#resizeme_containment_div_wrapper'),
drag: function(e, ui) {
+ var self = $(this).data("draggable");
+ this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
- this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px';
-
- $("#log-top").html(ui.instance.position.top+"px");
+ $("#log-top").html(self.position.top+"px");
- $("#log-left").html(ui.instance.position.left+"px");
+ $("#log-left").html(self.position.left+"px");
}
diff --git a/ui/demos/real-world/image-cropper/real-world.css b/ui/demos/real-world/image-cropper/real-world.css new file mode 100644 index 000000000..f7630bd8f --- /dev/null +++ b/ui/demos/real-world/image-cropper/real-world.css @@ -0,0 +1,104 @@ +/*************************************/
+/* Blueprint: reset.css */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+}
+
+/* Remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+body {
+ line-height: 1;
+ color: black;
+ background: white;
+}
+ol, ul {
+ list-style: none;
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+}
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+}
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: "";
+}
+blockquote, q {
+ quotes: "" "";
+}
+
+.clear {
+ clear:both;
+}
+
+/*************************************/
+/* Layout */
+body, html {
+ height: 100%;
+ font-family:sans-serif;
+ font-size:13px;
+ margin:0px;
+ padding:0px;
+}
+body, html {
+ height: 100%;
+ font-family:sans-serif;
+ font-size:13px;
+
+}
+#main {
+ height:auto;
+ background: #E8EEF7;
+ border-left:1px solid #ccc;
+ border-bottom:1px solid #ccc;
+ margin:0 0 0 200px;
+}
+ #header {
+ height:30px;
+ padding:10px;
+ font-size:2em;
+ font-weight:bold;
+ text-align: center;
+ border-bottom:1px solid #ccc;
+ background: #E8EEF7;
+ }
+ #main #content {
+ padding:10px;
+ background: #FFF;
+ }
+ #main #break {
+ padding:10px;
+ border-top:1px solid #ccc;
+ }
+#sidebar {
+ float:left;
+ width:200px;
+ height:100%;
+ border-right:1px solid #ccc;
+}
+ #sidebar div {
+ padding:10px;
+ }
|