The nuSelectable plugin enhances the functionality of jQuery

Question

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here.

After selecting items, they should change color, but nothing happens when I click on them. What could be causing this issue?

Here is the HTML code:

        <div id="item-container" class="text-center">
        <div class="row element-medium-top element-medium-bottom">
            <div class="selectIconBox ">
              <div class="item iconWrap">1</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">2</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">3</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">4</div>
              </div>
            </div>
        </div>

This is the CSS code:

.iconWrap-selected {
    background-color:#6a989e;
}
.iconWrap {
    border: 2px solid #101820;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 17px;
    margin-bottom:10px;
    font-size: 1.25em;
    color:#101820;
    position:relative
}
#item-container .iconWrap {
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.selectIconBox {
    display: inline-block;
    margin: 40px 80px;
}

Lastly, here is the JS code:

<script src="../assets/js/jquery.nu-selectable.js"></script> 
<script>
$('#item-container').nuSelectable({
  items: '.item',
  selectionClass: 'selectIconBox',
  selectedClass: 'iconWrap-selected',
  autoRefresh: true
});
</script>

Your assistance with this matter would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

I believe you are looking for something like this:

1) Include the .selectable class along with your .selectIconBox class in your HTML.

2) Delete your JavaScript code and

.iconWrap-selected { background-color:#6a989e;}

from the CSS.

3) Add

.selectable .ui-selected { background: #F39814; color: white; }

to your CSS.

4) Replace your existing jQuery with $( ".selectable" ).selectable();.

Note : You can modify the background-color of the selected item by changing the value in the .ui-selected class in your CSS. However, you cannot change the name of that specific class (i.e. .ui-selected).

Source: JQuery User Interface

Update :

Follow Up Answer: As mentioned in the comment below.

$(".selectable").selectable();

// On click event for .submit class or any other defined class.

$(".submit").click(function()
{
  var selectedArr = []; // Initialize an Array

  $(".selectable").each(function() // Find each element with the .selectable class 
  {
    var selectedNum = $(this).find('.ui-selected').text(); // Find the text inside the .ui-selected class
    var intNum = parseInt(selectedNum); // Convert it to an Integer
    if (!isNaN(intNum)) { // Check if it is a number and then add to the array
      selectedArr.push(intNum);
    }    
  });
  alert(selectedArr); /* The Array "selectedArr" now contains the selected numbers */
});

.iconWrap {
    border: 2px solid #101820;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 17px;
    margin-bottom:10px;
    font-size: 1.25em;
    color:#101820;
    position:relative
}
#item-container .iconWrap {
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.selectIconBox {
    display: inline-block;
    margin: 20px 80px;
}

.selectable .ui-selected { background: #F39814; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="item-container" class="text-center">
  <div class="row element-medium-top element-medium-bottom">
    <div class="selectIconBox selectable">
      <div class="item iconWrap">1</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">2</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">3</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">4</div>
    </div>
  </div>
</div>

<button class="submit">Submit : Alert! Selected</button>

Answer 2

I believe you are looking for something like this:

1) Include the .selectable class along with your .selectIconBox class in your HTML.

2) Delete your JavaScript code and

.iconWrap-selected { background-color:#6a989e;}

from the CSS.

3) Add

.selectable .ui-selected { background: #F39814; color: white; }

to your CSS.

4) Replace your existing jQuery with $( ".selectable" ).selectable();.

Note : You can modify the background-color of the selected item by changing the value in the .ui-selected class in your CSS. However, you cannot change the name of that specific class (i.e. .ui-selected).

Source: JQuery User Interface

Update :

Follow Up Answer: As mentioned in the comment below.

$(".selectable").selectable();

// On click event for .submit class or any other defined class.

$(".submit").click(function()
{
  var selectedArr = []; // Initialize an Array

  $(".selectable").each(function() // Find each element with the .selectable class 
  {
    var selectedNum = $(this).find('.ui-selected').text(); // Find the text inside the .ui-selected class
    var intNum = parseInt(selectedNum); // Convert it to an Integer
    if (!isNaN(intNum)) { // Check if it is a number and then add to the array
      selectedArr.push(intNum);
    }    
  });
  alert(selectedArr); /* The Array "selectedArr" now contains the selected numbers */
});

.iconWrap {
    border: 2px solid #101820;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 17px;
    margin-bottom:10px;
    font-size: 1.25em;
    color:#101820;
    position:relative
}
#item-container .iconWrap {
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.selectIconBox {
    display: inline-block;
    margin: 20px 80px;
}

.selectable .ui-selected { background: #F39814; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="item-container" class="text-center">
  <div class="row element-medium-top element-medium-bottom">
    <div class="selectIconBox selectable">
      <div class="item iconWrap">1</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">2</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">3</div>
    </div>
    <div class="selectIconBox selectable">
      <div class="item iconWrap">4</div>
    </div>
  </div>
</div>

<button class="submit">Submit : Alert! Selected</button>

Answer 3

Answer №2

To accomplish this, utilize jQuery UI.

Take a look at this straightforward code snippet.

Here is the HTML structure:

<div>
<ul class="items">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    </ul>
</div>

JavaScript part:

$(".items").selectable({filter:"li"});

Cascading Style Sheets (CSS):

.items{
    width:400;
    height:500;
    overflow:auto;
}
.item{
    color:#fff;
    height:100px;
    width:100px;
    border-radius: 50%;
    background:cyan;
    margin:15px;
    text-align:center;
    float:left;
    list-style:none;
}
.ui-selected{
    background-color:green !important;  
}

Answer 4

To accomplish this, utilize jQuery UI.

Take a look at this straightforward code snippet.

Here is the HTML structure:

<div>
<ul class="items">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    </ul>
</div>

JavaScript part:

$(".items").selectable({filter:"li"});

Cascading Style Sheets (CSS):

.items{
    width:400;
    height:500;
    overflow:auto;
}
.item{
    color:#fff;
    height:100px;
    width:100px;
    border-radius: 50%;
    background:cyan;
    margin:15px;
    text-align:center;
    float:left;
    list-style:none;
}
.ui-selected{
    background-color:green !important;  
}

The nuSelectable plugin enhances the functionality of jQuery

Answer №1

Update :

Answer №2

Similar questions

Uploading an Array of Files Using Ajax and PHP is Not Being Received by the .php Script

Display a single video on an HTML page in sequential order

Interactive dropdown menu that scrolls upon clicking

Discover the CSS auto height value using JavaScript

Fullcalendar not displaying any events

What is the best way to integrate Angular 5 with various sources of JavaScript code?

A web application using JavaScript and Node.js with a focus on creating a REST

tag of data in jquery

Ensure that the responsive SVG image remains centered even when resizing

Unused sizing attributes in IMG tags

How to style a div's height responsively behind a circle using CSS

The Vue.js component is only refreshing after I manually refresh the browser page

Creating a custom arrow design for a select input field using CSS

Ready document not triggering at the anticipated time

What is the best way to organize React components that need to retrieve data from a modal?

Using Three.js to Manipulate Objects through Their Names

Issue with interactive rows in a table ( Rails Version 4 )

React Leaflet causing a frequent map refresh due to context value updates

The results do not appear when using Bootstrap 3 Typeahead

What is the best way to extract a particular key value from a JSON object?