How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden?
How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden?
Here is an example code snippet:
var justHidden = false;
$(document).ready(function() {
var j;
$(document).mousemove(function() {
if (!justHidden) {
justHidden = false;
clearTimeout(j);
$('.btn').removeClass('hidden');
j = setTimeout('hide();', 1000);
}
});
});
function hide() {
$('.btn').addClass('hidden');
}.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="btn hidden">Click me</button>
</body>
</html>HTML Code :
<!DOCTYPE html>
<html>
<body>
<button id="btn1">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
JavaScript Code :
<script>
$(document).ready(function(){
$("#btn1").on({
mouseenter: function(){
$(this).show();
},
mouseleave: function(){
$(this).hide();
}
});
});
</script>
To make a button disappear when the mouse is moved, you can follow this example:
1. Copy and paste the code below into your HTML file:
<button id='hide_button'>Button</button>
2. Add the following code to your JS file:
var timeout = null
$(document).on('mousemove', function() {
if (timeout !== null) {
$('#hide_button').hide();
clearTimeout(timeout);
}
timeout = setTimeout(function() {
$('#hide_button').show();
}, 3000);
});
The button will vanish as long as the mouse is moving. Otherwise, it will reappear after 3 seconds of mouse inactivity. You can test out this functionality by visiting this link- http://jsfiddle.net/bnfsukhx/
My application is a dashboard app built with React, Redux, and Antdesign. I utilized the layout provided by Ant design at https://ant.design/components/layout/. One issue I encountered is that when clicking on side menus, the active menu gets bold but upo ...
I am looking to utilize processingJS as an npm package in a nodeJS server for deployment on MS Azure. I am using VS15 and encountering difficulties referencing it: var pjs = require('processing-js'); var http = require('http'), fs = r ...
Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...
Seeking advice on how to create a floating box that remains in the bottom right corner of a div using CSS. Any tips or suggestions are appreciated! (Here's an example of what I'm aiming for: https://i.stack.imgur.com/DkD5C.png) ...
My static website is simple, but I am concerned that everyone has access to my assets. For example, when I go to www.mysite.com/assets in the browser, it shows: Index of /assets Parent Directory css/ img/ js/ Is there a way to display a 403 error page ...
Currently, I am working on setting up a basic tagging system by following the database structure provided in this Stack Overflow post. My goal is to create a single page that showcases all the tags, with each tag being visually scaled based on its popular ...
I am attempting to render a component using react.lazy, where the path is a variable in my props. However, I am encountering an error with webpack. The parent component sends the props like this: <DynamicModal url = 'Impuesto/formulario&apo ...
Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...
When I receive a JSONArray from the server, my goal is to use .map() on it in order to extract key-value pairs of each object within the array. However, when I try to implement this code, I encounter an error stating "files.map is not a function". Can some ...
My attempt to install the package resulted in an error message. How can I resolve this issue? ...
I am dealing with a large number of checkboxes that are linked to anchors. Whenever a checkbox is clicked, it navigates to the corresponding anchor on the same page. Is there a more efficient way to implement this? With around 50 checkboxes, my current cod ...
I'm attempting to restrict Javascript from altering the source code of the site while testing with Selenium. Disabling Javascript completely in the Webdriver is not an option as I require it for testing purposes. Below is my approach for the Firefox W ...
I am presently working on a scene using A-frame () in which I have hidden the mouse pointer. Is there a way for me to set it up so that when a specific function is triggered, the mouse pointer will show, and when another function is executed, the mouse poi ...
Looking to change the image upon clicking on any of the navbar items. Emulating the navigation bar behavior from this website : This is my current progress : The HTML file : <html lang="en"> <head> <meta charset="utf-8" /> ...
Here is the code I need to add to my errors array and send the values to my HTML client-side template: { "email": [ "user with this email already exists." ] } I am looking for something like this: "user with t ...
Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly: .container { width: 50vw; height: ...
I am trying to use the amCharts 4 library to create a Radar graph similar to this example: In the example, there are two categories being compared with bullets surrounding each one, right? The code I currently have is as follows: am4core.ready(funct ...
The solution that closely matches my issue can be found at One common use case for .then is chaining ajax requests: $.ajax({...}).then(function(){ return $.ajax({...}); }).then(function(){ return $.ajax({...}); }).then(function(){ retu ...
Is it feasible to pass a variable to jQuery using the .ajax method? Instead of the traditional way, can I do something like this: <button onclick="sendQuery()"> function sendQuery(){ $.ajax({ type: "GET", url: "action.php", ...
I have been working on a contacts application that stores all data temporarily on the client-side. I decided to use material-ui table to showcase the contacts in a visually appealing way. https://i.sstatic.net/8K6cy.png Upon clicking the "Add New Contact ...