jQuery Selectable Customization

Question

I have a jQuery selectable as shown below. It is actually an ordered list. The ordered list is residing inside a div named myBorderDiv.

When I press control and mouse over on the items, all of them get a unwanted effect (in IE8) as shown in the image below. How to overcome this?

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml">

<title></title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
    rel="stylesheet" type="text/css" />

<script type="text/javascript">

    $(document).ready(function () {

        //Make it as selectable
        $("#myOrderedListSelecatableAsHeaderPart").selectable();


        //selectablestop Event Handler
        $("#myOrderedListSelecatableAsHeaderPart").bind("selectablestop", function (event) {
            var test= "";
            $(".ui-selected", this).each(function () {
                test+= this.getAttribute("Categoryid") + ",";
            });


        });

        $("button, input:submit").button()

        $("button#selectall").click(function (event) {
            //When select all button clicked 

            //Add css class
            $("#myOrderedListSelecatableAsHeaderPart li").addClass("ui-selected");

            //Trigger the selectablestop event and preventDefault
            $("#myOrderedListSelecatableAsHeaderPart").trigger("selectablestop");
            event.preventDefault();

        });


    });


</script>
<style type="text/css">
    #myOrderedListSelecatableAsHeaderPart .ui-selected
    {
        background: #F39814;
        color: white;
    }

    #myOrderedListSelecatableAsHeaderPart
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #myOrderedListSelecatableAsHeaderPart li
    {
        margin: 3px;
        height: 18px;
        padding: 3px; /*Display list items in blobk */
        display: inline-block;
    }
    </style>
</head>


<body>



<div>
    <h3>
        Hold control and click to select multiple items
    </h3>
    <div>

        <div id="myBorderDiv" style="border: 1px solid brown; width:375px;">

            <ol id="myOrderedListSelecatableAsHeaderPart"  >
                <li categoryid="2" class="ui-widget-content">Apple </li>
                <li categoryid="4" class="ui-widget-content">Bag </li>
                <li categoryid="10" class="ui-widget-content">Cup </li>
                <li categoryid="7" class="ui-widget-content">Doll </li>
                <li categoryid="8" class="ui-widget-content">Empty </li>
                <li categoryid="9" class="ui-widget-content">Football </li>
                <li categoryid="10" class="ui-widget-content">Gems </li>
                <li categoryid="50" class="ui-widget-content">Horse </li>
                <li categoryid="3" class="ui-widget-content">Inter </li>
                <li categoryid="4" class="ui-widget-content">JokerCap </li>
                <li categoryid="5" class="ui-widget-content">King </li>
                <li categoryid="6" class="ui-widget-content">Lemon </li>
                <li categoryid="7" class="ui-widget-content">Nail </li>
                <li categoryid="8" class="ui-widget-content">One </li>
                <li categoryid="9" class="ui-widget-content">Ping </li>
                <li categoryid="10" class="ui-widget-content">Quick </li>
                <li categoryid="7" class="ui-widget-content">Royal </li>
                <li categoryid="8" class="ui-widget-content">Standard </li>
                <li categoryid="9" class="ui-widget-content">Train </li>
                <li categoryid="10" class="ui-widget-content">Umbrella </li>
                <li categoryid="50" class="ui-widget-content">Van </li>
            </ol>
        </div>
        <br />
        <button id="selectall">
            Select All</button>
    </div>
</div>

Where is your image? It'll help with answering the question. — Jon, Feb 09 '12 at 10:23
Its already available (pasted) in the post. (Basically it is unwanted spaces on the right side and highlighted bahavior in IE). Since it is pure html, you will be able to run it using any web development environment. — LCJ, Feb 09 '12 at 10:24

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

This snippet of code abridged from this answer will resolve the issue

$(function(){
    $.extend($.fn.disableTextSelect = function() {
                $(this).bind('selectstart',function(){return false;});
    });
    $('#myOrderedListSelecatableAsHeaderPart').disableTextSelect();
});

edited May 23 '17 at 12:30

Community

1
1

answered Feb 10 '12 at 13:53

Nicholas Murray

13,305
14
65
84

score 0 · Answer 2 · answered Feb 09 '12 at 10:32

0

For #1, try display:inline' ordisplay:inline-block` for that DIV. If that doesn't work, floating that DIV should work, but then you'll have to add the famous "clearfix" to it, as w/o it the DIV will have 0 height. Alternatively, set it to smaller value (isn't that obvious). I guess you want that DIV to not be wider than the space taken by its child boxes.

As for #2, no clue. Are you sure you're not clicking/holding the mouse button also, while you're hovering around with ctrl pressed? Can you demo this somewhere? What's the name of that site where js code can be hosted, anyone?

answered Feb 09 '12 at 10:32

jsFilddle ? It would be great if you can run this and see the effect yourself. This (#2) is working fine in Chrome. [I have resolved the space issue. The code is updated.] – LCJ Feb 09 '12 at 10:41
#1: remove `width: 60%;` from OL. #2, I cannot reproduce in IE9 and IE9 running in IE8 mode. I see that selecting works, but I cannot repro ctrl+hover, no matter what I do. I do see the exact same effect when I do ctrl+left-mouse-click+hover, but that's how text is selected, and I doubt you'll find a way to override that behavior. – Feb 09 '12 at 10:44
I am getting the unwanted effect in Ctrl+Hover itself in IE8? Any thoughts on how to override that behavior? – LCJ Feb 09 '12 at 10:49
I think problem #2 actually goes away with that 60-percent fix, but you have to make it clear that selecting these boxes work only if you start by clicking somewhere in the OL (that is, outter box). Clicking outside of the outter box results in text selection (regardless of ctrl key), and I see the same behavior in Firefox also. – Feb 09 '12 at 10:50
I am hovering inside the div only. For me, it is working fine for Firefox and Chrome. The issue is in IE8 – LCJ Feb 09 '12 at 11:06

jQuery Selectable Customization

2 Answers2

Linked