StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Sorting:</strong> I would implement the phrases in an unordered list (ul) which makes it as simple as </p> <pre><code>$("#ulId").sortable(); </code></pre> <p>You can make ul/li items stack next to each other in a similar manner to how you make horizontal navigation menus out of ul elements.</p> <p><strong>A destrunction button:</strong> Just use a template li similar to this</p> <pre><code><li id="text1Wrapper"> <span id="text1" onmouseover="javascript:$('text1Remove').fadeIn();" onmouseout="javascript:$('text1Remove').fadeOut();" onclick="javascript:$('text1Content'). replaceWith( $(document.createElement('input')) .attr('type','text') .val($('text1Content').text()) );"> <span id="text1Content">Text Here</span> <img id="text1Remove" style="display: none;" src="./x.jpg" alt="Remove" onclick="javascript:$(this).parent().remove();" /> </span> </li> </code></pre> <p>A quick description: The span mouse over event tells jquery to fade in the remove button (so when you hover, the remove button becomes available).</p> <p>The span mouse out event tells jquery to fade out the remove button when it's no longer needed (so when you move the mouse off the li, the remove button is no longer visible)</p> <p>The onclick of the span replaces the span with a text box containing the content of the span. I will leave the "save changes" as an excercise for the reader, since it's essentially the same but in reverse.</p> <p>Img tag style has display: none to hide it initially. This is essentially the end product of a fadeOut() but without the fade.</p> <p>The on click event of the remove button gets the parent (the li) and removes it, and all children from the dom.</p> <p>Note that the events are only put here because it seemed the logical place to explain it. All events in the outer SPAN tag are a useless waste of space, as they will all be overridden when we clone the node in the next section.</p> <p><strong>Insertion into the page:</strong> All you have to do now is</p> <pre><code>var cloneLi = $('#text1Wrapper').clone(); cloneLi.attr('id', 'text2Wrapper'); var cloneSpan = cloneLi.children('#text1').attr('id', 'text2'); var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content'); var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove'); </code></pre> <p>You will then need to change the mouseover, mouseout and onclick functions of the outer span using jquery events:</p> <pre><code>cloneSpan.mouseover(function(e) { // Insert functionality from template here }); cloneSpan.mouseout(function(e) { // Insert functionality from template here }); cloneSpan.click(function(e) { // Insert functionality from template here }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload