StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Here's a simple example using my answer to your previous question: <a href="http://www.jsfiddle.net/yijiang/83W7X/2/embedded/result" rel="nofollow noreferrer">http://www.jsfiddle.net/yijiang/83W7X/2/embedded/result</a></strong></p> <pre><code>var selected = []; function drawSelection(){ if(selected.length){ selected.sort(function(a, b){ if(a.sourceIndex){ return a.sourceIndex - b.sourceIndex; } else if(a.compareDocumentPosition){ if(a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING){ return 1; } else { return -1; } } }); var range = rangy.createRange(), sel = rangy.getSelection(); range.setStart(selected[0].children[0], 0); range.setEnd(selected[selected.length - 1].children[0], 1); sel.setSingleRange(range); } } $('ul').selectable({ delay: 100, selecting: function(event, ui) { if(ui.selecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.selecting, selected) === -1) { selected.push(ui.selecting); drawSelection(); } }, unselecting: function(event, ui){ if(ui.unselecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.unselecting, selected) > -1){ selected.splice($.inArray(ui.unselecting, selected), 1); drawSelection(); } } }); </code></pre> <p>It mixes jQuery UI's Selectable with Tim Down's excellent Rangy library to create something similar to what you asked for. I think. What you asked for wasn't exactly clear. </p> <p>The code keeps an array of currently selected <code>li</code> elements. The second part of the code adds in the relevant event handlers and options. The <code>drawSelection</code> function is called every time an element is selected or deselected. The function first sorts all elements by their position in the DOM, then proceeds to draw a selection from the first selected <code>li</code> to the last. </p> <p>The code, like <a href="https://stackoverflow.com/questions/4130412/jquery-select-invisible-text-overlaid-on-image-ala-gmail-pdf-viewer/4131438#4131438">theazureshadow's</a>, is proof-of-concept only, since I'm abstracting what really should be the simple task of selecting the <code>li</code>s to the rather heavy Rangy library. It also does not perform very well and could do with some refactoring. </p>

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