I have a tabbable image that I want to play a sound if it is tabbed to and enter is pressed. It's not a button for a form or anything, just an image. How can this be done?
<img src="/images/butt.gif" onclick="fartSound();" tabindex="0">
I already have Javascript where a sound is played when clicked, but I would really love it if I could also have the sound played when it is tabbed to and enter is pressed.
function fartSound(){
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
Any ideas? Thanks!
You can listen to the focus event with javascript.
Something like element.addEventListener('focus', fartSound);
Working demo:
Just click on the white space and hit tab, you will see the console log.
function fartSound(){
console.log("Prrr");
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
const funnyPic = document.getElementById('funnyPic');
funnyPic.addEventListener('focus', fartSound);
<img src="/images/butt.gif" tabindex="0" id="funnyPic">
Add addEventListeners for pressing(keydown) on 'enter'. and add onFocus event in HTML to call the function on click or tabbed
function fartSound(){
console.log('clicked');
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
const element = document.getElementById('element');
element.addEventListener('keydown', function(e) {
//Enter key value is 13
if(e.which == 13) {
fartSound();
}
});
<img src="/images/butt.gif" onfocus="fartSound()" tabindex="0" id="element">
Related
I want to automatically swipe tik-tok videos, so I tried this in Chrome console, but it doesn't work.
var event = new KeyboardEvent('keydown');
document.dispatchEvent(event);
I think Tiktok is most likely preventing untrusted keyboard events from triggering the scroll. If you run this code
window.addEventListener('keydown', (e) => {
console.log(e)
})
window.dispatchEvent(
new KeyboardEvent('keydown',{
//keycode and code for down arrow
keyCode:40,
code:'ArrowDown'
})
)
You'll get a KeyboardEvent object logged that looks something like this
KeyboardEvent {isTrusted: false, key: "", code: "ArrowDown", location: 0, ctrlKey: false, …}
Im pretty sure that Tiktok's keypress/keydown listener ignores synthetic keypresses (prolly by checking event.isTrusted) and thus automatically scrolling by simulating the down arrow press is probably out of question. However, you could target the next button on page and click it.
// this is the class name for the up and down button
let buttonSelector = '.up-and-down';
let buttons = document.querySelectorAll(buttonSelector)
let prev, next = null;
// if theres one button, then its the next
if(buttons.length == 1)
next = buttons[0]
//if not then the first button is prev, and the last next
else
[prev, next] = buttons
//now click
next && next.click();
Hello I have the following button and JS code:
<button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button>
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("playbtn").src = "img/icons/pause.png";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("playbtn").src = "img/icons/play.png";
}
});
When i click my button it changes the button to a play icon image and when i click it again it changes it to a pause icon button. This works fine but it still displays the default button background. I want it to be just an image. It currently gives my a button GUI with an image in it. Thats not what I want, how can I fix it?
Probably you are not changing the value of video.paused
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.paused = false;
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("playbtn").src = "img/icons/pause.png";
} else {
video.paused = true;
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("playbtn").src = "img/icons/play.png";
}
});
You can reset default <button> styles via CSS. This link might be helpful for you.
I have two solutions so far but none of them work. Can anyone lead me in the right direction ?
I am trying to achieve the folowing:
Hide text in a div
User will press Ctrl key, then put his mouse over a button - a javascript function has to be called, and the text in the div should be displayed
If the User releases the Ctrl key - the text should disappear (even if the mouse is on the button), similarly if the User moves the mouse out from the button - the text should disappear (even if the Ctrl key is pressed)
First try:
<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#center").css("visibility","hidden"); //Hidden text in the beginning
$("#select").mouseover(function(e){
while(e.ctrlKey)
$("#center").css("visibility","visible");
$("#center").css("visibility","hidden");
}).mouseout(function(){
$("#center").css("visibility","hidden");
});
});
</script>
</head>
<body>
<button type="button" id="select">CTRL+mouseover</button>
<div id="center">
<h1>Text text text</h1>
</div>
</body>
</html>
The second try:
http://jsfiddle.net/o0q5nszz/10/
As a resume, the idea of the entire code is that holding CTRL + mouseover on a button reveals a hidden text. Can anyone lead me in the right direction ?
I added a button and attached the previous #center mouse events on the button
see this working fiddle: http://jsfiddle.net/o0q5nszz/11/
$(document).ready(function(){
$(document).focus();
var keyPressed = false;
var mouseovered = false;
$("#btn").mouseover(function(e){
doStuff();
mouseovered = true;
});
$("#btn").mouseout(function(){
doStuff();
mouseovered = false;
});
$(document).keydown(function(e){
doStuff();
if (e.ctrlKey)
{
keyPressed = true;
}
else keyPressed = false;
});
$(document).keyup(function(e){
if (keyPressed)
{
keyPressed = false;
}
doStuff();
});
function doStuff()
{
if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
else $("#center").css({"color": "#fff"});
}
});
You can do old way, but in 2019, you could do new way:
MouseEvent.ctrlKey read-only property is a Boolean
<img onmouseover="bigImg(event)" onmouseout="normalImg(event)">
function bigImg(event) {
// false if no ctrl key, true, if pressed
console.log(event.ctrlKey)
}
I'm having a problem with the button in my HTML5 application.
When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.
I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.
Use onmouseup event.
var button = //your button
button.onmouseup = function() {
//your logic
}
Actually onmousedown event instead of onClick will do the trick.
Again the same syntax:
Javascript
<button onmousedown ="clickFunction()">Click me!</button>
function clickFunction(){
//code goes here
}
jQuery
function clickFunction(){
$(button).onmousedown(function(){
//code goes here
});
};
you should use a boolean to save the current state.
var mouse_is_down = false;
var current_i = 0; // current_i is used to handle double click (to not act like a hold)
var button = document.querySelector("#myButton");
button.onmousedown = function(){
mouse_is_down = true;
// Do thing here for a mousedown event
setTimeout(
(function(index){
return function(){
if(mouse_is_down && current_i === index){
//do thing when hold
}
};
})(++current_i), 500); // time you want to hold before fire action in milliseconds
};
button.onmouseup = function(){
mouse_is_down = false;
current_i++;
// Do thing here for a mouseup event
};
Fiddle : link
I am trying to add an event handler to a div that has an image inside of the div. My problem is that the event only works if you double click outside the div right next to it. When you double click the picture inside the div it doesnt not trigger the event. How do I make it so that the event works both ways?
html
<div id="placeholder">
<a href="http://google.com" target="_blank">
<img src="http://www.fat-animals.com/wp-content/uploads/2009/03/11.jpg" alt="" />
</a>
</div>
javascript
var pic;
pic = document.getElementById("placeholder");
pic.ondblclick = function() {
pic.innerHTML = "blocked!";
}
demo
http://jsfiddle.net/9DWrN/
check this fiddle
http://jsfiddle.net/unloco/9DWrN/3/
var pic = document.getElementById("placeholder");
var clicked = false;
pic.onclick = function() {
if(clicked) {
pic.innerHTML = "blocked!";
} else {
clicked = true;
}
setTimeout(function(){
clicked = false
}, 333); //detect fast clicks (333ms)
}
Your current solution actually works, it just doesn't seem like it, since you are redirected to a new page.
If you have Chrome (Firefox too probably, maybe even IE 8+), double middle click on the image (opens in new tab/window). Your event will still get fired. You can then proceed to preventDefault on these events.
Using a double click event is not the best idea to prevent malicious clicks though, as the double click event will only get thrown every two clicks. While a client side validation is bad to prevent malicious clicks anyways, its best to use a click event and check with a timer (i.e. throttle the event to a maxmimum of once every 200 milliseconds, or only allow it if there was not a previous click within the previous 200 milliseconds.
And what about changing pic.innerHTML at onclick?
See http://jsfiddle.net/4Kecd/
var = document.getElementById("placeholder");
pic.onclick = function() {
pic.innerHTML = "blocked!";
alert('The link has been blocked');
}
Even if you delete the link, it will be followed that time.
See http://jsfiddle.net/4Kecd/1/ too.
You can do...
var pic1 = document.getElementById("placeholder1"),
clicked1=false;
pic1.onclick = function() {
if(clicked1){
alert("The link has been deleted. You can't follow the link twice!");
}else{
pic1.innerHTML = pic2.getElementsByTagName('a')[0].innerHTML;
alert('The link has been deleted.\nHowever, the new tab will be opened when you accept this alert.');
clicked1=true;
}
}
...if you want to delete the link but you want the image.
Or you can just disable the link:
var pic2 = document.getElementById("placeholder2"),
clicked2=false;
pic2.onclick = function(e) {
var a=pic2.getElementsByTagName('a')[0];
if(clicked2){
alert("The link has been disabled. You can't follow the link twice!");
a.href="#";/* Nonsense since we have disabled the link,
but we want to ensure that the link isn't followed*/
}else{
clicked2=true;
a.onclick=function(){return false;}
alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');
}
}
Note: UnLoCo's solution is good but its problem is that it doesn't prevent us from following the link.
Instead, you can disable the link at first click and enable it after some seconds:
var pic = document.getElementById("placeholder"),
clicked=false;
pic.onclick = function(e) {
var a=pic.getElementsByTagName('a')[0];
if(clicked){
alert("The link has been disabled. You can't follow the link twice!");
a.href="#";
}else{
clicked=true;
a.onclick=function(){return false;}
if(!a.getAttribute('data-href')){
a.setAttribute('data-href',a.href);
}
alert('The link has been disabled.\nHowever, the new tab will be opened when you accept this alert.');
setTimeout(function(){enableLink(a);},5000);
}
}
function enableLink(a){
a.href=a.getAttribute('data-href');
a.onclick=function(){return true;}
clicked=false;
}
See it here: http://jsfiddle.net/4Kecd/2/