I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left.
Is there a way to achieve this using jquery code?
$(document).ready(function() {
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>Here's an image for reference: image
I attempted this:
$("#menu").css("left", $(".selected").css("left"));
Unfortunately, it did not work. Any assistance would be greatly appreciated.