Troubleshooting: Issues with jQuery Dropdown Menu

I'm currently working on a website that includes a settings feature with a button. My goal is to have the options and other links display in a dropdown menu when hovered over. Although I have written what I believe to be the correct code, it's not functioning as expected.

Check out my JSFiddle here

Here is the Javascript, CSS, and HTML code I'm using:

$(document).ready(function(){
      $('#settings').mouseenter(function(){
        $('#settingDrop').css('visibilty', 'visible'); 
      });
      $('#settingDrop, #settings').mouseleave(function(){
        $('#settingDrop').css('visibilty', 'hidden'); 
      });
    });
#settings {
      width: 40px;
      background-image: url(http://cdn.flaticon.com/png/256/23171.png);
      background-repeat: no-repeat;
      background-size: 40px 40px;
      background-color: #F0F0F0;
      bottom: 0px;
      position: relative;
      height: 30px;
      background-position: center;
      float:left;
    }

    #settingDrop {
      position: absolute;
      width: 200px;
      height: 300px;
      background-color: #F0F0F0;
      float:left;
      top:55px;
      visibility: hidden;
    }
    .navbar {
      margin-left:
      width: 170px;
      padding: 10px 5px 10px 5px;
      text-align: center;
      display: inline-block;
      margin-right: 30px;
      height: 30px;
    }
<div id = 'settings' class='navbar'></div>
    <div id = 'settingDrop'></div>
javascriptjqueryhtmlcssdrop-down-menu

Answer №1

You made a mistake with the spelling of visibility.

$(document).ready(function(){
    $('#settings').mouseenter(function(){
       $('#settingDrop').css('visibility', 'visible'); 
    });
    $('#settingDrop, #settings').mouseleave(function(){
       $('#settingDrop').css('visibility', 'hidden'); 
    });
});

Just a tip for shorter code, you can use CSS properties like display:none and jQuery methods such as show(milliseconds) and hide(milliseconds) to achieve similar results more efficiently. Here's an example:

$(document).ready(function(){

    $('#settings').mouseenter(function(){
       $('#settingDrop').show(500); 
    });

    $('#settingDrop, #settings').mouseleave(function(){
        $('#settingDrop').hide(500); 
    });

});

You can also consider using fadeIn(milliseconds) and fadeOut(milliseconds) instead of changing visibility:hidden to display:none.

* EDIT *

To make the menu disappear automatically after a few seconds (in this case 2 seconds, 2000 milliseconds):

$(document).ready(function(){

    $('#settings').click(function(){
       $('#settingDrop').fadeIn(500);
    });

    $('#settingDrop, #settings').mouseleave(function(){
        var time = setInterval(function(){
            $('#settingDrop').fadeOut(500);
            clearInterval(time);
        }, 2000);            
    });

});

Here is the updated Fiddle link: http://jsfiddle.net/xp4rfLbL/2/

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

Ways to retrieve the current state within a function after invoking the setState method

I'm currently working on a function to store the blogPost object in a document within my Firestore database. The process I have in mind is as follows: Click on the SAVE button and initiate the savePost() function The savePost() function should then ...

javascriptreactjsfirebasegoogle-cloud-firestorereact-hooks

Navigating to native script, the method for extracting an ID from a link is revealed

Is there a way to extract the unique identifier from this URL: I want to retrieve the code "11E89887FABBC1D" when clicking on the link. Any suggestions? ...

javascriptangularnativescript

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss

"415 (Unsupported Media Type) encountered when making a POST request in a REST API

I've encountered an issue with a React component where a checkbox triggers a POST request to a REST API with a single parameter. Despite setting a breakpoint in the WebAPI code, it's not being hit and I'm receiving a 415 Unsupported Media Ty ...

javascriptjqueryreactjsasp.net-web-apiasp.net-web-api2

What is the best way to link my "dynamic sub-component" with AngularJS?

While I have a solid grasp on the fundamentals of AngularJS and can create basic CRUD applications, when it comes to applying this knowledge to real-world scenarios, I find myself struggling with how to integrate the concepts effectively. One specific cha ...

javascriptangularjs

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Tslint is notifying that JSX elements without any children must be self-closing to prevent errors [Error]

Recently, I encountered an issue while trying to build my solution using the command npm run build. The error message displayed was: JSX elements with no children must be self-closing. I came across a similar problem on Stack Overflow but unfortunately ...

htmlreactjstypescriptjsxtslint

Several validation checks - logic malfunction

I have implemented a validation feature for passwords on a form, but I suspect there may be a logic error in my code that I haven't caught yet (blame it on the coffee machine!). Take a look at the JavaScript below: <script type="text/javascript"& ...

javascripthtmlformsvalidation

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Troubleshooting Laravel: Ajax Call for Deleting Records not Functioning Properly on Button Click Event

I've encountered an issue with deleting a record from an ajax call in a Laravel CRUD application. The click event doesn't seem to be triggered, resulting in the delete function not working as intended. Below is the relevant code snippet. web.php ...

jqueryjsonajaxlaravel

The Bootstrap glyphicon content breaks when using ASP.NET MVC minification

When working with asp.net, I noticed that minification tends to disrupt the display of bootstrap UTF symbols. For example, here is what it looks like in the original file: .glyphicon-edit:before { content: "\e065"; } And here is how it appears in ...

css.netasp.net-mvctwitter-bootstrapbundling-and-minification

Determine the name of the Java exception class using JavaScript

Here is the code I am using to call a Java web API: m$.ajaxq({ url: contextPath + "/updateElapsedTime", type: "POST", data: params, contentType: "application/json; charset=utf-8", dataType: 'text', async: optionalRunAsync, success: ...

javascriptjavajqueryajaxexception

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

How can I change the color of a designated column in a Google stacked bar chart by clicking a button?

I am in the process of creating a website that compares incoming students at my university across different academic years. We have successfully implemented a pie chart to display data for the selected year. Now, we aim to include a stacked bar chart next ...

javascripthtmlchartsgoogle-visualization

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

htmlcsstwitter-bootstrapbutton

The chosen option does not display any information

I am new to databinding an html control using ajax for the first time. After checking and debugging my ajax call, I can see that the data is retrieved successfully, but it does not show up in the select option. My javascript code is positioned at the botto ...

javascriptjqueryasp.netajaxdata-binding

Executing a closure within a promise's callback

Currently, I am working on implementing a queue system for a web application in order to locally store failed HTTP requests for later re-execution. After reading Mozilla's documentation on closures in loops, I decided to create inner closures. When ...

javascriptangularjs

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Is there a way to create a site where user data is inputted into an input box or form, and then that information is stored in a .txt file on the user's C drive without uploading it to a server first? I've been experimenting with various forms an ...

javascriptphphtml

Exploring Angular 2 Beta 8: An Introduction to @Query Usage

My attempt to utilize @Query to fetch data regarding an element in my template has not been successful. I made an effort using the following approach: Referenced here. Here is a snippet of my code, import {Component, Query, QueryList, ElementRef} from &a ...

javascriptangular

Concealing forms within an Angular 5 application

I'm currently working on displaying the terms of use on the initial screen along with two buttons. If the user clicks the accept button, they will be directed to the authentication form. However, if they click refuse, the "Refused Terms" screen will a ...

angularhtmltypescript