I'm working on a image viewer that has a draggable scrollbar. When the user drags the scrollbar, some of the text on the webpage bees selected. I've tried

window.getSelection().removeAllRanges();

but that doesn't seem to work in IE7/8. Also tried the

document.getSelection().removeAllRanges();

which seems to work just as "well" with IE7/8.

Are there any other ways of doing this? Don't know of any jQuery solutions, but if there are, let me know (:

EDIT: This is the context of the onmouse-event

$("#slideBar").mousedown(function(f) {
    mouseDown = true;
    some more code...
}

$(document).mouseup(function() {
    if (mouseDown) {
       window.getSelection().removeAllRanges();
       more code...
    }
}

I'm working on a image viewer that has a draggable scrollbar. When the user drags the scrollbar, some of the text on the webpage bees selected. I've tried

window.getSelection().removeAllRanges();

but that doesn't seem to work in IE7/8. Also tried the

document.getSelection().removeAllRanges();

which seems to work just as "well" with IE7/8.

Are there any other ways of doing this? Don't know of any jQuery solutions, but if there are, let me know (:

EDIT: This is the context of the onmouse-event

$("#slideBar").mousedown(function(f) {
    mouseDown = true;
    some more code...
}

$(document).mouseup(function() {
    if (mouseDown) {
       window.getSelection().removeAllRanges();
       more code...
    }
}

• javascript
• jquery

2 Answers 2

Try returning false on the functions you use, especially for the "mousedown" event. Also returning false on document.onselectstart and document.ondragstart would help.

You could add some CSS (with jquery) to deal with this:

element {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

Anyway, for IE, you need to add a proprietary attribute (with jquery) on that element:

unselectable="on"