I have an audio player on a page. I have a custom progress bar that I created. When users click on that progress bar, I want to tell the audio player to start playing at that position. How do I detect the position of where the person clicked in the div and translate that to a position to play the song?
var aud = $('audio')[0];
var index = 0;
$('.play').on('click', function() {
aud.src = $(this).attr('data-url');
index = $(this).index('.play');
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
});
aud.ontimeupdate = function() {
$('.progress-bar-wrapper').hide();
$('.progress-bar-wrapper:eq(' + index + ')').show();
$('.progress:eq(' + index + ')').css('width', aud.currentTime / aud.duration * 100 + '%')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio src="" style="display: none"></audio>
<div class="play" data-url="{{url}}"><img src="/images/play_course.png" /></div>
<div class="progress-bar-wrapper">
<div class="progress"></div>
</div>
You can get the position of the mouse inside the click event.
I have added two variables inside the click event with both the position of the mouse relative to the element itself and the percentage that the click position represent, use them as you see fit.
Note: I added width and height for the progress bar so I can test your code so keep in mind that the progress wrapper needs to be visible and have a width value.
var aud = $('audio')[0];
var index = 0;
$('.play').on('click', function() {
aud.src = $(this).attr('data-url');
index = $(this).index('.play');
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
});
$(".progress-bar-wrapper").on("click", function (e) {
var posX = e.pageX - $(this).offset().left;
var percentage = parseInt((posX / $(this).width()) * 100);
});
aud.ontimeupdate = function() {
$('.progress-bar-wrapper').hide();
$('.progress-bar-wrapper:eq(' + index + ')').show();
$('.progress:eq(' + index + ')').css('width', aud.currentTime / aud.duration * 100 + '%')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio src="" style="display: none"></audio>
<div class="play" data-url="{{url}}"><img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/play-button-1516951-1285078.png" /></div>
<div class="progress-bar-wrapper">
<div class="progress"></div>
</div>
Related
What my code does:
stays blank for 3 seconds
displayes index 1 of my list of image
loops through the list and restarts at index 0
<div id="background" class="text-center background">
<script type = "text/javascript">
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["/images/indeximg0.jpg", "/images/indeximg11.jpg", "/images/indeximg33.jpg", "/images/indeximg44.jpg", "/images/indeximg55.jpg"], i = 0;
function changeimage()
{
if (++currentPos >= imagesb.length)
currentPos = 0;
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
}
setInterval(changeimage, 3000);
</script>
</div>
What I want it to do:
no 3 second blank background delay
starts with index 0
What I tried:
I set currentPos = 4
this fixed the issue with the first image being displayed but the 3 second delay was still there. I also don't like this way of doing it because I would have to manually change currentPos if i add or remove images to the list
I tried to initialize my background before the first div to fix the 3 second back background with he following code:
<script type = "text/javascript">
background.style.backgoundImage= "url(/images/indeximg0.jpg)";
</script>
nothing changed. still had the 3 second delay
You should
Call the function once before the setInterval() and
When doing ++currentPos you are actually incrementing the variable so the first time you set the background, the value is already 1. The easiest way to change that is to set the background before your if test.
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["https://via.placeholder.com/100", "https://via.placeholder.com/200", "https://via.placeholder.com/300"];
function changeimage() {
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
if ((++currentPos) >= imagesb.length) {
currentPos = 0;
}
}
changeimage();
setInterval(changeimage, 1000);
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.background {
height: 100%;
width: 100%;
}
<div id="background" class="text-center background"></div>
I have two overlapping boxes. Structurally, they are residing side by side in the DOM. The blue one is absolutely positioned and overlaps the red box. I attached two click handlers on each of the boxes with jQuery.
Now, what I want to achieve is that as soon as I click on the intersection of the blue and red boxes, both the click handler of red and blue should be triggered. Now at the moment, only the blue mouse click callback is executed since it is lying on top of red.
I know that I can set pointer-events: none on the blue box but then I only get the event for the red div.
Here is a fiddle for clarification:
https://jsfiddle.net/nas2jg7t/1/
This is as simple as this, check to see if the click occurred within the bounds of the red div and whether the click was fired by the blue div, if so, fire the red div click event:
jQuery(document).ready(function(){
jQuery("body").on("click","#red,#blue", function(elem){
//Get the bottom y coordinate of the red div
const bottomRed = $('#red')[0].getBoundingClientRect().bottom;
//logging test for id of element
console.log(elem.target.id);
//check to see if the click event fell within the red div's boundary
//and if the blue div fired the event, if so, fire red div event
if(elem.pageY <= bottomRed && elem.target.id === "blue"){
$('#red').trigger('click');
}
});
});
Working fiddle: (https://jsfiddle.net/vd0wfspk/1/)
Try having the two elements nested in the DOM and calling event.stopPropagation();
In your case elem.stopPropagation();
You don't have many solution as I know, you need to calculate if the pointer click is inside or not the other div :
jQuery(document).ready(function () {
jQuery("body").on("click", "#red,#blue", function (event) {
console.log(event.target.id);
jQuery("#result").text("Clicked on " + event.target.id);
var otherDiv = jQuery("#red, #blue").not(this);
if (otherDiv.offset().top <= event.pageY &&
otherDiv.offset().top + otherDiv.height() >= event.pageY &&
otherDiv.offset().left <= event.pageX &&
otherDiv.offset().left + otherDiv.width() >= event.pageX) {
otherDiv.trigger('click');
}
});
});
You can use event clientX and clientY in order to get mouse position:
jQuery("body").on("click","#red, #blue", function(e) {
var x = e.clientX;
var y = e.clientY;
var bluPosminX = $('#blue').position().left;
var bluPosmaxX = bluPosminX + $('#blue').width();
var bluPosminY = $('#blue').position().top;
var bluPosmaxY = bluPosminY + $('#blue').height();
var redPosminX = $('#red').position().left;
var redPosmaxX = redPosminX + $('#red').width();
var redPosminY = $('#red').position().top;
var redPosmaxY = redPosminY + $('#red').height();
var clickedto = ""
if (x >= bluPosminX && x <= bluPosmaxX && y >= bluPosminY && y <= bluPosmaxY) {
clickedto += ' blue';
}
if (x >= redPosminX && x <= redPosmaxX && y >= redPosminY && y <= redPosmaxY) {
clickedto += ' red';
}
jQuery("#result").text("Clicked on " + clickedto);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red" style="width:200px; height: 200px; background: red"></div>
<!-- Box blue -->
<div id="blue" style="width:200px; height: 200px; background: blue;position:absolute;top:80px; opacity: 0.7"></div>
<div id="result" style="position: relative; top: 100px;"></div>
I recently was following a youtube tutorial on creating a whack-a-mole type game: https://www.youtube.com/watch?v=toNFfAaWghU.
I followed the code just fine till the end and now I'm wondering if it is possible to set up a system that could detect the score of the user when the time runs out and show different pictures (1-5 star ratings) based a range of scores.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whack-A-Bear!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link href='https://www.cssfontstack.com/Gill-Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio autoplay>
<source src="Outrun - Original Arcade Music.mp3" type="audio/mpeg">
</audio>
<h1>Whack-A-Bear! <span class="score">0</span></h1>
<center><h2>But Not A Hare!!</h2></center>
<div id="timer">
<h2>Timer</h2>
<p id="TimerDisplay">00:15</p>
</div>
<center><button onClick="startGame()">Click Here To Start!</button></center>
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
</div>
<script>
/*https://medium.freecodecamp.org/javascripts-var-let-and-const-variables-explained-with-a-story-2038e3c6b2f9 */
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
/*The querySelector() method only returns the first element that matches the specified CSS selectors.
To return all the matches, use the querySelectorAll() method instead.*/
let lastHole;
let timeUp = false;
let score = 0;
//set random timing for the moles to pop up
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
//set random holes for the moles to pop up from the list of our six holes
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
// if by chance, we keep getting the same one as the last one, run the function again
if (hole === lastHole) {
//shows that it was about to show you the same hole but didn't so ran the function again
console.log('Ah nah thats the same one bud');
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
var imgs = ["yes.png", "Final Hare.png"];
var i = Math.floor(Math.random() * imgs.length);
var raccoon = document.getElementById('raccoon.png');
// these random times refer to how long the mole will stay popped up
const time = randomTime(200, 1000);
const hole = randomHole(holes);
//shows the random home in a random amount of time
console.log(time, hole);
var mole = hole.querySelector(".mole");
mole.style.background = "url('" + imgs[i] + "') bottom center no-repeat";
mole.style.backgroundSize = "60%";
//triggers the CSS to get the mole to come up
hole.classList.add('up');
//makes the mole go away after it has come up => means after the time's up, remove the mole
setTimeout(() => {
hole.classList.remove('up');
//if the time is not up, then run peep () again
if (!timeUp) peep();
}, time);
}
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
//a Timeout function will run when time up is true at 10 seconds
setTimeout(() => timeUp = true, 15000)
var sec = 15;
var timer = setInterval(function(){
document.getElementById('TimerDisplay').innerHTML='00:'+sec;
sec--;
if (sec < 0) {
clearInterval(timer);
}
}, 1000);
}
function bonk(e) {
//function bonk will take in an event which will be us clicking each of the moles
//you can simulate a click in JS but here we don't want that to be possible
if(!e.isTrusted) return; // cheater! To prevent a fake click if the event is not trusted, not clicked with mouse
score++;
this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));
</script>
</body>
</html>
Use a switch statement for the image on the end screen such as
switch(true){
case score > firstStarRatingValue:
document.getElementById("END IMAGE ID").style.backgroundImage = "url(\"IMAGE1.png\")";
break;
case score > secondStarRatingValue:
document.getElementById("END IMAGE ID").style.backgroundImage = "url(\"IMAGE2.png\")";
break;
case score > thirdStarRatingValue:
document.getElementById("END IMAGE ID").style.backgroundImage = "url(\"IMAGE3.png\")";
break;
case score > fourthStarRatingValue:
document.getElementById("END IMAGE ID").style.backgroundImage = "url(\"IMAGE4.png\")";
break;
default:
//because you probably don't want an upper limit on score
document.getElementById("END IMAGE ID").style.backgroundImage = "IMAGE5.png";
}
And you would call that at the end
and because I didn't know the id for the end, i just put END IMAGE ID so that is something you'll have to change.
In the future, please cut your code down to a minimal example. It makes things easier to read for the ones trying to help.
I am trying to make an image move on my command (the arrow keys), using CSS.
I thought about this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script>
function a() {
// k is a global variable but i dont know how to declare it
document.getElementById("img1").style.top = k + "px";
k++;
// and also i dont know how to trigger the function using the arrow keys
}
</script>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="IMAGES/logo.jpg" height="100" width="100"
style="position:absolute; left:100px; top:100px; z-index:1" />
</div>
</form>
</body>
</html>
You could use onkeypress event using JavaScript to capture the keypress events of your keyboard.
for eg:
<input type="text" onkeypress="myFunction()">
Here is a demo: http://jsfiddle.net/nhYN3/36/
$("body").keydown(function(e) {
var max = $('body').width();
var min = 0;
var move_amt = 10;
var position = $("#my_image").offset();
if(e.which == 37) { // left
var new_left = ((position.left-move_amt < min) ? min : position.left-move_amt);
$("#my_image").offset({ left: new_left})
}
else if(e.which == 39) { // right
var new_left = ((position.left+move_amt > max) ? max : position.left+move_amt);
$("#my_image").offset({ left: new_left})
}
});
Source
In JavaScript only (without jQuery), it would look like this:
document.addEventListener("keydown", moveImage, false);
var img = document.getElementById('img1');
//The amount of pixels to move the image by with each keypress.
var moveJump = 10;
function moveImage(e) {
var kc = e.keyCode;
//Gets the current "top" value minus the "px" as an int.
var top = parseInt(img.style.top.substr(0, img.style.top.length - 2));
//Gets the current "left" value minus the "px" as an int.
var left = parseInt(img.style.left.substr(0, img.style.left.length - 2));
switch (kc) {
case 37:
//Pressed left.
img.style.left = (left - moveJump) + 'px';
break;
case 38:
//Pressed up.
img.style.top = (top - moveJump) + 'px';
break;
case 39:
//Pressed right.
img.style.left = (left + moveJump) + 'px';
break;
case 40:
//Pressed down.
img.style.top = (top + moveJump) + 'px';
break;
}
}
Fiddle: http://jsfiddle.net/auwchLdn/2/
I am using Three.js. Having a html site with two div elements, is it possible to render just in one div element?
HTML Code:
<body>
<div id="twocols">
<div id="detailinfo">
<span class="c">Detailinformationen:</span><br/>
<span id="tb" class="g"></span><br/>
<span class="c">Grafiken:</span>
<div id="chart"></div>
<div id="chart2"></div>
</div>
<div id="city">
</div>
</div>
</body>
I want to render into the city div.
Three.js Code:
function initScene() {
//container = document.createElement('div');
//document.body.appendChild(container);
scene = new THREE.Scene();
createCamera();
createLight();
createProjector();
createRenderer();
createControls();
//...
}
createRenderer:
function createRenderer() {
renderer = new THREE.WebGLRenderer({
antialias : ANTIALIAS,
preserveDrawingBuffer : DRAWINGBUFFER
});
renderer.setSize(document.getElementById("city").offsetWidth, document.getElementById("city").offsetHeight);
document.getElementById("city").appendChild(renderer.domElement);
THREEx.Screenshot.bindKey(renderer); // add the printscreen shortcut with "p"
}
createControls:
function createControls() {
controls = new InteractionManager(camera, document.getElementById("city"));
//...
}
InteractionManager.js
initialize: function(camera, domElement) {
this.object = camera;
this.domElement = (domElement !== undefined) ? domElement : document;
this.target = new THREE.Vector3( 0, 0, 0 );
//this.chartManager = new ChartsManager();
if ( this.domElement === document ) {
this.viewHalfX = window.innerWidth / 2;
this.viewHalfY = window.innerHeight / 2;
} else {
this.viewHalfX = this.domElement.offsetWidth / 2;
this.viewHalfY = this.domElement.offsetHeight / 2;
//alert(domElement.offsetWidth + " " + domElement.offsetHeight);
//this.domElement.setAttribute( 'tabindex', -1 );
}
//...
},
so far..
Instead of:
container = document.createElement('div');
Use:
container = document.getElementById('city');