Display unique data-id values for each list item when hovering with Jquery

Question

Display unique data-id values for each list item when hovering with Jquery

I am designing a menu for my website where it will appear on the left side of the web. The menu will consist of X <li> items, each with an icon. When I hover over each <li>, I want to display X data-id associated with that item along with the icon.

For example:

<ul><li data-id="My Profile">ICON</li></ul>

On mouseover:

<ul><li>ICON + My Profile</li></ul>

I have tried implementing this functionality but it seems to be not working correctly. Here is the example: http://jsfiddle.net/pqa84nec/1/

This is the JavaScript code I am using:

$("#menu").each(function() {
$(this).find('li').each(function(){
var oldData = $(this).html();
var data = $(this).attr("data-id");
var that = this;
        $(this).mouseover(function() {
setTimeout(function() {
            $(that).html(oldData+data);
}, 100);
        });
        $(this).mouseout(function () {
             $(this).html(oldData);
        });
});
    });

Can someone offer me some assistance with this issue?

P.S.

It appears that there is a bug in the code:

https://i.sstatic.net/fcgzz.png

Thank you!

javascript jquery css

Answer 1

Answer №1

Give this a shot:

Here's the JavaScript code snippet:

$(function() {
  $("#menu ul li").each(function() {
    var _this = $(this);
    var icon = _this.html()
    $(this).hover(function(e) {
      setTimeout(function() {
        _this.html(icon + _this.data('id'));
      }, 200);
    }, function(e) {
      setTimeout(function() {
        _this.html(icon);
      }, 200);
    })
  });
});

Include this CSS code:

#menu>ul>a {
  overflow: hidden;
}

Link to example on JsFiddle

Answer 2

Give this a shot:

Here's the JavaScript code snippet:

$(function() {
  $("#menu ul li").each(function() {
    var _this = $(this);
    var icon = _this.html()
    $(this).hover(function(e) {
      setTimeout(function() {
        _this.html(icon + _this.data('id'));
      }, 200);
    }, function(e) {
      setTimeout(function() {
        _this.html(icon);
      }, 200);
    })
  });
});

Include this CSS code:

#menu>ul>a {
  overflow: hidden;
}

Link to example on JsFiddle

Answer 3

Answer №2

Your script contains several errors that need to be addressed. Consider the following revised version:

$(document).ready(function() {
  $("#menu a li").each(function() {

    var previousContent = $(this).html();
    var dataValue = $(this).attr("data-id");

    $(this).mouseover(function() {
      setTimeout(function() {
        console.log(previousContent + dataValue);
        $(this).html(previousContent + dataValue)
      }, 100);
    });
    $(this).mouseout(function() {
      console.log(previousContent);
      $(this).html(previousContent)
    });

  });
})

Answer 4

Your script contains several errors that need to be addressed. Consider the following revised version:

$(document).ready(function() {
  $("#menu a li").each(function() {

    var previousContent = $(this).html();
    var dataValue = $(this).attr("data-id");

    $(this).mouseover(function() {
      setTimeout(function() {
        console.log(previousContent + dataValue);
        $(this).html(previousContent + dataValue)
      }, 100);
    });
    $(this).mouseout(function() {
      console.log(previousContent);
      $(this).html(previousContent)
    });

  });
})

Answer 5

Answer №3

If you're open to a CSS solution, I have something for you that builds on your existing code. This approach eliminates the need for JavaScript to operate your menu. It may not be elaborate, but it offers a starting point for improvement. In the provided fiddle, I included the Font Awesome library for icon usage.

HTML:

<div id="menu">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-user"></i>
                <span>My Profile</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-power-off"></i>
                <span>Log Out</span>
            </a>
        </li>
    </ul>
</div>

CSS:

*{margin:0;padding:0;}
html,body {
    background-color: #263238;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}
li {
  position: relative;
}
a {
  text-decoration: none;
}
#menu {
  background-color: #37474f;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 50px;
}
#menu ul {
  list-style: none;
}
#menu > ul > li {
  border-bottom: 1px solid #263238;
}
#menu > ul > li > a {
  color: #263238;
  display: block;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 50px;
}
#menu > ul > li > a i {
  display: block;
  height: inherit;
  line-height: inherit;
  text-align: center;
  width: 50px;
}
#menu > ul > li > a span {
  color: #fff;
  font-size: 16px;
  left: 50px;
  max-width: 130px;
  opacity: 0;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transition: opacity 0.3s ease .2s;
  visibility: hidden;
  white-space: nowrap;
}
#menu > ul > li > a:hover {
  background-color: #fbd75b;
  color: #fff;
  width: 200px;
}
#menu > ul > li > a:hover span {
  opacity: 1;
  visibility: visible;
}

Check out the fiddle here: jsfiddle.net/LjLvwb8q/3/

Answer 6

If you're open to a CSS solution, I have something for you that builds on your existing code. This approach eliminates the need for JavaScript to operate your menu. It may not be elaborate, but it offers a starting point for improvement. In the provided fiddle, I included the Font Awesome library for icon usage.

HTML:

<div id="menu">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-user"></i>
                <span>My Profile</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-power-off"></i>
                <span>Log Out</span>
            </a>
        </li>
    </ul>
</div>

CSS:

*{margin:0;padding:0;}
html,body {
    background-color: #263238;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}
li {
  position: relative;
}
a {
  text-decoration: none;
}
#menu {
  background-color: #37474f;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 50px;
}
#menu ul {
  list-style: none;
}
#menu > ul > li {
  border-bottom: 1px solid #263238;
}
#menu > ul > li > a {
  color: #263238;
  display: block;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 50px;
}
#menu > ul > li > a i {
  display: block;
  height: inherit;
  line-height: inherit;
  text-align: center;
  width: 50px;
}
#menu > ul > li > a span {
  color: #fff;
  font-size: 16px;
  left: 50px;
  max-width: 130px;
  opacity: 0;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transition: opacity 0.3s ease .2s;
  visibility: hidden;
  white-space: nowrap;
}
#menu > ul > li > a:hover {
  background-color: #fbd75b;
  color: #fff;
  width: 200px;
}
#menu > ul > li > a:hover span {
  opacity: 1;
  visibility: visible;
}

Check out the fiddle here: jsfiddle.net/LjLvwb8q/3/

Display unique data-id values for each list item when hovering with Jquery

Answer №1

Answer №2

Answer №3

Similar questions

The height of each Bootstrap column is equal to the height of its corresponding

What is the arrangement of the Bootstrap grid stack?

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

Error in Node and Express: Unable to access route

Tips for updating a list of orders using keywords entered in a text input field

Angular http.get() recognizing when a call exceeds its timeout limit

Creating a background overlay on top of an image background using styled-components in React: A step-by-step guide

Is there a way to prevent an external script from making changes to an inline style?

Don't forget to keep in mind the importance of the "Radio" value when you are submitting a form to yourself on

What is the name attribute of an ES2015 function?

"Can you guide me on how to display a React component in a

Discovering an npm module within an ember-cli addon component

The Google Maps API is not providing any data in response to my jQuery JSONP request

Solving layout issues / Techniques for determining element heights

Tips for waiting for a function to finish executing in node.js (using a for loop)

Applying a background image to Django templates: Step-by-step guide

Turn on and off jquery tabs depending on user's choice

Are there any features in web browsers that support accessibility, such as those designed for sign language?

Refreshing the calendar events in the eventDrop function using Jquery FullCalendar

Alignment of labels in Bootstrap for various form groups with error messages and required fields