2

I have a structure:

<span class="word">This</span><span class="word">is</span><span class="word">the</span><span class="word">text</span><span>.</span>

I want user to be able to make a selection of whole words (spans, class="words") (in browser on desktop and on iOS as well - like in iBooks).

And how can I style it with css?

What is the right way to do this? (didn't work with selections before)

Thanks.

WHITECOLOR
  • 24,996
  • 37
  • 121
  • 181
  • How do you mean "make a selection of whole words"? What should happen when they select a word, and how do they select a word - click it? highlight it? – Christofer Eliasson Jun 20 '12 at 20:09
  • A menu would appear ontop of the selection. – WHITECOLOR Jun 20 '12 at 20:09
  • Related SO page: http://stackoverflow.com/questions/7809319/get-selected-text-expanded-to-whole-words – kol Jun 20 '12 at 20:10
  • Something like a [tooltip](http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/)? – Christofer Eliasson Jun 20 '12 at 20:11
  • I still don't really understand. The user makes a text selection in the normal way (mouse drag, etc.), yes? Then what needs to happen? – Tim Down Jun 20 '12 at 20:25
  • Did you see iBooks or kindle on iPad? User may tap on a screen and it will select one word, then the selection can be extended to nearest words. I need to do this in browser HTML. – WHITECOLOR Jun 20 '12 at 20:31

2 Answers2

1

I know you didn't mention jQuery - but with something this dynamic I think it is highly advisable to use it.

Wrap that whole deal in a div.

<div id="wordSelector"><spans></div>

And then attach a mousedown event to the div. Use a semaphore to ensure that events are handled only during mousedown. Capture mouseover events on the spans until the mouseup event is registered.

Note: These events may need to be attached to document instead of the div to ensure that a mousedown event outside of the div but entering the div is handled, and with mouseup as well in case the mouseup event is outside of the div.

var spansTouched = [];
var mouseDown = 0;
$("#wordSelector").mousedown( function(){
 //track spans touched with a semaphore
 mouseDown++;
});
$("#wordSelector").mouseup( function(){
 mouseDown = 0;
 //handle spansTouched and then reset it to []
});
$(".word").mouseover( function(){
 if(mouseDown > 0){
  spansTouched.push(this);
 }
});

Obviously there is room for improvement here, this is just to highlight a possible approach to take using a semaphore and mouse events.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • It won't work on iOS by default (to make such solution work I need to handle touch and tap events, not mouse) – WHITECOLOR Jun 20 '12 at 20:32
  • @WHITECOLOR - When using a mobile browser on iOS, a touch event counts as a mousedown event. Dragging is synonymous to mouseover, and mouseup is when the touch event stops. Did you do any testing? – Travis J Jun 20 '12 at 20:39
  • Yes mouseover event is not drag on iPad (https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html). That is why i'm looking for "standard solution", not via events handling. It should work. It work in amazon kindle cloud reader (its HTML5 ebook reader) – WHITECOLOR Jun 20 '12 at 20:59
  • @WHITECOLOR - From that link: "the flow of events generated by one-finger and two-finger gestures are conditional depending on whether or not the selected element is clickable or scrollable" .... "A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers". Perhaps mousemove instead of mouseover but the point remains - the "touch" events are mouse events as clearly stated in that apple dev documentation. – Travis J Jun 20 '12 at 21:05
0

Not sure how you mean that the user should select a word. If the user should "select" a word by clicking on it, you could use a jQuery plugin like TipTip or any other tooltip-plugin. At least tiptip support click.

Not sure if any of the tooltip-plugins support triggering on highlight of text by default, but using a JavaScript to listen for highlighting of text and the trigger the appropriate tooltip to show manually, and hide it again if the text is deselected.

Dave Welsh has written a small piece of jQuery to sniff for text-selection, that could be utilized.

Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103