Assistance with designing a speedometer using jQuery and CSS3

I'm currently experimenting with CSS3/jQuery animations for a fun project. I have 10 icons and a speedometer graphic that I am working with. When the page loads, the speedometer graphic is initially rotated to '-60deg'. As the mouse moves over the icons, the speedometer graphic moves to different hardcoded angles ranging from '-' to '+'.

Here is the HTML code:

    <nav class="clearfix" id="nav">
        <ul>
            <li><a class="icon first" data-value="1"></a></li>
            <li><a class="icon second" data-value="2"></a></li>
            <li><a class="icon third" data-value="3"></a></li>
            <li><a class="icon forth" data-value="4"></a></li>
            <li><a class="icon fifth" data-value="5"></a></li>
            <li><a class="icon sixth" data-value="6"></a></li>
            <li><a class="icon seventh" data-value="7"></a></li>
            <li><a class="icon eight" data-value="8"></a></li>
            <li><a class="icon nine" data-value="9"></a></li>
            <li><a class="icon ten" data-value="10"></a></li>
        </ul>
    </nav>
<div id="footer-container">
    <div id="speedometer"></div>
</div>

And here is the JavaScript code:

$(function()
{
    $(".icon").hover(function()
    {
        var ICON_NAME = $(this).attr("data-value");
        switch(ICON_NAME)
        {
            case '1':
                $("#speedometer").stop(true, true).animate({rotate: '-60deg'});
                break;
            // Cases 2 through 10 follow...
        }
    });
})();

I am facing two issues with this setup: Firstly, it doesn't seem to detect the first icon (only icons 2 through 10). Secondly, when I move the mouse over an icon for the first time after the page loads, the speedometer jumps to '0deg' before animating to its current position. How can I address these problems? The jump to 0deg prior to animating is my primary concern.

** PLEASE NOTE ** The initial position of the speedometer is set to '-60deg' using CSS3 transforms.

LINK TO LIVE EXAMPLE: Speedometer Example

Answer №1

Great job! Streamline the look of interactions like this by using the data attributes.

<div class="menu-container" id="menu">
    <ul>
        <li><a class="option one" data-selection="apple"></a></li>
        <li><a class="option two" data-selection="banana"></a></li>
        ...
    </ul>
</div>

<script>
$(function(){
  $(".option").click(function(){
    var selection = $(this).attr("data-selection");
    $("#display-box").text(selection);
  });
});
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Successful authentication through Firebase but receiving a null user in return (Web)

I've encountered an issue while trying to authenticate users using Firebase in my web application. Every time I use the firebase.auth().signInWithEmailAndPassword(email, pass); function for login, the request is successful and triggers the authStateCh ...

What is the method to create an HTML div with a sloping edge?

my HTML & CSS code looks like this: https://i.sstatic.net/8vIaZ.jpg I would like it to look more like: https://i.sstatic.net/O9SA6.jpg Any tips on how I can achieve this?... ...

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

Unable to open javascript dialog box

One issue I encountered involves a jqGrid where users have to click a button in order to apply any row edits. This button is supposed to trigger a dialog box, which will then initiate an ajax call based on the selected option. The problem lies in the fact ...

Combining the functionality of a click event

Is it possible to combine these two functions in a way that ensures when '#css-menu' is shown, '.menu' becomes active, and vice versa? $('.menu').click(function() { $('#css-menu').toggleClass('shown hidden& ...

The usage of CSS pseudo elements with the position absolute property

To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element. The position of the pseudo-element is set to absolute and relative to the parent to position it inside the p ...

Retrieving the specific value of an input from a group of inputs sharing a common class

After extensive research, I have not found a suitable solution to my specific issue. I am creating a block of HTML elements such as <div>, <span>, <i>, and <input> multiple times using a for loop (the number of times depends on the ...

Determine whether an element possesses the rel="nofollow" attribute by utilizing CSS in Selenium test cases

In my Selenium test scripts, I am utilizing CSS selectors as element locators. Currently, my goal is to verify whether an element contains the attribute rel="nofollow" using CSS. Does anyone have insight on how to accomplish this task? ...

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

I'm having an issue with customizing a video player in HTML5. When I press play on the top video, it automatically plays both videos on the page simultaneously. For reference, here is my code on jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/ Bel ...

The Jquery UI dialog refuses to close when the Inner Application is closed

I'm facing an issue with a jQuery dialog box. I have set up a division under the dialog, and within that division, I've loaded an Iframe that contains a URL. The problem arises when I click the close button on the URL window - the dialog box re ...

"Navigate to a webpage by interacting with a text hyperlink - Harnessing the

The link I'm trying to click isn't being recognized at all. When inspecting with developer tools in Chrome, the link appears in the following structure: <main <div <ifreame #document <html <body ...

Nivoslider fails to display images when loaded in dynamic ajax content for the first time

Working on a website using jQuery and Ajax, I encountered an issue. When a page loads dynamically for the first time (before images are cached), the images do not display. However, when I reload the ajax load function, the pictures suddenly appear. $("#ov ...

Discovering the most recent messages with AJAX

I'm feeling a bit lost on this topic. I'm looking to display the most recent messages stored in the database. (If the messages are not yet visible to the user) Is there a way to achieve this without constantly sending requests to the server? (I ...

Why isn't the Mat error functioning properly in this Angular code?

Could someone explain why the Mat error does not seem to be functioning properly in this Angular code snippet? <div class="form-group"> <mat-form-field class="row-styling"> <mat-label for="aplctnName"> Application Name <sp ...

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

Hey there, I'm running into a bit of trouble with my code and I can't figure out why it's not working. Here's a brief overview: I created my own auto-suggest feature similar to jQuery UI autosuggest. Unfortunately, I'm unable t ...

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...

Arrange CSS to distribute list items across two rows with an unlimited number of items

I need my list items to be arranged in 2 rows like the following: item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ...... My CSS skills are not great, so I am struggling to find a solution for this. I have at ...

Sending a different name for the jQuery parameter

I'm looking to select CSS settings based on the presence of a data tag. What would be the correct approach for this? var datadirection = 'left'; //default direction if( $(this).attr('data-right') ){ datadirection = 'righ ...

Encountering an error while utilizing the Tether JavaScript Library

I'm currently in the process of developing a new website and I'd like to add a footer within a container div situated at the bottom. After some research, I came across a JavaScript library known as Tether (), but I've run into issues with i ...

Can the server-side manipulate the browser's address bar?

Picture this scenario: a public display showcasing a browser viewing a web page. Can you send a GET or POST request from a mobile device to an HTTP server, causing an AJAX/pubsub/websocket JavaScript function to alter the displayed page on the screen? Per ...