How to add a Sound Hover Effect on my page? - javascript

I am working on the Rock Paper Scissors Game. Here is part of my original code without sound effect. I want to add a sound effect on the id of "r","p" & "s" which can play my audio when mouse over those button. I tried the method from other tutorials, but it still can't work. Can anyone help me with this issue. Thanks
HTML
<div class="choices">
<div class="choice" id="r">👊</div>
<div class="choice" id="p">✋</div>
<div class="choice" id="s">✌️</div>
<div class="resultAnnounce">
<p> </p>
<div class = "roundCount">
<p> </p>
</div>
JS
function main() {
rock_div.addEventListener('click', function() {
game('r');
})
paper_div.addEventListener('click', function() {
game('p');
})
scissors_div.addEventListener('click', function() {
game('s');
})
}
main();

This [example][1] here on codepen works fine for me. The trick is to add eventlisteners for mouseover and mouseleave.
hearbeat = document.getElementById('heartbeat')
resetBtn.addEventListener('mouseover', function() {
heartbeat.play();
}, false);
resetBtn.addEventListener('mouseleave', function() {
heartbeat.pause();
heartbeat.currentTime = 0;
}, false);
If it doesn't work it may be that your browser doesn't support the audio tag.

Related

How to stop sound from playing, or how do I make it play ONCE?

I'm animating a chat, but I only want the notification sound to play ONCE -- only when the first grey chat appears (#msg4). However, if I click the button/input field again, it'll play again. How do I make it stop after that? I tried audio.pause, audio.load...I can't make it work.
This is how it works so far (click the input field to load messages): https://ixd1231.firebird.sheridanc.on.ca/narrative_sound/chat.html
HTML
<div class="messages" id="chat-window">
<div class="blue invisible" id="msg1"> Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
<div class="blue invisible" id="msg2">Her name is Sam. *insert pic of Sam and MC*</div>
<div class="blue invisible" id="msg3">Did you know her or her last name by any chance</div><div class="grey" id="msg4" style="display: none">Hello there!</div>
<div class="grey" id="msg5" style="display: none">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well.</div>
<div class="grey" id="msg6" style="display: none">
However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures.
</div>
</div>
<div class="input" id="chat-button" onClick="blueMessage()"></div>
JS
var audio = new Audio('Sound.mp3');
function blueMessage() {
if (HTMLElementsArr.length > 0) {
HTMLElementsArr.shift().classList.remove('invisible');
}
if (!HTMLElementsArr.length) {
greyMessage();
}
}
function greyMessage() {
setTimeout(show_msg4, 1500);
}
function show_msg4() {
document.getElementById("msg4").style.display = "block";
setTimeout(show_msg5, 1500);
audio.play(); //SOUND PLAY
}
function show_msg5() {
document.getElementById("msg5").style.display = "block";
setTimeout(show_msg6, 2500);
msg5.scrollIntoView({
behavior: 'smooth'
});
}
function show_msg6() {
document.getElementById("msg6").style.display = "block";
msg6.scrollIntoView({
behavior: 'smooth'
});
}
create global variable, change the value inside show_msg4()
var isPlayed = false;
function show_msg4() {
document.getElementById("msg4").style.display = "block";
setTimeout(show_msg5, 1500);
if(!isPlayed){
audio.play(); //SOUND PLAY
isPlayed = true;
}
}

Uncaught TypeError: Cannot Read Property 'checked' of null - html checkbox toggle

I am getting an error when attempting to run a function once a checkbox is being checked. The above error appears consistently each time I am attempting to run it. Heres the code:
HTML:
<body>
<header>
<div class="header_container">
<h1>Trivia Quiz</h1>
<p>Welcome to the Trivia Quiz 2020!</p>
<p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
<div class="header_settings" id="header_settings">
<input type="checkbox" id="checkbox" onclick="TimeToggle()">
<label for="TimeToggle">Time Limit</label><br>
<input type="text" id="Timer" name="Timer" placeholder="Seconds" id="header_input">
</div>
<button>Start</button>
</div>
</header>
</body>
And Javascript (stored externally, linked in the head of the HTML document.):
var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");
function TimeToggle() {
if (checkbox.checked) {
header_settings.style.height = "3%";
setTimeout(function () {
header_input.style.display = "none";
}, 500);
} else {
header_settings.style.height = "10%";
setTimeout(function () {
header_input.style.display = "block";
}, 500);
}
}
The code is intended to toggle the height of the div named "header_settings", and the display setting of the input named "header_input" depending on whether the checkbox is checked.
I would appreciate any pointers regarding how this is not working, I have tried a lot. Thanks :)
Is this what you are trying to do ? You can use an onchange function and pass this as an argument and check if in your toggle function if input is checked or unchecked.
Also, you have had two id selectors on your input which is not possible.
In addition, please ensure that your scripts.js is loading just added before the </body> end tag
Add this code as your HTML input
<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
Live Working Demo:
function TimeToggle(el) {
var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");
if (el.checked) {
header_settings.style.height = '50px';
setTimeout(function() {
header_input.style.display = "none";
}, 500);
} else {
header_settings.style.height = '100px';
setTimeout(function() {
header_input.style.display = "block";
}, 500);
}
}
<body>
<header>
<div class="header_container">
<h1>Trivia Quiz</h1>
<p>Welcome to the Trivia Quiz 2020!</p>
<p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
<div class="header_settings" id="header_settings">
<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
<label for="TimeToggle">Time Limit</label><br>
<input type="text" name="Timer" placeholder="Seconds" id="header_input">
</div>
<button>Start</button>
</div>
</header>
</body>
Your problem is a very common one. You are trying to get the html elements using document.get... before the DOM has loaded. You need to wrap those document fetches in the onload listener for the window:
let checkbox;
window.onload = function() {
checkbox = document.getElementById();
};
function TimeToggle() {//...}
Place the external JS to at the end. Just before</body>. And your problem will be solved.
Somewhat like
<body>
<!--Your HTML content here-->
<script src = "External Js.js"></script>
</body>

How i can stop Youtube running Video in popup that i have popup?

I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds

How to use ontouch event in canvas HTML5?

I am new to this site and this is first question I am asking here..if its simple pls forgive me..
I have drawn one background image, on this I am drawing 5 small small images by using drawImage() method. Once I touch the small images then they should disappear or should pop up one alert box but ontouch event is not occurring so far I have searched for ontouch event but no use. I dont want to draw images through img tag in HTML.
Here is my code segment
var car = new Image();
car.src = "img/car.jpg";
car.onload = function() {
imgLoaded = true;
}
if (imgLoaded = true) {
drawBackgroundImg();
drawCarImg();
}
function drawCarImg() {
if (i == 0) {
x1 = Math.floor((Math.random() * 501));
y1 = Math.floor((Math.random() * 301));
cxt.save();
cxt.drawImage(car, x1, y1, car.width, car.height);
cxt.restore();
}
}
car.on('touchstart', function() {
alert("T");
});
Here is my HTML code
<!DOCTYPE html>
<body>
<div id="container" onclick="void(0)">
<canvas id="can"> </canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
</body>
</html>
Could anybody help me to get the solution.
FYI: I am running this code in Phonegap NOT in browser.
$( '#id' ).on( 'touchstart',function(){
//your code
});
here id is id of your html element on which you want to listen touch event.
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
I have found the answer, I made div with invisible and placed the images with position absolute and use the id's of images and trigger the touchstart event.
above said example here
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});

Adding html around videos prevents Vimeo api from working

i got a page on a site and there are several videos within blocs. When i play one video and then hit the close button or click on another box to open it, it works all just fine. But the problem comes when i add extra html markup around the videos, it breaks the close button behavior.
Here's the markup of a box (i've got multiples in my page):
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<iframe ... ></iframe>
</div>
</div>
</div>
</div>
The cunload button is the one closing the box and unloading the video.
Here's the javascript (as seing at the vimeo api's page):
(function(){
var vimeoPlayers = document.querySelectorAll('iframe'), player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) { element.addEventListener(eventName, callback, false); }
else { element.attachEvent(eventName, callback, false); }
}
function ready(player_id) {
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
function setupSimpleButtons() {
var unloadBtn = container.querySelector('.simple').querySelector('.cunload');
addEvent(unloadBtn, 'click', function() { froogaloop.api('unload'); }, false);
}
setupSimpleButtons();
$(".cunload, .box:not(.expanded)").click(function(){
//if (!$(this).is('expanded')) {
froogaloop.api('unload');
//}
});
}
})();
This works just fine, but when i add an extra <div> around the iframe (and i really need to) it doesnt work anymore.
Any clue?
EDIT: problem is more complicated, i added an <ul> and <li> tags around the iframes as such:
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<ul>
<li><iframe ... ></iframe></li>
<li><iframe ... ></iframe></li>
</ul>
</div>
</div>
</div>
</div>
and modified the js line :
var container = document.getElementById(player_id).parentNode.parentNode
to:
var container = document.getElementById(player_id).parentNode.parentNode.parentNode.parentNode
and i got it working.
The problem is that i use the <ul> and <li> tags to call jcarousel and that it adds an extra 3 divs between my .exandable-vids-container and the <ul>. Moreover, sometimes i'll call this carousel and sometimes not, so i really can't go with adding extras .parentNode in the js. This would have to be dynamic and i think the solution has to be in that direction.

Categories

Resources