Develop Reference

Adapt image movement to window size in javascript

I made an animation on my website which moves if clicked on. The problem is that on the javascript function that manage it, I gave a series of coordinates which fits only if the browser is in full screen. Here are some example:
https://imgur.com/a/Ug6eQlp and https://imgur.com/a/bPrVg5y
This is my javascript function:
function init(){
imgObj = document.getElementById('minion');
immagine = document.getElementById('immagine_minion');
imgObj.style.position= 'absolute';
imgObj.style.top = '240px';
imgObj.style.left = '-300px';
imgObj.style.visibility='hidden';
appaer();
}
And this, for example, the method which moves it as soon as I open the page:
function appaer(){
immagine.src="../img/minion_dx.png";
if (parseInt(imgObj.style.left)<200) {
imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
imgObj.style.visibility='visible';
animate = setTimeout(appaer,20);
} else
stop();
}
How can I make it fit for every screen resolution?

this should get you started
var stage_number = 0
function go_to_next_stage() {
stage_number++
var stage = document.getElementById("stage" + stage_number)
me.style.left = getComputedStyle(stage).getPropertyValue("left")
me.style.top = getComputedStyle(stage).getPropertyValue("top")
if (stage_number > 3) stage_number = 0
}
img {
position: absolute;
left: -100px;
top: 0;
transition: left 2s, top 2s
}
.stage {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
}
#stage1 {
left: 0;
top: 0;
}
#stage2 {
right: 0;
top: 0;
}
#stage3 {
right: 0;
bottom: 0;
}
#stage4 {
left: 0;
bottom: 0;
}
div {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<img id="me" src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=100" />
<div onclick="go_to_next_stage()">click anywhere to continue</div>
<div class="stage" id="stage1">
</div>
<div class="stage" id="stage2">
</div>
<div class="stage" id="stage3">
</div>
<div class="stage" id="stage4">
</div>

How to move two different images across the screen using JavaScript

I have been challenged with a website that requires me to make two images race at random across the screen to a finish line. I am required to make this happen using JavaScript. Unfortunately I have ran into some trouble here making this happen.
I have the script that allows a div container and an object "animate" (which is a small square) to move across the screen to the right as I am supposed to do. My question comes into play when trying to do this to two different images.
The goal is to have the animation I have created to apply to the images, I cannot figure out how to apply the functions to the images already placed on the page to make it seem as if they are racing on random intervals across the page to the finish line.
I understand the concept of the animation and the JavaScript behind it, I just dont understand how to make it apply to an image, and more than 1 image at that.
Please advise.
Here is my code that I am using: you can see that I left my demo animation on the page, and the two images I am looking to apply it to.
function myMove()
{
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame()
{
if (pos == 350)
{
clearInterval(id);
}
else
{
pos++;
elem.style.left = pos + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>

Try this one:
function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemBluefishWin = document.getElementById("bluefishwin");
var elemTurtle = document.getElementById("turtle");
var elemTurtleWin = document.getElementById("turtlewin");
var posBluefish = 0;
var posTurtle = 0;
var hasWinner = false;
elemBluefishWin.style.display = 'none';
elemTurtleWin.style.display = 'none';
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish >= 350 && posTurtle >= 350)
{
clearInterval(id);
return;
}
if(posBluefish < 350)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish >= 350)
{
posBluefish = 350;
if(!hasWinner){
hasWinner = true;
elemBluefishWin.style.display = 'unset';
}
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 350)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle >= 350)
{
posTurtle = 350;
if(!hasWinner){
hasWinner = true;
elemTurtleWin.style.display = 'unset';
}
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
#bluefishwin {
position: absolute;
right: 1pc;
top: 31pc;
display: none;
}
#turtlewin {
position: absolute;
right: 1pc;
top: 20pc;
display: none;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
/*#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}*/
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
It gets an element for each image and adds every 5ms a random amount of pixels (between 0 and 9) to each pos of image.
If both "racers" reached the target (350px) the interval is cleared and the race is over.
The winner gets an image displayed at the finish line.

an example:
function startRace() {
animateRacer("player1", true);
animateRacer("player2", true);
}
function animateRacer(playerId, reset) {
var elem = document.getElementById(playerId);
var pos = parseInt(elem.style.left, 10);
if (isNaN(pos) || reset) {
pos = 0;
}
//console.log(playerId + ': ' + pos);
if (pos < 450) {
pos += randStep(3);
elem.style.left = pos + 'px';
setTimeout('animateRacer("' + playerId + '")', randStep(5));
}
}
function randStep(max) {
var min = 1;
return Math.floor(Math.random() * (max - min)) + min;
}
body {
overflow: hidden;
}
#container {
width: 500px;
height: 160px;
position: relative;
background-color: yellow;
}
.player {
width: 50px;
height: 50px;
background-color: gray;
position: relative;
}
#player1 {
background-color: red;
top: 20px;
}
#player2 {
background-color: blue;
top: 40px;
}
<p>
<button onclick="startRace()">Start Race</button>
</p>
<div id="container">
<div id="player1" class="player"></div>
<div id="player2" class="player"></div>
</div>

function mover(obj) {
this.obj=obj;
this.pos = 0;
this.id = setInterval(this.frame, 5);
}
mover.prototype.frame=function() {
if (this.pos == 350) {
clearInterval(this.id);
} else {
this.pos++;
this.obj.style.left = this.pos + 'px';
}
}
}
Simply do:
img1=new mover(document.getElementById("pic1"));
You can repeat this with every image and you could store them into an array:
images=[];
function letsmove(){
images.push(new mover(someid));
...
}
And you can do this with all images on the site:
images=[];
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}
See JS OOP and JS Prototyping for more explanation

JavaScript slideshow isn't working as intended

I made this little Slideshow with HTML/CSS/JS. Most of it is working but there is one thing which I can't figure out. How do I make it so the text above each image fits the img itself when autosliding is on? Right now it only shows the right title for each img when i manually click through. Any help is appreciated. Many thanks in advance.
var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;
var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
}
}
function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');
ChangeText(indexCount);
if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}
function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});
document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});
#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>

Smoke Trail Effect - Javascript

How can one make a smooth smoke trail effect with Javascript, out of the code I attached? The trail should follow an object, but have the position the object had a moment ago. The code I attached does have some sort of trail effect, but it is not smooth. Can give the trail a position using something like this: position:trail = position:object, 5 ms ago?
var left = parseInt(document.getElementById("thingy").style.left);
setInterval(fly, 10);
function fly() {
if (left > 300) {
left = 300;
};
left++;
document.getElementById("thingy").style.left = left + "px";
}
setInterval(trail, 100);
function trail() {
document.getElementById("trail").style.left = left + "px";
}
<div id="thingy" style="position:absolute; top:100px; left: 0px; width: 100px; height: 100px; background-color:#000000;"></div>
<div id="trail" style="position:absolute; top:125px; left: 0px; width: 50px; height: 50px; background-color:#CCCCCC; z-index: -10;"></div>
If it is possible I would like to stay out of jQuery.

This solution clones the element each time it moves.
CSS3 transitions are used on the cloned nodes' background to simulate a smoke trail.
The code ensures there are never more than 100 cloned nodes.
var thingy= document.getElementById('thingy'),
left = thingy.offsetLeft,
shadows= [],
delta= 4;
setInterval(fly, 10);
function fly() {
var shadow= thingy.cloneNode();
shadow.classList.add('shadow');
shadow.style.backgroundColor= 'silver';
document.body.appendChild(shadow);
setTimeout(function() {
shadow.style.backgroundColor= 'white';
},100);
shadows.push(shadow);
if(shadows.length>100) {
shadows[0].parentNode.removeChild(shadows[0]);
shadows.shift();
}
if(left+delta > document.body.offsetWidth-thingy.offsetWidth || left < 0) {
delta= -delta;
}
left+= delta;
thingy.style.left = left + 'px';
}
body {
margin: 0;
padding: 0;
}
#thingy {
position: absolute;
top: 100px;
left: 0px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
.shadow {
transition: all 1s;
z-index: -1;
}
<div id="thingy"></div>
Update
For a "smokier" effect, you can use random values for the cloned nodes' width, height, transition, etc., like I've done in this Snippet:
var thingy= document.getElementById('thingy'),
tleft = thingy.offsetLeft,
ttop = thingy.offsetTop,
smokes= [],
deltaX= deltaY= 2;
setInterval(fly, 10);
function fly() {
if(Math.random()>0.5) {
var smoke= thingy.cloneNode();
smoke.classList.add('smoke');
smoke.style.background= 'gray';
smoke.style.opacity= 0.2;
smoke.style.transition= Math.random()+'s';
smoke.style.width= Math.random()*thingy.offsetWidth+'px';
smoke.style.height= Math.random()*thingy.offsetHeight+'px';
smoke.style.marginTop= smoke.offsetHeight+'px';
smoke.style.borderRadius= (Math.random()*25+25)+'%';
document.body.appendChild(smoke);
setTimeout(function() {
smoke.style.opacity= 0;
},100);
smokes.push(smoke);
if(smokes.length>20) {
smokes[0].parentNode.removeChild(smokes[0]);
smokes.shift();
}
}
if(tleft+deltaX > document.body.offsetWidth-thingy.offsetWidth || tleft < 0) {
deltaX= -deltaX;
}
if(ttop +deltaY > document.body.offsetHeight-thingy.offsetHeight || ttop < 0) {
deltaY= -deltaY;
}
tleft+= deltaX;
ttop += deltaY;
thingy.style.left = tleft + 'px';
thingy.style.top = ttop + 'px';
}
body {
margin: 0;
padding: 0;
background: black;
height: 100vh;
}
#thingy {
position: absolute;
top: 100px;
left: 0px;
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
.smoke {
z-index: -1;
}
<div id="thingy"></div>

My Javascript runs in Chrome, Not Firefox

I've run the following code in the console in chrome and it works just fine. When I attempt to run in the firebug console and scroll to the trigger point at the bottom of the page nothing happens. Can anyone help ID why this isn't working in firefox?
CartSummaryOverlay = {
activate: document.body.parentNode.scrollHeight * 0.9,
limit: 0,
totalItems: parseInt(jQuery('span.cart-total-qty').text()),
loadSummary: function(){
if (CartSummaryOverlay.totalItems > 0) {
jQuery.get("/checkout/cart", function(html){
CartSummaryOverlay.total = jQuery("td.total span.price span", html).text();
CartSummaryOverlay.CreateOverlayBackground();
CartSummaryOverlay.RemoveOverlayBackground();
});
} else {
CartSummaryOverlay.total = "0";
CartSummaryOverlay.CreateOverlayBackground();
CartSummaryOverlay.RemoveOverlayBackground();
}
},
CreateOverlayBackground: function(){
$overlay = jQuery("<div id='overlay' style='background-color: #000; opacity: .85; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; color: white; text-align: center; font-size: 200%;'></div>");
$overlay.html('<div style="position: fixed; top: 40%; left: 38%;">Number of Items in Cart: '+CartSummaryOverlay.totalItems+'<br>Total: '+CartSummaryOverlay.total+'</div><div id="close_overlay"><a id="closing_tag" style="top: 35%; right: 38%; color: white; position: fixed; font-size: 50%;">X</a></div>');
jQuery("body").append($overlay);
},
pageScroll: function(){
var current_height = document.body.scrollTop + document.body.clientHeight;
if (current_height >= CartSummaryOverlay.activate && CartSummaryOverlay.limit === 0) {
CartSummaryOverlay.loadSummary();
CartSummaryOverlay.limit += 1;
}
},
RemoveOverlayBackground: function(){
// setTimeout(function(){
jQuery('#closing_tag').click(function(){
jQuery("#overlay").remove();
CartSummaryOverlay.limit = 0;
});
}
}
window.onscroll = CartSummaryOverlay.pageScroll;