I am trying to hide a button when the mouse is not moving. That's all. I have found a solution on here but it references a Google javascript file (links directly to a javascript file on one of their hosting drives) and I would like my website to not be dependent on anything else -- I would like it to be stand-alone.
Please help!
<html>
<head>
<script type="text/javascript">>
function change( el )
{
if ( el.value === "Display Menu" )
el.value = "Hide Menu";
else
el.value = "Display Menu";
}
</script>
</head>
<body>
<input type="button" value="Display Menu" onclick="return change(this);" />
</body>
</html>
I believe the solution you found had a jQuery part which you didn't want.
This would do, as it's pure native javascript.
var el = document.getElementById("btnMenu");
var timer;
function showBtn(){
el.style.display = "block";
}
function hideBtn(){
el.style.display = "none";
}
hideBtn();
document.onmousemove = function(){
showBtn();
clearTimeout(timer);
timer = setTimeout(function(){
hideBtn();
},100)
}
<body>
<input id="btnMenu" type="button" value="Display Menu"/>
</body>
This hides the button after 300ms of the mouse not moving, which is enough time to not have it flash (hiding and showing every few ms).
Best to give the button an id if possible for clarity and ease of selection.
Set the CSS for the button to display:none;
Button starts hidden, on move, it is set to show(), then the timer is ready to hide it again in 300 ms if no movement is detected. If movement is detected, the timer is reset.
var timer;
$(document ).mousemove(function(){
$("#mouseDrivenButton" ).show();
clearTimeout(timer);
timer = setTimeout(function(){
$("#mouseDrivenButton" ).hide();
},300)
});
#mouseDrivenButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mouseDrivenButton">Mouse Is Moving</button>
THIS ONE IS PURE JAVASCRIPT FOR YOU and requires no external scripts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mouseDrivenButton {
display: none;
}
</style>
<script>
var timer;
document.onmousemove = function() {
document.getElementById('mouseDrivenButton').style.display = "block";
clearTimeout(timer);
timer = setTimeout(function() {
document.getElementById('mouseDrivenButton').style.display = "none";
}, 300)
};
</script>
</head>
<body>
<button id="mouseDrivenButton">Mouse Is Moving</button>
</body>
</html>
Related
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
var interval = setInterval(int, 0);
}
function mouseOff() { clearInterval(interval); }
</script>
</head>
<body>
<button id="hover"
onmouseenter="mouseOn();"
onmouseleave="mouseOff();">
Hover and Autoclick
</button>
</body>
</html>
It doesn't autoclick when my mouse hovers on it. Do you guys know how to fix this?
You only had one mistake in the initialization of the interval variable inside the function instead of in the main scope, I added a small check of the text changing to red when clicked and it works fine for me now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var interval
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
interval = setInterval(int, 0);
}
function mouseOff() {
clearInterval(interval);
}
function test() {
document.getElementById("hover").style.color = "red";
}
</script>
</head>
<body> <button id="hover" onclick="test();" onmouseenter="mouseOn();" onmouseleave="mouseOff();">Hover and Autoclick</button> </body>
</html>
I try to create a toggle button in order to show/hide some content. For the moment, I use that :
// test.js
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
#content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
</body>
</html>
If I use these code with codepen or JSFiddle, all works fine, but when I try it locally, ( when I click on my index.html file, open it with firefox or an other browser ) my button "Click Me" doesn't works.
When I click on it, nothing happens...
Someone to show me why ?
You could make your function to be fired on load event.
Possible example
(function() {
var loadedContent = {
init: function() {
window.addEventListener("load", function(event) {
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ?
"block" :
"none";
});
});
}
};
loadedContent.init();
})();
#content {
display: none;
}
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
Below is my code for some of my coursework(I will admit). As you can see in the comments i have done the 'setinterval' with a button. But what I want is the 'setInterval' to be able to run automatically. What i mean by this is I do not want the user to have to click the button. Is there a way to do this and if so could you point me in the right direction.
<!DOCTYPE html>
<html>
<head>
<title>Task 3 Manual traffic lights</title>
</head>
<body>
<h1>JavaScript Task 3</h1>
<p >This is my Traffic Light script</p>
<img id="change-light" src="red_traffic_light.png" width="150" height="300" align=middle>
<!-- <button onclick="setInterval(changelights, 1000)" >Start the timer</button> -->
<script>
var list = ["red_traffic_light.png", "red-amber-traffic-light.png","green_traffic_light.png", "amber-traffic-light.png"
];
var index = 0
function changelights() {
index = index + 1
if (index == list.length) index = 0;
var image = document.getElementById('change-light');
image.src=list[index];
}
</script>
</body>
</html>
Just put setInterval(changelights, 1000) inside your script tag.
when browser run that line of code. it will start the timer.
<script>
setInterval(changelights, 1000);
</script>
Call it when your document is ready:
With jQuery :
$( document ).ready(function() {
setInterval(changelights, 1000);
});
Pure javascript:
(function() {
setInterval(changelights, 1000);
})();
I need help. I'm trying to get a link to change the displayed answer when you click on the link. I want it to toggle back and forth each time you click on it. I've been playing around with multiple items but nothing seems to work yet. I've commented out some notes to help sort out what I want to do. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'block';
//get the first div into this variable
//var firstDiv = document.getElementById('first');
firstDiv.style
//change it's style/display properties from none to block. Is it visible now when you click the link?
//firstDiv.
}
</script>
</HEAD>
<BODY>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
It's good practice to move javascript out of your HTML.
Here is an example of toggling the CSS Display property in javascript.
Fiddle: http://jsfiddle.net/LdPfS/
var link = document.querySelector("#home > a")
link.addEventListener("click", function(e) {
e.preventDefault()
var firstDiv = document.getElementById('first'),
secondDiv = document.getElementById('second'),
toggle = firstDiv.style.display === "none" ? "block" : "none"
/* toggle = firstDiv.style.display === "none" ? "block" : "none"
* Read as
* if ( firstDiv.style.display === "none" ) {
* toggle = "block"
* else {
* toggle = "none"
* }
*/
firstDiv.style.display = toggle
secondDiv.style.display = toggle
})
I agree that the all caps html is weird but for the sake of making this quick, I'll copy/paste your code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
// first and foremost, you're using jQuery so let's use jquery
if ($('#first').is(':hidden')) {
$('#first').show();
$('#second').hide();
} else {
$('#first').hide();
$('#second').show();
}
}
// next, let's get your javascript OUT of the html
$(document).ready(function () {
// when the document has loaded, attach our function as a
// click handler to the link
$('#my_switch').on('click', flipSwitch);
});
</script>
</HEAD>
<BODY>
<div id="home">
<a id="my_switch">Let's see if we can get this to work?</a>
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
Similar to MBottens, but with some simple JQuery:
$('#home > a').on('click', function(e) {
e.preventDefault()
$('#first').toggle();
$('#second').toggle();
});
Try this logic. Take a global variable and set its value to 1.
<script type="text/javascript">
var countClick=1;
function flipSwitch(){
if(countClick%2==0){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
else{
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';
}
countClick++;
}
</script>
Also please change your html with the following html:
<body>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="display: none;">This is a test...</div>
<div id="second" style="display: none;">of the emergency broadcast system</div>
</body>
Ok so I have a code that would show different forms based on dropdown selection
Here's the fiddle to that..
Well its always giving me Test1 which means its not changing the div display, it's working on JSFiddle but not on the webpage..
and here's my webpage markup
<html>
<body>
<style>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
</script>
<select name="options" id="options">
<option value="1"> Display </option>
<option value="2">Wka</option>
</select>
<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>
</body>
</html>
That is because in the fiddle your code is set to run at onLoad, but in your code its running before the DOM is created.
Wrap your code into a window.onload event like this:
window.onload = function()
{
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
};
Anyway, like #positivew remembered, your code misses the <head> tag. Is semantically correct to put your JS scripts inside it.
The best thing to do when such problem comes works in jsfiddle and not on webpage is to see the source of the fiddle page.
Your source of the fiddle appears as:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden
{
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.getElementById('options').onchange = function()
{
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv)
{
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}//]]>
</script>
</head>
<body>
<select name="options" id="options">
<option value="1"> Test1 </option>
<option value="2">Test2</option>
</select>
<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>
</body>
</html>
Paste the above code directly and it will work.
After pasting the code directly then you can remove unncecessary lines like below from the fiddle:
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
You need a onload function so your code is run after your HTML is loaded. Try this:
window.onload = function () {
document.getElementById('options').onchange = function () {
var i = 1;
var myDiv = document.getElementById(i);
while (myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}
You can also add the code after all your HTML, before the end of the body tag.
And note that in your post you are missing <head> tags.
You seem to be missing <head> tags.
Jsfiddle is running your script .onload of the window object, without you realizing it. This allows your script to pause on execution until the DOM is ready to be manipulated.
To have it work in your own environment, you can:
Place the entire script after the HTML you're trying to manipulate (e.g. end of the <body>)
Leave your code above the <body> and run it onload of the window object, e.g.
window.onload = function () {
document.getElementById('options').onchange = function () {
var i = 1;
var myDiv = document.getElementById(i);
while (myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}
The page is loaded into the DOM from the top down.
Your document.getElementById('options').onchange is being called before the element with id options exists in the DOM.
If you put your script below the divs, it'll work because the divs are now there before the script is called.