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

Acquiring the applicable CSS for a JavaFX 8 widget

Is it possible to transfer items from one list within a component to another list inside a different component with Vue draggable?

What is the approach of Angular 2 in managing attributes formatted in camelCase?

The functionality of my Javascript code is restricted to a single element within a Python embedded for loop in Django2

Ways to reload a webpage from the bottom without any animation

Customizing Thickness for Tab Labels in MUI 5

Inquiring about the intricacies of using Regular Expressions in

Using the `form` method with `get` works perfectly in Node.js, however, the status remains pending when checking in the developer tools

Getting pictures dynamically from the backend with unspecified file types

The displayed value in the text field remains constant even when the object's attribute is modified

Error encountered: Multer does not recognize the field when attempting to upload multiple files in a node.js environment

How come the Google fonts won't display correctly within my HTML document?

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

Sending serialized data via AJAX to a PHP controller using PDO

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

AngularJS does not recognize Model as a date object in the input

Mastering the art of exchanging cross-domain ajax data in userscripts

Navigating with Express and Vue

What is the process for generating and parsing an XML file using jQuery?

Examining the words within strings and drawing comparisons