resizing div issue in jquery

Question

Hello guys,

Please open this file in google chrome : http://jqueryui.com/demos/resizable/

It doesn't work properly. When you mouse over the edges, your cursor will change but when you start dragging the cursor changes again, cursor not persistent

how can I fix this ?

Answer 1

Ok, this is the correct answer.

Thanks to bartaz for his helpful and accurate answer to this question.

If you add this in one of your scripts it will fix the issue:

    if ($.browser.safari) {
        $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
        $.ui.mouse.prototype._mouseDown = function(event){
            event.preventDefault();
            return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
        }
    }

Seems Chrome grabs the cursor in its document.onselectstart function.

If you would like to test for yourself download the latest version of resizable and place this in \development-bundle\demos\resizable\default.html:

<script type="text/javascript">
    if ($.browser.safari) {
        $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
        $.ui.mouse.prototype._mouseDown = function(event){
            event.preventDefault();
            return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
        }
    }

    $(function() {
        $("#resizable").resizable();
    });
</script>