Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

Question

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

I have a set of items like this:

I am trying to replicate the functionality of a file explorer in terms of item selection.

To clarify, I aim to create a feature where hovering over an item and left-clicking it would generate a virtual rectangle to select all items within that area (similar to how Windows Explorer allows you to select multiple files).

I have attempted to achieve this using JQuery by monitoring mouse up/down events and related hover events, but so far nothing has worked as intended.

Any suggestions on how I could accomplish something similar are greatly appreciated. Thank you!

javascript jquery css

Answer 1

Answer №1

If you're looking to implement a feature where clicking an item selects it (changing background color with border) and clicking the same item again deselects it, you can achieve it by using the following code snippet in a JSFiddle.

Here is the structure of the HTML:

<body>
  <div class="outer">
    <ul class="list_wrap">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>
</body>

The jQuery script:

$(document).ready(function(){
    $('.list_wrap li').on('click', function(){
    if($(this).hasClass('selected')){
        $(this).removeClass('selected')
    }
    else{
        $(this).addClass('selected')
    }
  })
})

The CSS styling for selected items:

.selected{
  background:#f1f1f1;
  border:solid 1px #ddd;
}

Answer 2

If you're looking to implement a feature where clicking an item selects it (changing background color with border) and clicking the same item again deselects it, you can achieve it by using the following code snippet in a JSFiddle.

Here is the structure of the HTML:

<body>
  <div class="outer">
    <ul class="list_wrap">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>
</body>

The jQuery script:

$(document).ready(function(){
    $('.list_wrap li').on('click', function(){
    if($(this).hasClass('selected')){
        $(this).removeClass('selected')
    }
    else{
        $(this).addClass('selected')
    }
  })
})

The CSS styling for selected items:

.selected{
  background:#f1f1f1;
  border:solid 1px #ddd;
}

Answer 3

Answer №2

It seems like your desired solution involves utilizing the right click functionality. In jQuery, this is how you can achieve it:

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

For a visual representation, check out this JSFiddle. I hope this helps!

Answer 4

It seems like your desired solution involves utilizing the right click functionality. In jQuery, this is how you can achieve it:

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

For a visual representation, check out this JSFiddle. I hope this helps!

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

Answer №1

Answer №2

Similar questions

Can you provide me with steps to customize my mouse cursor specifically when hovering over the canvas?

Identifying the moment a jquery-ui autocomplete appears using Selenium testing

Guide to sending data from an HTML page to a MVC Controller using WebApi

Locate all instances of words that begin with a certain character and are immediately followed by numbers within

Enhance the performance of page loading and implement a consistent spinner feature to ensure smooth transitions for users in Next.js version 13

Problem: Tailwind CSS styles are not being applied on responsive screens in Next.js.Issue: Despite

"Troubleshooting when a NodeJS Program Refuses to

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

Challenges arise when creating a complementary php script for a natural language form

Display the contents of a JSON array in an HTML format

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

Trouble with displaying vertical scroll bar in React app when height is set to 100%

Setting the opacity of an image will also make the absolute div transparent

Establishing an RSS feed (Google shopping) for an online store built on Vue-storefront

I am encountering an issue where my express.js server is not successfully processing the data sent from my react native

When using the test() method in JavaScript with regular expressions, it may return true even if not all characters match, even when using

As the div elements stack up and you scroll towards the top or bottom

How to mimic the "show more" feature on Twitter without using ajax?

The function createVNode does not exist in the context of Vue integrated with Laravel

Please identify the path of chromedriver for selenium-standalone