CODEWITHSUNDEEP
jqueryjquery-ui
jeebs
jeebs

Reputation: 325

jQuery UI event not firing without scrolling down in the browser

A jQuery UI 'dblclick' event fails to fire unless the web page is scrolled down a small amount from the top. Scrolling down allows the event to be fired but scrolling back to the top of the page reintroduces the issue.

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <style>
        #selectableTiles .ui-selected
        {
            background: black;
            color: white;
        }

        #selectableTiles
        {
            list-style-type: none;
            margin: 50 auto;
            padding: 0;
        }

        #selectableTiles li
        {
            margin: 5px;
            padding: 5px;
            float: left;
            width: 150px;
            height: 150px;
            text-align: center;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
    <div id="dialog-confirm" title="">
        <p style="text-align:center; margin-left: 10px; margin-right: 10px">
            You must have scrolled down.
        </p>
    </div>
    <ul id="selectableTiles">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
    </ul>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selectableTiles").selectable();
        });
        $("#dialog-confirm").dialog({
            autoOpen: false,
            resizable: false
            modal: true,
            buttons: {
                OK: function () {
                    $(this).dialog("close");
                }
            }
        });
        $(".ui-state-default").dblclick(function (event) {
            $("#dialog-confirm").dialog("option", "title", event.target.textContent);
            $("#dialog-confirm").dialog("open");
        });
    </script>
    <p class="clear">
    </p>
</body>
</html>

http://jsfiddle.net/NbYDH/

The JSFiddle page above recreates the issue in IE. To recreate the issue with Firefox, right-click in the Result panel at the bottom right. Select 'This Frame' -> 'Show Only This Frame' (you will likely have to shrink the size of the browser window to introduce a scroll bar). I don't know about other browsers.

You will find that double-clicking on one of the panels only launches a dialog if the scroll bar is a little below the top of the page. This has been a bizarre issue to describe and recreate.

Upvotes: 0

Views: 343

Answers (1)

bart s
bart s

Reputation: 5100

After some more investigation with the selectable() I ran into this SO article I combined that with your fiddle and it works. Note that I put everything into one document.ready().

According to the documentation, the cancel prevents selecting if you start on elements matching the selector. However it requires anohter click event handler to unselect the things again.

Below the code that works for your situation

$("#selectableTiles").selectable(
    {cancel: '.ui-selected'}
);
$(document).on('click','.ui-selected',function() {
   $(this)
    .removeClass('ui-selected')
    .trigger('selectablestop');
});

Upvotes: 1

Related Questions