Image-cropper real-world demo css fixed

diff --git a/ui/demos/real-world/image-cropper/index.html b/ui/demos/real-world/image-cropper/index.html
index 6f00035ba0463d4ce4be093e5fd3471ecd0a9686..528575aef3e61ed1232196e74500f41a8f286042 100644 (file)
--- a/ui/demos/real-world/image-cropper/index.html
+++ b/ui/demos/real-world/image-cropper/index.html
@@ -19,7 +19,7 @@
 /*************************************/\r
 /* Real-World CSS                    */\r
 \r
-@import "../../css/real-world.css";\r
+@import "real-world.css";\r
 \r
 /*************************************/\r
 /* Demo CSS                          */\r
@@ -125,21 +125,23 @@
                minHeight: 100,\r
 \r
                resize: function(e, ui) {\r
+                       var self = $(this).data("resizable");\r
+                       \r
+                 this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';\r
+                       \r
 \r
-                 this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';\r
+                 $("#log-top").html(self.position.top+"px");\r
 \r
-                 $("#log-top").html(ui.instance.position.top+"px");\r
+                 $("#log-left").html(self.position.left+"px");\r
 \r
-                 $("#log-left").html(ui.instance.position.left+"px");\r
+                 $("#log-height").html(self.size.height+"px");\r
 \r
-                 $("#log-height").html(ui.instance.size.height+"px");\r
-\r
-                 $("#log-width").html(ui.instance.size.width+"px");\r
+                 $("#log-width").html(self.size.width+"px");\r
 \r
            },\r
                stop: function(e, ui) {\r
-\r
-                 this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';\r
+                       var self = $(this).data("resizable");\r
+                 this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';\r
            }\r
        })\r
 \r
@@ -150,12 +152,12 @@
                containment: $('#resizeme_containment_div_wrapper'),\r
 \r
                drag: function(e, ui) {\r
+                       var self = $(this).data("draggable");\r
+                       this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';\r
 \r
-                       this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px';\r
-\r
-                 $("#log-top").html(ui.instance.position.top+"px");\r
+                 $("#log-top").html(self.position.top+"px");\r
 \r
-                 $("#log-left").html(ui.instance.position.left+"px");\r
+                 $("#log-left").html(self.position.left+"px");\r
 \r
                }\r
 \r

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 (file)
index 0000000..f7630bd
--- /dev/null
+++ b/ui/demos/real-world/image-cropper/real-world.css
@@ -0,0 +1,104 @@
+/*************************************/\r
+/* Blueprint: reset.css              */\r
+\r
+html, body, div, span, applet, object, iframe,\r
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r
+a, abbr, acronym, address, big, cite, code,\r
+del, dfn, em, font, img, ins, kbd, q, s, samp,\r
+small, strike, strong, sub, sup, tt, var,\r
+dl, dt, dd, ol, ul, li,\r
+fieldset, form, label, legend,\r
+table, caption, tbody, tfoot, thead, tr, th, td {\r
+       margin: 0;\r
+       padding: 0;\r
+       border: 0;\r
+       outline: 0;\r
+       font-size: 100%;\r
+       font-family: inherit;\r
+       vertical-align: baseline;\r
+}\r
+\r
+/* Remember to define focus styles! */\r
+:focus {\r
+       outline: 0;\r
+}\r
+body {\r
+       line-height: 1;\r
+       color: black;\r
+       background: white;\r
+}\r
+ol, ul {\r
+       list-style: none;\r
+}\r
+\r
+/* Tables still need 'cellspacing="0"' in the markup. */\r
+table {\r
+       border-collapse: separate;\r
+       border-spacing: 0;\r
+}\r
+caption, th, td {\r
+       text-align: left;\r
+       font-weight: normal;\r
+}\r
+\r
+/* Remove possible quote marks (") from <q>, <blockquote>. */\r
+blockquote:before, blockquote:after,\r
+q:before, q:after {\r
+       content: "";\r
+}\r
+blockquote, q {\r
+       quotes: "" "";\r
+}\r
+\r
+.clear {\r
+    clear:both;\r
+}\r
+\r
+/*************************************/\r
+/* Layout                            */\r
+body, html {\r
+       height: 100%;\r
+    font-family:sans-serif;\r
+    font-size:13px;\r
+    margin:0px;\r
+    padding:0px;\r
+}\r
+body, html {\r
+       height: 100%;\r
+    font-family:sans-serif;\r
+    font-size:13px;\r
+    \r
+}\r
+#main {\r
+    height:auto;\r
+    background: #E8EEF7;\r
+    border-left:1px solid #ccc;\r
+    border-bottom:1px solid #ccc;\r
+    margin:0 0 0 200px;\r
+}\r
+       #header {\r
+           height:30px;\r
+           padding:10px;\r
+           font-size:2em;\r
+           font-weight:bold;\r
+               text-align: center;\r
+           border-bottom:1px solid #ccc;\r
+        background: #E8EEF7;\r
+       }\r
+       #main #content {\r
+           padding:10px;\r
+        background: #FFF;\r
+       }\r
+    #main #break {\r
+           padding:10px;\r
+           border-top:1px solid #ccc;\r
+    }\r
+#sidebar {\r
+    float:left;\r
+    width:200px;\r
+    height:100%;\r
+    border-right:1px solid #ccc;\r
+}\r
+    #sidebar div {\r
+        padding:10px;\r
+    }\r