Seeking a draggable ruler (meaning it scrolls on double click) similar to the one showcased in the following link:
I would greatly appreciate any assistance in finding a library that can provide this same functionality.
View image here: https://i.sstatic.net/NNV4p.png
Take into account the following.
$(function() {
function determineValue() {
var position = $(".ladder").position().top;
var result = 1;
var stepHeight = $(".step").height();
switch (true) {
case (position > 18 && position < 60):
result = 10;
break;
case (position > -22 && position < 17):
result = 9;
break;
case (position > -55 && position < -21):
result = 8;
break;
case (position > -92 && position < -54):
result = 7;
break;
case (position > -130 && position < -92):
result = 6;
break;
case (position > -166 && position < -130):
result = 5;
break;
case (position > -200 && position < -166):
result = 4;
break;
case (position > -238 && position < -200):
result = 3;
break;
case (position > -272 && position < -238):
result = 2;
break;
case (position < -272):
result = 1;
break;
}
return result;
}
$(".ladder").draggable({
axis: "y",
containment: [0, -300, 150, 60],
drag: function(e, ui) {
$(".value").val(determineValue());
}
});
});.ui-ladder {
width: 150px;
height: 100px;
text-align: center;
overflow: hidden;
position: relative;
}
.ui-ladder .step {
padding: 0.5em 0;
border-bottom: 1px solid #ccc;
}
.ui-ladder .marker {
border-top: 2px solid rgba(255,0,0,0.65);
position: absolute;
top: 51px;
width: 100%;
}
.ui-ladder .value {
position: absolute;
top: 41px;
left: 118px;
width: 1.5em;
padding-left: 5px;
}
.ui-ladder .arrow {
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ccc;
margin-left: -10px;
top: 42px;
left: 118px;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-ladder ui-widget">
<div class="ui-widget-content ladder" style="top: -145px">
<div class="step">10</div>
<div class="step">9</div>
<div class="step">8</div>
<div class="step">7</div>
<div class="step">6</div>
<div class="step">5</div>
<div class="step">4</div>
<div class="step">3</div>
<div class="step">2</div>
<div class="step">1</div>
</div>
<div class="marker"></div>
<div class="arrow"></div>
<input class="value ui-widget-header" value="5" type="text" />
</div>I'm currently exploring ReactJS and I'm facing a dilemma in understanding the destructuring process in the code snippet below: const IngredientsList = ({ list }) => React.createElement('ul', null, list.map((ingredient, i ...
I encountered a strange error while building my project with Webpack. The error is related to the Got package that I am trying to import from its `package.json` file. Module parse failed: .../node_modules/got/package.json Unexpected token (2:8) You may ne ...
I'm working on a single-page website with four sections arranged like this: <section id=“4”> <section id=“3”> <section id=“2”> <section id=“1”> Now, I want to change the order of these sections when scrolling ...
After searching for a solution for quite some time, I have yet to find a suitable answer. I am currently working on a JSF web application using the RichFaces library. The application supports multiple locales, allowing users to change them by selecting fro ...
The main idea behind my project is quite simple. I have a grid of company logos extracted from an XML document using XSLT, each logo with its own unique link to the respective company profile. On the same page, I have a separate div that serves as a "prev ...
Could you assist me in properly executing $anchorscroll with an href like this? Html: </div> <div> <a class="button" ng-click="scrollTo('section')" ng-href="#{{url}}" title="{{section}}">Next</a> </div> ...
I have a coding challenge where I need to navigate through a sprite sheet using setTimeouts. Everything is functioning as expected, but I am curious about implementing a feature that allows me to skip frames by pressing the "m" key. Essentially, I want it ...
I am trying to adjust the position of my markers when the zoom level is at 18 or higher by adding 10px upwards. However, my current approach doesn't seem to be working as expected. Can someone please assist me with this issue? You can view the code sn ...
I have a SQL database table with columns as follows: Row1 Row2 Row3 Id Country 1 1a 1b 34 Europe 2 2a 2b 45 US 3 3a 4d 5g Australia I am currently working on implementing an autocomplete feature ...
Please find below the UI screenshot highlighting the dropdown menu: What I am looking for? I would like the option selected in the dropdown menu to be updated for each specific row in the database using AJAX. Below are the codes I have written. As a beg ...
I am planning to send a Material-UI icon to the Test component and I need to define the correct proptype for it. App.js import "./styles.css"; import VisibilityIcon from "@material-ui/icons/Visibility"; import Test from "./Test&q ...
I am currently working on a website where I need to create a table with fixed width td tags, rather than the entire table having a fixed width. This is necessary because I will be dynamically showing and hiding columns using jQuery, and also using a jQuery ...
Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...
Is there a way to retrieve all recently tagged media from all users, similar to what is shown on this link ? The Instagram API only provides media from the access_token's owner. Once again: requestUrl = 'https://api.instagram.com/v1/tags/&apo ...
As I work on my AngularJS and Firebase-powered website project, I aim to leverage Facebook login for seamless user connectivity. While Firebase's simple login feature promises an easier authentication process, I face the challenge of effectively acces ...
Hello, I am encountering a 500 internal server error when I click this button that performs the following action: $(".btn-email").on('click', function() { swal('Waiting','Please wait, sending email now','info'); ...
Looking to develop a digital magazine application with smooth swipe transitions and fade in effects when swiping left and right. I attempted using jQuery.mobile, but struggled with adapting the background image height. My goal is to create a universal web ...
As a beginner, I am currently working on a small function that will allow users to pick up objects and add them to an inventory by entering text in a box. In my setup, there is a text box with the id "commandBox" and a button that triggers the 'pickU ...
Currently, I am in the process of developing a program that can solve matrix equations. My main focus right now is on making sure the parser functions correctly. However, I am feeling lost and unsure of where to begin. In my program, I utilize an array of ...
Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...