RubyGems - old_sql - Versions diffs - 1.12.0 → 1.13.0 - Mend

old_sql 1.12.0 → 1.13.0

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.

Files changed (263) hide show

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mochiregexp/index.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>MochiRegExp - JavaScript Regular Expression (RegExp) Explorer</title>
+        <link href="mochiregexp.css" rel="stylesheet" type="text/css" />
+        <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
+        <script type="text/javascript" src="mochiregexp.js"></script>
+    </head>
+    <body>
+        <h1>
+            MochiRegExp - JavaScript Regular Expression (RegExp) Explorer
+        </h1>
+        <div>
+            <p>
+                This demo does "live" Regular Expression matching to help you
+                toy with JavaScript Regular Expressions.
+                It takes advantage of
+                <a href="http://mochikit.com">MochiKit</a>'s
+                <a href="../../doc/html/lib/MochiKit/DOM.html">MochiKit.DOM</a>
+                to manipulate the display and
+                <a href="../../doc/html/lib/MochiKit/Async.html">MochiKit.Async</a>
+                to facilitate the "half a second" live updating.
+            </p>
+            <p>
+                The table will update while you're typing if you're idle for
+                half a second or when you tab away from the field, whichever
+                comes first.  If you enter an invalid RegExp, the RegExp label
+                will turn <span class="error">red</span> (the "error" class).
+                For a good JavaScript's RegExp reference, see
+                <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Regular_Expressions">Regular Expressions</a>
+                over at <a href="http://developer.mozilla.org">DevMo</a>.
+            </p>
+        </div>
+        <form id="regexp_form">
+            <table class="form">
+                <col class="column1">
+                <col class="column2">
+                <tbody>
+                    <tr>
+                        <th><label id="lab_text" for="inp_text">Input Text:</label></th>
+                        <td><input id="inp_text" name="text" type="text" class="textbox" size="80" /></td>
+                    </tr>
+                    <tr>
+                        <th><label id="lab_regexp" for="inp_regexp">RegExp:</label></th>
+                        <td><input id="inp_regexp" name="regexp" type="text" class="textbox" size="80" /></td>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <td><input type="reset" value="Clear" /></td>
+                    </tr>
+                </tbody>
+            </table>
+        </form>
+        <div>
+            View Source: [
+            <a href="index.html" class="view-source">index.html</a> |
+            <a href="mochiregexp.js" class="view-source">mochiregexp.js</a>
+            ]
+        </div>
+        <table class="datagrid">
+            <thead>
+                <tr>
+                    <th>Property</th>
+                    <th>Result</th>
+                    <th>Repr</th>
+                </tr>
+            </thead>
+            <tfoot class="invisible"><tr><td colspan="3"></td></tr></tfoot>
+            <tbody id="result_body"><tr><td colspan="3"></td></tr></tbody>
+        </table>
+    </body>
+</html>

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mochiregexp/mochiregexp.css ADDED Viewed

@@ -0,0 +1,73 @@
+h1 {
+    font-size: 2em;
+    color: #4B4545;
+    text-align: center;
+}
+table.datagrid {
+    width: 100%;
+    border-collapse: collapse;
+}
+table.datagrid thead th {
+    text-align: left;
+    background-color: #4B4545;
+    background-repeat: no-repeat;
+    background-position: right center;
+    color: white;
+    font-weight: bold;
+    padding: .3em .7em;
+    font-size: .9em;
+    padding-right: 5px;
+    background-repeat: no-repeat;
+    background-position: 95% right;
+}
+table.datagrid thead th a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.0em;
+    background-repeat: no-repeat;
+    background-position: center right;
+    padding-right: 15px;
+}
+table.datagrid tbody th {
+    font-weight: bold;
+}
+table.datagrid tbody td, table.datagrid tbody th {
+    text-align: left;
+    padding: .3em .7em;
+    border-bottom: 1px solid #eee;
+}
+table.datagrid tbody tr.alternate td, table.datagrid tbody tr.alternate th {
+    background-color: #f1f1f1;
+}
+table.datagrid tfoot td, table.datagrid tfoot th {
+    background-color: #FFFEE3;
+    color: #4B4545;
+    padding: .5em;
+    font-weight: bold;
+    border-top: 2px solid #4B4545;
+}
+table.datagrid tfoot th { text-align: left; }
+table.datagrid tfoot td {  }
+.invisible { display: none; }
+input.textbox, textarea { border: 1px solid #CCCCCC; font-size: .95em; padding: 2px 4px; margin-top: .3em; }
+input.textbox:focus, textarea:focus { background-color: #FFFEE3; }
+.highlight { font-weight: bold; };
+form { margin: 0; padding: 0; }
+fieldset { border: none; margin: 0; padding: 0; }
+fieldset label { font-weight: bold; color: #4B4545; }
+fieldset .field { margin-bottom: 1em; }
+.error { color: red; }

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mochiregexp/mochiregexp.js ADDED Viewed

@@ -0,0 +1,125 @@
+/*
+    MochiRegExp: JavaScript Regular Expression Explorer
+*/
+RegExpManager = function () {
+    this.timer = null;
+    bindMethods(this);
+};
+RegExpManager.prototype.initialize = function () {
+    /*
+       Fill in the event handlers and sample text, and do the initial update
+       The reason we do the sample text here is so that "clear" really does
+       clear the fields.
+    */
+    setNodeAttribute("inp_text", "value", "matched with your pattern");
+    connect("inp_text", "onkeyup", this, "updateSoon");
+    connect("inp_text", "onchange", this, "update");
+    setNodeAttribute("inp_regexp", "value", "/(pattern)/");
+    connect("inp_regexp", "onkeyup", this, "updateSoon");
+    connect("inp_regexp", "onchange", this, "update");
+    connect("regexp_form", "onsubmit", this, "submit");
+    this.update();
+};
+RegExpManager.prototype.updateSoon = function () {
+    /*
+        If the user stops typing for half a second, do one update.
+    */
+    this.cancelTimer();
+    this.timer = callLater(0.5, this.update);
+};
+RegExpManager.prototype.cancelTimer = function () {
+    /*
+        Cancel the timer that waits for the user to idle for half a second.
+    */
+    if (this.timer) {
+        this.timer.cancel();
+    }
+    this.timer = null;
+};
+RegExpManager.prototype.update = function () {
+    /*
+        Cancel the update timer and actually do an update of the
+        RegExp
+    */
+    this.cancelTimer();
+    var re;
+    try {
+        // Evaluate the regexp
+        re = eval("(" + getElement("inp_regexp").value + ")");
+    } catch (e) {
+        // If invalid, color it red and stop
+        addElementClass("lab_regexp", "error");
+        return;
+    }
+    // Make sure that it's not red
+    removeElementClass("lab_regexp", "error");
+    // replace the contents of the tbody
+    var match = getElement("inp_text").value.match(re);
+    replaceChildNodes("result_body", this.getRows(match));
+};
+RegExpManager.prototype.getRows = function (match) {
+    /*
+        Return rows for the tbody given a match object
+    */
+    if (!match) {
+        // No match, bail with a no match row
+        return TR(null, TD({"colspan": "3"}, "No match!"));
+    }
+    var isAlternate = true;
+    var res = [];
+    for (var k in match) {
+        isAlternate = !isAlternate;
+        var trAttribs = isAlternate ? {"class": "alternate"} : null;
+        var v = match[k];
+        var result = v;
+        // Highlight the result for the input property as three spans:
+        //    [beforeMatch, duringMatch, afterMatch]
+        if (k == "input") {
+            var end = match.index + match[0].length;
+            result = [
+                SPAN(null, v.substr(0, match.index)),
+                SPAN({"class": "highlight"}, v.substring(match.index, end)),
+                SPAN(null, v.substr(end))
+            ];
+        }
+        res.push(
+            TR((isAlternate ? {"class": "alternate"} : null),
+                TD(null, k),
+                TD(null, result),
+                TD(null, repr(v))
+            )
+        );
+    }
+    return res;
+};
+RegExpManager.prototype.submit = function () {
+    this.update();
+    return false;
+};
+regExpManager = new RegExpManager();
+addLoadEvent(regExpManager.initialize);
+// rewrite the view-source links
+addLoadEvent(function () {
+    var elems = getElementsByTagAndClassName("A", "view-source");
+    var page = "mochiregexp/";
+    for (var i = 0; i < elems.length; i++) {
+        var elem = elems[i];
+        var href = elem.href.split(/\//).pop();
+        elem.target = "_blank";
+        elem.href = "../view-source/view-source.html#" + page + href;
+    }
+});

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mouse_events/index.html ADDED Viewed

@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Mouse Events with MochiKit</title>
+    <link href="mouse_events.css" rel="stylesheet" type="text/css" />
+    <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
+    <script type="text/javascript" src="mouse_events.js"></script>
+</head>
+<body>
+    <h1>
+        Mouse Events with MochiKit
+    </h1>
+    <p>
+        For a detailed description of what happens under the hood, check out
+        <a href="mouse_events.js" class="view-source">mouse_events.js</a>.
+    </p>
+    <p>
+        View Source: [
+            <a href="index.html" class="view-source">index.html</a> |
+            <a href="mouse_events.js" class="view-source">mouse_events.js</a> |
+            <a href="mouse_events.css" class="view-source">mouse_events.css</a>
+        ]
+    </p>
+    <div id="show-mouse-event" class="scroll-box">
+      Hover, Click, or Scroll In Me:<br/><br/>
+      <span id="show-mouse-event-repr"></span>
+    </div>
+    <div id="scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;">
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+      Scroll Me and then the page scrolls! <br />
+    </div>
+    <div id="no-scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;">
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+      Scroll Me and then the page does not scroll! <br />
+    </div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
+</body>
+</html>

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mouse_events/mouse_events.css ADDED Viewed

@@ -0,0 +1,17 @@
+h1 {
+    font-size: 2em;
+    color: #4B4545;
+    text-align: center;
+}
+div.scroll-box {
+    border  : 2px solid blue;
+    padding : 4ex 4em;
+    margin  : 4ex 4em;
+}
+div.padding {
+    padding : 4ex 4em;
+    margin  : 4ex 4em;
+    border  : 1px solid silver;
+}

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/mouse_events/mouse_events.js ADDED Viewed

@@ -0,0 +1,59 @@
+/*
+    Mouse Events: Simple Mouse Scrolling Handlers
+*/
+function showMouseEvent(evt) {
+    getElement("show-mouse-event-repr").innerHTML = repr(evt);
+    evt.stop();
+};
+function stopPageFromScrolling( event ) {
+  var src = event.src();
+  var scrollTop = src.scrollTop;
+  //  While trying to stop scrolling events for IE, found that it
+  //  jumped around a bit.  The following fudgetFactor is NOT the way
+  //  to handle this but was the best I could do with the limited time
+  //  I had.
+  var fudgeFactor = /MSIE/.test(navigator.userAgent) ? 25 : 0;
+  // scrolling up
+  if (event.mouse().wheel.y < 0) {
+    // Following test should probably be "if (scrollTop == 0)" which
+    // works in FF but not IE.
+    if (scrollTop <= fudgeFactor) {
+      event.stop();
+    }
+  }
+  //..scrolling down
+  else {
+    // Following test should be "if (scrollTop == src.scrollHeight - src.clientHeight)",
+    // see comment above.
+    if (src.scrollHeight <= (scrollTop + src.clientHeight + fudgeFactor)) {
+      event.stop();
+    }
+  }
+};
+function connectEvents(){
+  connect("show-mouse-event", "onmousemove", showMouseEvent);
+  connect("show-mouse-event", "onmousedown", showMouseEvent);
+  connect("show-mouse-event", "onmouseup", showMouseEvent);
+  connect("show-mouse-event", "onmousewheel", showMouseEvent);
+  connect("no-scroll-page", "onmousewheel", stopPageFromScrolling);
+};
+connect(window, 'onload',
+    function() {
+          connectEvents();
+          var elems = getElementsByTagAndClassName("A", "view-source");
+          var page = "mouse_events/";
+          for (var i = 0; i < elems.length; i++) {
+            var elem = elems[i];
+            var href = elem.href.split(/\//).pop();
+            elem.target = "_blank";
+            elem.href = "../view-source/view-source.html#" + page + href;
+          }
+    });

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/rounded_corners/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>Demo of MochiKit Visual Elements</title>
+        <link href="rounded_corners.css" rel="stylesheet" type="text/css" />
+        <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
+        <script type="text/javascript" src="rounded_corners.js"></script>
+    </head>
+    <body>
+        <h1>MochiKit.Visual <span id="visual_version"></span></h1>
+        <h2>Rounded Corners</h2>
+        <p>
+            This example demonstrates the rounded corners functionality of
+            <a href="http://mochikit.com">MochiKit</a>'s
+            <a href="../../doc/html/lib/MochiKit/Visual.html">MochiKit.Visual</a>.
+        </p>
+        <p>
+            The heading at the top of this page should have all four corners
+            rounded. The heading for this section should just have the bottom
+            corners rounded.
+        </p>
+        View Source:
+        <ul>
+            <li><a href="rounded_corners.js" class="view-source">rounded_corners.js</a></li>
+            <li><a href="index.html" class="view-source">index.html</a></li>
+        </ul>
+    </body>
+</html>

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/rounded_corners/rounded_corners.css ADDED Viewed

@@ -0,0 +1,3 @@
+h1 { background: darkgreen; color: yellow; text-align: center; }
+h2 { background: darkgreen; color: yellow; padding-top: 0.25em;}
+.invisible { display: none; }

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/rounded_corners/rounded_corners.js ADDED Viewed

@@ -0,0 +1,19 @@
+var roundedCornersOnLoad = function () {
+    swapDOM("visual_version", SPAN(null, MochiKit.Visual.VERSION));
+    roundClass("h1", null);
+    roundClass("h2", null, {corners: "bottom"});
+};
+addLoadEvent(roundedCornersOnLoad);
+// rewrite the view-source links
+addLoadEvent(function () {
+    var elems = getElementsByTagAndClassName("A", "view-source");
+    var page = "rounded_corners/";
+    for (var i = 0; i < elems.length; i++) {
+        var elem = elems[i];
+        var href = elem.href.split(/\//).pop();
+        elem.target = "_blank";
+        elem.href = "../view-source/view-source.html#" + page + href;
+    }
+});

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/simple_dnd/dnd_boxes.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>script.aculo.us Drag and drop functional test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/Position.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/Visual.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/DragAndDrop.js"></script>
+  <style type="text/css" media="screen">
+    #thelist li { background: green; margin:5px; padding: 30px; }
+    #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
+  </style>
+</head>
+<body>
+<h1>script.aculo.us Drag and drop functional test file</h1>
+<h2>Draggables/Droppables</h2>
+<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
+  <span id="handle1">drag here</span><br/>
+  <input type="checkbox" id="shouldrevert1"/> Revert?
+</div>
+<div id="revertbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#bbf;">
+  <span id="handle2">drag here</span><br/>
+  <input type="checkbox" id="shouldrevert2"/> Revert?
+</div>
+<div id="droptarget1" style="width:200px;height:200px;background-color:#eee;">accepts first box</div>
+<div id="droptarget2" style="width:200px;height:200px;background-color:#eee;">accepts second box</div>
+<script type="text/javascript" language="javascript" charset="utf-8">
+// <![CDATA[
+  new MochiKit.DragAndDrop.Draggable('revertbox1',{handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
+  new MochiKit.DragAndDrop.Draggable('revertbox2',{handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
+  new MochiKit.DragAndDrop.Droppable('droptarget1',{accept:['box1','otherstuff'],ondrop:function(){alert('drop!')}});
+  new MochiKit.DragAndDrop.Droppable('droptarget2',{accept:['box'],ondrop:function(){alert('drop!')}});
+// ]]>
+</script>
+</body>
+</html>

data/public/javascripts/old_sql/MochiKit-1.4.2/examples/simple_dnd/dnd_full.html ADDED Viewed

@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>script.aculo.us Drag and drop functional test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/Position.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/Visual.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/DragAndDrop.js"></script>
+    <script type="text/javascript" src="../../lib/MochiKit/Sortable.js"></script>
+  <style type="text/css" media="screen">
+    #thelist li { background: green; margin:5px; padding: 30px; }
+    #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
+    #revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
+  </style>
+</head>
+<body>
+<h1>script.aculo.us Drag and drop functional test file</h1>
+<h2>Draggables/Droppables</h2>
+<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
+  <span class="handle1">drag here</span><br/>
+  <input type="checkbox" id="shouldrevert1"/> Revert?
+</div>
+<div id="revertbox2" class="box">
+  <span id="handle2">drag here</span><br/>
+  <input type="checkbox" id="shouldrevert2"/> Revert?
+</div>
+<div id="xxxx">testtest</div>
+<script type="text/javascript" language="javascript" charset="utf-8">
+// <![CDATA[
+  new MochiKit.DragAndDrop.Draggable('revertbox1',{zindex:-5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
+  new MochiKit.DragAndDrop.Draggable('revertbox2',{handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
+  new MochiKit.DragAndDrop.Droppable('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
+// ]]>
+</script>
+<ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
+<li id="thelist_4">Hey there! I'm absolutely positioned</li>
+<li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li>
+<li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li>
+<li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li>
+</ul>
+<ul id="thelist2" style="padding: 2px; background:red;">
+<li>Relatively here!</li>
+<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+<li>one</li>
+</ul>
+<script type="text/javascript" language="javascript" charset="utf-8">
+// <![CDATA[
+//  Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
+MochiKit.Sortable.Sortable.create('thelist');
+MochiKit.Sortable.Sortable.create('thelist2');
+// ]]>
+</script>
+</body>
+</html>