I have been searching for a slideshow script that works with Ebay, and found http://xlo.co/blog/web-development/javascript-image-fade?quip_thread=blog-post-19&quip_parent=76 this one that seemed to work ok. I wanted to add a third image to the slideshow and that's when things started going south. The following is the code that I altered from the original page to add the third image.
I've put beside any of the code that I inserted. It works, however, the transitions stop working after the first image. If any one can help, it would be greatly appreaciated.
<div id="test">alpha</div>
<div id="slides" style="display: none;">
<div id="slide0" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content0</div>
<div id="slide1" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content1</div>
<!--ADDITION --><div id="slide2" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content2</div>
</div>
<div id="transition" style="width: 670px; height: 240px;">
<!--ADDITION --><div id="imageholder2" style="position: absolute;"></div>
<div id="imageholder1" style="position: absolute;"></div>
<div id="imageholder0" style="position: absolute;"></div>
<!--first last to avoid messing with z-indices-->
</div>
<!-- SCRIPT FUNCTION -->
<script type="text/javascript">
// <![CDATA[
//image transition
var interval = 3000;
var fadeTime = 10;
var currentImage;
var alpha = 100;
var images = new Array();
images[0]=document.getElementById('slide0');
images[1]=document.getElementById('slide1');
<!--ADDITION -->images[2]=document.getElementById('slide2');
var image0Holder = document.getElementById('imageholder0');;
var image1Holder = document.getElementById('imageholder1');;
<!--ADDITION -->var image2Holder = document.getElementById('imageholder2');;
var currentImageHolder = image0Holder;
var currentImage = 0;
var testId = document.getElementById('test');
image0Holder.appendChild(images[0]);
image1Holder.appendChild(images[1]);
<!--ADDITION -->image2Holder.appendChild(images[2]);
function transition() {
function fade() {
if (alpha > 0) {
alpha = alpha - 1;
document.getElementById('test').innerHTML = alpha;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
}
else {
clearInterval(timer0);
document.getElementById('test').innerHTML = "xx";
if (currentImage == image0Holder) {
image0Holder.style.zIndex = 0;
image1Holder.style.zIndex = 1;
<!--ADDITION -->image2Holder.style.zIndex = 2;
alpha = 100;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
currentImageHolder = image1Holder;
image0Holder.removeChild(image0Holder.lastChild);
image0Holder.appendChild(images[currentImage]);
}
else {
image0Holder.style.zIndex = 2;
image1Holder.style.zIndex = 1;
<!--ADDITION -->image2Holder.style.zIndex = 0;
alpha = 100;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
currentImageHolder = image0Holder;
image1Holder.removeChild(image1Holder.lastChild);
image1Holder.appendChild(images[currentImage]);
}
currentImage = (currentImage+1)%images.length;
timer1 = setTimeout(transition, interval);
}
}
timer0 = setInterval(fade, 20);
}
timer1 = setTimeout(transition, interval);
// ]]>
</script>
Related
I want to make a page that automatically places boxes like Pinterest.
So, I made a code that grasps the size and position of the boxes to be placed with javascript and places them using transform.translate of css.
But, I have some problem.
When I refreshed the browser, it was arranged very well as I want,
but when I resize the browser, it seems to be arbitrarily arranged.
What's the problem Shall it?
Please, help me!!
What I expect
Real
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform.translate</title>
<style>
body {
margin: 0;
}
div {
width: 109px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
div:nth-child(2) {
height: 200px;
}
div:nth-child(5) {
height: 150px;
}
div:nth-child(11) {
height: 180px;
}
</style>
</head>
<body onload="allocate()" onresize="allocate()">
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<script>
function allocate() {
const obj = document.querySelectorAll('.box');
const gap = 10;
const parent = document.querySelector('.box').offsetParent;
const parentT = parent.offsetTop;
const parentL = parent.offsetLeft;
const parentH = parent.offsetHeight;
const parentW = parent.offsetWidth;
const objW = 100;
const cntV = Math.floor(parentW / (objW + gap));
let calcX = parentL;
let calcY = parentT;
let elT = 0;
let elW = 0;
let elH = 0;
let uElL = 0;
let uElB = 0;
let rect;
let rectUpObj;
for (let i = 0; i < obj.length; i++) {
rect = obj[i].getBoundingClientRect();
if (i < cntV) {
elW = rect['width'];
elH = rect['height'];
obj[i].style.transform = "translate(" + calcX + "px, " + calcY + "px)";
calcX += elW + gap;
calcY -= elH;
} else {
rectUpObj = obj[(i - cntV)].getBoundingClientRect();
uElL = rectUpObj['left'];
uElB = rectUpObj['bottom'];
elT = rect['top'];
calcX = uElL;
calcY = -(elT - uElB - gap);
obj[i].style.transform = "translate(" + calcX + "px, " + calcY + "px)";
}
}
}
</script>
</body>
</html>
Please have a look at my example.
I have multiple rows on my website and a scrollto() button, wich is always at the bottom of the screen.
Depending on where the usere is located on my site at a certain moment, I would like him to move to the next row after he clicked the button.
I am aware of how to make a user scrollto(), but I have no clue what kind of selector I should use.
function myFunction() {
var winScroll = window.scrollTop; // current scroll of window
// find closest div
var rows = document.querySelectorAll('.row');
var closest = rows[0]; // first section
var closest_idx = 0;
var min = closest.offsetTop - winScroll;
rows.forEach(function(row, index) {
var divTopSpace = row.offsetTop - winScroll;
if( divTopSpace < min && divTopSpace > 0 ) {
closest = row;
closest_idx = index;
min = divTopSpace;
}
});
var next_idx = closest_idx + 1;
if (next_idx == rows.length) {
next_idx = 0;
}
console.log(rows[next_idx]);
}
.rowOne {
height: 100vh;
background-color: peachpuff;
}
.rowTwo {
height: 100vh;
background-color: firebrick;
}
.rowThree {
height: 100vh;
background-color: deepskyblue;
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
<div class="main">
<div class="row rowOne">
<div class="a">
<div class="b">
Foo
</div>
</div>
</div>
<div class="row rowTwo">
<div class="a">
<div class="b">
Bar
</div>
</div>
</div>
<div class="row rowThree">
<div class="a">
<div class="b">
Foobar
</div>
</div>
</div>
<button id="btn" class="btn" onclick="myFunction()">Button</button>
</div>
Thank you in advance.
Since they are all the same height (100% of the window height), the simple solution would be to simply scroll by that amount.
window.scrollBy(0, window.innerHeight);
Otherwise, you'll need to detect which element is the "current" one, and then get it's next sibling, and then scroll to it. Something like this (haven't tested, so syntax might be off, but this should give you an idea)
var winScroll = window.scrollTop; // current scroll of window
// find closest div
var rows = document.querySelectorAll('.row');
var closest = rows[0]; // first section
var closest_idx = 0;
var min = closest.offsetTop - winScroll;
rows.forEach(function(row, index) {
var divTopSpace = row.offsetTop - winScroll;
if( divTopSpave < min && divTopSpave > 0 ) {
closest = row;
closest_idx = index;
min = divTopSpace;
}
});
var next_idx = closest_idx + 1;
if (next_idx == rows.length) {
next_idx = 0;
}
window.scrollTo(rows[next_idx].scrollTop);
With the "mouse enter" four picture move from left to right.
The animation should start with every "mouse enter".
And there is the problem: After the first "mouse enter" (and the first animation) the second animation only starts after a few seconds have passed. But it should start directly with the second "mouse enter".
Keep looking at the console.log() lines in my code, they explain what I mean.
<!doctype html>
<head>
<style>
* {
margin: 0;padding: 0;
}
</style>
</head>
<body>
<div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; ">
<a id="bild-move-1" href="" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-2" href="" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-3" href="" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-4" href="" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
</div>
<script>
//Initialize interval (and variables) outside of the interval
var interval = null;
var indexA = 0;
var ziel = 75;
var numberofThePic = 1;
var currentMove = -75;
//Function to start the animation
function startAnimation() {
//Only set the interval if it hasn't already been set
if (interval == null) {
console.log("active");
console.log(document.getElementById('bild-move-1').style.marginLeft);
interval = setInterval(function() {
if (numberofThePic <=4) {
if (indexA < ziel){
currentMove = currentMove + 1;
document.getElementById('bild-move-'+ numberofThePic).style.marginLeft = currentMove + "px";
indexA++;
} else {
indexA = 0;
numberofThePic = numberofThePic + 1;
}
} else {
//otherwise, animation is complete, clear the interval
reset();
}
}, 10);
}
}
function reset(){
setTimeout(function(){
for (var indexB = 4; indexB >= 1; indexB--) {
document.getElementById('bild-move-'+ indexB).style.marginLeft = -75 + "px";
}
indexA = 0;
numberofThePic = 1;
currentMove = -75;
clearInterval(interval);
interval = null;
console.log("reset");
}, 2000);
}
wrapper.addEventListener("mouseenter", startAnimation);
</script>
</body>
</html>
$(document).ready(function() {
var hero_image = new Array();
hero_image[0] = new Image();
hero_image[0].src = 'assets/images/link.png';
hero_image[0].id = 'image';
hero_image[1] = new Image();
hero_image[1].src = 'assets/images/bongo.png';
hero_image[1].id = 'image';
hero_image[2] = new Image();
hero_image[2].src = 'assets/images/gandondorf.jpg';
hero_image[2].id = 'image';
hero_image[3] = new Image();
hero_image[3].src = 'assets/images/queen.png';
hero_image[3].id = 'image';
var young_hero = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
var health = [100, 70, 120, 50];
var attack_power = [];
var counter_power = [];
console.log(hero_image[0]);
function it_is_over_9000(){
for (var i = 0; i < young_hero.length; i++) {
var x = Math.floor(Math.random(attack_power)*20) + 3;
var y = Math.floor(Math.random(attack_power)*10) + 3;
attack_power.push(x);
counter_power.push(y);
}
}
function ready_board(){
it_is_over_9000();
for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<button>");
hero_btns.addClass("hero hero_button");
hero_btns.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
hero_btns.text(young_hero[i]);
hero_btns.append(hero_image[i]);
hero_btns.append(health[i]);
$("#buttons").append(hero_btns);
}
}
function char(){
$(".hero_button").on("click", function() {
var hero = $(this);
var hero_select = hero.data('index');
for (var i = 0; i < young_hero.length; i++) {
//var attack = ;
if (i != hero_select){
var enemies = $("<button>");
enemies.addClass("hero enemy");
enemies.attr({
"data-power" : it_is_over_9000(),
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
enemies.text(young_hero[i]);
enemies.append(hero_image[i]);
enemies.append(health[i]);
$("#battle").append(enemies);
}
}
$("#buttons").html($(this).data('name','health','image'));
defender();
});
}
function defender(){
$(".enemy").on("click", function() {
var enemy = $(this);
var enemy_select = enemy.data("index");
console.log(enemy_select);
for (var i = 0; i < young_hero.length; i++) {
if (i == enemy_select) {
var defender = $("<button>");
defender.addClass("hero defender");
defender.attr({
"data-name": young_hero[i],
"data-health": health[i],
"data-image": hero_image[i],
"data-attack": attack_power[i],
"data-counter": counter_power[i],
"data-index": i
});
defender.text(young_hero[i]);
defender.append(hero_image[i]);
defender.append(health[i]);
$("#defend").append(defender);
$(this).remove();
}
}
});
}
$(".defend_button").on("click" , function(){
if($(".defender").data("health") == 0){
$(".defender").remove();
}
$(".defender").attr({
"data-health": $(".defender").data("health") - $(".hero_button").data("attack")
});
});
ready_board();
char();
});
I am trying to make a RPG game and I have the characters being generated the way I want them too but on the $(".defend_button").on("click" , function() at the end it doesn't update the data-health as it should. It only updates once but upon many clicks on the defend-button it doesn't update past the first time.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zelda</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script type = "text/javascript" src = "assets/javascript/game.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<style type="text/css">
.hero { width: 125px; height:150px; border-style: solid; padding: 2px; float: left; margin: 2px; float: left; }
.letter-button-color { color: darkcyan; }
.fridge-color { color: orange; }
#display { margin-top:78px; height:500px; width:220px; margin-left:60px; }
#buttons { padding-top:60px; }
#clear { margin-left: 20px; font-size: 25px; color: black; border-style: solid; width: 100px; }
#image{width: 100px; height: 100px; margin-left: 10px; }
</style>
<body>
<div class="row">
<div class="col-md-8">Select Your Character</div>
</div>
<div class="row">
<div id="buttons" class="col-md-8"></div>
</div>
<div class="row">
<div id="battle" class="col-md-8">
</div>
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary defend_button">Defend</button>
</div>
</div>
<div class="row">
<div id="defend">
</div>
</div>
</body>
</html>
You have to use .data() to update the health value.
var battleResult = $(".defender").data("health") - $(".hero_button").data("attack");
console.log("battleResult should be: "+battleResult );
$(".defender").data({
"health": battleResult
});
I played a little with your game.
I found how to update the health display below the image too...
Since only updating the data wasn't changing anything on the screen.
So, I left the above code there, for you to see it is effectively working.
But since you have to re-create the button to update health on scrreen... It is kind of useless.
I also fixed the death condition
from if($(".defender").data("health") == 0){
to if($(".defender").data("health") <= 0){
I have to stop here before changing to much things.
See it in CodePen
Check your loop in it_is_over_9000(), because I think it is running uselessly too often.
And a dead defender has to be "buried" (lol).
Because when it is killed, a click on the defend button is kind of ressurrecting it.
;)
Try setting the attribute like this. Also, I recommend putting $(".defender") in a variable so you aren't requerying it each time.
var defender = $(".defender");
var loweredHealth = defender.data("health") - $(".hero_button").data("attack");
defender.attr('data-health`, loweredHealth);
Update:
It looks like the $('.defender') call will return multiple items. You either need to select a specific defender or iterate through them individually like so:
$('.defender').each(function(i, nextDefender) {
var loweredHealth = nextDefender.data("health") - $(".hero_button").data("attack");
nextDefender.attr('data-health`, loweredHealth);
});`
I was working with responsive web design and I wanted to slide some images in to a page. I tried some plugins but the problem with the plugin is it uses width and height property and also assigns position: absolute. So I thought of changing the src of the image myself using js and it worked fine, but can I give some transition effect to it?
Demo fiddle
What I have done is:
var i = 0;
var total = 2;
window.setInterval(function() {
show_hide();
}, 1000);
function show_hide() {
var img = $('.image-holder img, .image-holder2 img');
//alert(img.length);
if (i % 2 == 0) {
img[0].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i = 0;
}
else {
img[0].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
My HTML is as follows:
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Here's what I put together. jsFiddle
javascript
var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;
setInterval(function() {
showImage(i);
i++;
if (i > count) i = 0;
}, 2000);
function showImage(i) {
img.eq(i - 1).animate({
"opacity": "0"
}, 1000);
img.eq(i).animate({
"opacity": "1"
}, 1000);
}
HTML
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" />
</div>
CSS
.image-holder img{ opacity: 0;}
.image-holder { position: absolute; }