loop through highlighted text.

Question

I have a question on a javascript i need to loop through user selection(highlighted text) and change the text direction from trl or ltr . here what i did :

this._execCom("FormatBlock",'<div>');
var node = null;
if (this.area.contentWindow.getSelection) {
    node = this.area.contentWindow.getSelection().anchorNode.parentNode;

}
else if (this.area.contentWindow.document.selection) {
    var range = this.area.contentWindow.document.selection.createRange();
    if (range) {
        node = range.parentElement();
    }
    var walker=this.area.contentWindow.document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
    while (walker.nextNode())
    {
        x=walker.currentNode.tagName;
        if( x == 'DIV')
            walker.currentNode.style.direction="ltr";
    }

this changes the direction for all divs even if they are within the highlighted text or not and i need the changes to be done on the user selection only .

can you help me please .

many thanks

Can you show the *full* code snippet? (And maybe format it more readably? That code is a mess of inconsistently-placed braces, inconsistent indentation, and -- as far as one can tell from what's been posted -- undeclared variables resulting in implicit globals.) — T.J. Crowder, May 14 '12 at 06:39
Found this: http://stackoverflow.com/questions/3454152/cross-browser-selection-range-library — mowwwalker, May 14 '12 at 08:16

moribvndvs · Answer 1 · 2012-05-14T08:51:04.177

Edit: I misunderstood your question. So you just want the user to be able to click and drag to select which elements should have the 'direction' toggled between ltr and rtl. I have an alternative to using selection ranges, which will be quite painful to use in this solution.

Here, I use jQuery to listen to 'mousemove' events, checking to see if the left mouse button is depressed. If so, I toggle the direction css attribute. I also use a custom data flag to prevent flickering of the elements as you drag the mouse.

There is also a bit in there to prevent the paragraphs from being selected, which may have been your intention but I found annoying. You can just comment out/remove that part if you want them to be able to select the text.

Here's the fiddle: http://jsfiddle.net/nbWYK/8/

TL;DNR:

$(document).on("mousemove", 'p', function(e) {
    var $this = $(this);

    if ($this.data('ignore-direction-toggle')) return;

    if (e.which == 1) {
        $this.data('ignore-direction-toggle', true);
        $this.css({
            'direction': ($this.css('direction') == 'ltr' ? 'rtl' : 'ltr')
        });
    }
}).on('mouseleave', 'p', function(e) {
    var $this = $(this);
    if ($this.data('ignore-direction-toggle')) $this.data('ignore-direction-toggle', null);
});

loop through highlighted text.

1 Answers1