I would move cards on click and put them on the green table with animation of transition; then when cards are on the table, when i click on them, they must show their front face, and then return with back face.
The code doesn't work, i see the back cards on the left of the page but when i click on nothing happens.
var card_value = ['1B', '2B', '3B', '4B', '5B', '6B'];
var card_left = [];
var card_top = [];
for (i = 0; 1 & lt6; i++) {
card_left = 70 + 100 * (i % 4);
card_top = 15 + 120 * Math.floor(i / 4);
}
var started = false;
function moveToPlace(id) {
var el = document.getElementById("card_" + id);
el.style["z-index"] = "1000";
el.style["left"] = card_left[id] + "px";
el.style["top"] = card_top[id] + "px";
el.style["z-index"] = "0";
}
function hideCard(id) {
var el = document.getElementById("card_" + id);
el.firstChild.src = "http://placehold.it/100x150/44F/000.png&text=Back";
el.style["WebkitTransform"] = "scale(1.0)";
}
$(".table div").click(function() {
if (started) {
var el = document.getElementById("card_" + id);
el.firstChild.src = card_value[id] + ".gif";
el.style["WebkitTransform"] = "scale(1.2)";
setTimeout("hideCard(" + id + ")", 1000);
} else {
card_value.sort(function() {
return Math.round(Math.random()) - 0.5;
});
for (i = 0; i < 6; i++) {
setTimeout("moveToPlace(0" + i + ")", i * 100);
}
started = true;
}
})
.page {
border: 1px solid #ccc;
perspective: 1000;
}
.table {
position: relative;
margin: 0 0 0 200px;
height: 500px;
background: green;
}
.table div {
position: absolute;
left: -140px;
top: 100px;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transition-property: left, top, -webkit-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out, ease-out, ease-in-out;
}
<body>
<div class="page">
<div class="table">
<div id="card_00">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_01">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_02">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_03">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_04">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_05">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
</body>
Related
i made a blackjack game , i want to make the dealer cards flip from back to front everything works expect that when the shown cards appear they apper one under another .. how can i make them appear
in line ??
function TurnDealerCards()
{
DealerCards.innerHTML = "";
for (var i = 0; i < DealerArray.length; i++) {
var Dealercard = document.createElement('img');
var random = Math.floor((Math.random() * 10));
Dealercard.setAttribute("width", 50);
Dealercard.setAttribute("src", (allCards[random])[(DealerArray[i])]);
DealerCards.appendChild(Dealercard);
}
DealerCards.className = 'myDIV';
}
.myDIV {
display:inline-block;
border: 0px;
width: 50px;
background-color:transparent;
color: transparent;
animation: mymove 1s ;
}
#keyframes mymove {
50% {
transform: rotateY(180deg);
}
}
<table border="0" width="100%" height="100%" style="text-align: center">
<tr><th id="NewGame" onclick="MakeAnewGame();" style="float:left">
<img src="media/cards/new game.png" width="100" /><label>change table color</label><input id="changeBGC" type="button" onclick="changeBackground();">
</th></tr>
<tr><td style="height:100pt;width:100%;font-size:100pt;color:white"><div id="dealer"></div></td></tr>
Use display:flex to the wrap (myDiv) and use animation to each img
In js set animation-delay and increase the time one by one
var DealerCards=document.getElementById("cards");
DealerCards.innerHTML = "";
var DealerArray=[1,1,1];
for (var i = 0; i < DealerArray.length; i++) {
var Dealercard = document.createElement('img');
var random = Math.floor((Math.random() * 10));
Dealercard.setAttribute("width", 50);
Dealercard.setAttribute("src","jj");
Dealercard.style.animationDelay=(i + 0.5 )+'s';
DealerCards.appendChild(Dealercard);
}
DealerCards.className = 'myDIV';
.myDIV img{
border: 0px;
width: 50px;
animation: mymove 1s;
background-color:transparent;
color: transparent;
}
myDiv {
display:flex;
}
#keyframes mymove {
50% {
transform: rotateY(180deg);
}
}
<div id="cards"></div>
Hi I am trying to display a loader section.
Which section will increase 0 to 100% during page load.
for that I tried below code.
Problem is that when I tried to page soft reload with browser cache that screen is not moving from bottom to top (with height 0% to 100%).
But in hard refresh after removing browser cache it's ok.
;(function(){
function id(v){return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
container = id("container"),
img = document.images,
c = 0;
tot = img.length;
var decrease = 100;
function imgLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
var percvh = ((100/tot*c) << 0) +"vh";
ovrl.style.height = percvh;
decrease = decrease - perc;
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
setTimeout(function(){
ovrl.style.height = '100vh';
ovrl.style.transform= "translate3d(0, -100%, 0)";
//ovrl.style.transition = "transform 2s ease-in-out";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);
}());
*{margin:0;}
body{
font: 200 16px/1 Helvetica, Arial, sans-serif;
}
img{width:32.2%;}
#overlay{
background: #ccc;
position: fixed;
z-index: 999;
bottom: 0;
width: 100%;
height: 0vh;
transition: transform 1.5s ease-in-out;
}
#progress{
height:1px;
background:#fff;
position:absolute;
width:0;
top:50%;
}
#progstat{
font-size:0.7em;
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
}
<body>
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<div id="container">
<img src="http://placehold.it/3000x3000/cf5">
<img src="http://placehold.it/3000x3000/f0f">
<img src="http://placehold.it/3000x3000/fb1">
<img src="http://placehold.it/3000x3000/ada">
<img src="http://placehold.it/3000x3000/045">
<img src="http://placehold.it/3000x3000/b00">
<img src="http://placehold.it/3000x3000/41b">
<img src="http://placehold.it/3000x3000/098">
<img src="http://placehold.it/3000x3000/987">
<img src="http://placehold.it/3000x3000/f25">
<img src="http://placehold.it/3000x3000/526">
<img src="http://placehold.it/3000x3000/826">
<img src="http://placehold.it/3000x3000/ad6">
<img src="http://placehold.it/3000x3000/74c">
<img src="http://placehold.it/3000x3000/b40">
<img src="http://placehold.it/3000x3000/cc7">
<img src="http://placehold.it/3000x3000/112">
<img src="http://placehold.it/3000x3000/113">
</div>
</body>
JSFIDDLE LINK
following to implement like this
https://fillinglife.co/
So this is my slideshow div:
<div class="header">
<img name="slide" class="slide">
</div>
the css for it:
.slide{
width: 80%;
height: auto;
filter: brightness(90%);
}
and the javascript:
var i = 0;
var images = [];
var time = 4000;
images[0] = '1.png';
images[1] = '2.png';
images[2] = '3.png';
function changeImg() {
document.slide.src = images[i];
if (i < images.length -1) {
i++;
}
else
{
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
Now i want it to crossfade, currently its just switching the images very abruptly, but i want it smooth.
Any help?
You need to add opacity set to 0 on your css class, and then create a new class with opacity set to 1, that way you'll trigger the function to switch opacity after a specific time period has passed
<style>
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.visible {
opacity: 1;
}
</style>
<div class="header">
<img id="img0" class="slide visible" src="1.png">
<img id="img1" class="slide" src="2.png">
<img id="img2" class="slide" src="3.png">
</div>
<script>
var actual = 0;
var total = 3;
function addClass(elem, name) {
elem.className = elem.className + " " + name;
}
function deleteClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, "");
}
function nextImg() {
var e;
e = document.getElementById("img" + actual);
deleteClass(e, "visible");
actual++;
if (actual > total - 1) actual = 0;
e = document.getElementById("img" + actual);
addClass(e, "visible");
}
var slider = setInterval(nextImg, 4000);
</script>
While I like Joe's answer, here is one that uses JavaScript without adding or removing classes:
I gave the <img> an id for ease of reference here:
<img id='slideShow' name="slide" class="slide">
JavaScript:
function fadeImg(elem, total, step, speed){
step=step||5;
speed=speed||50;
var iter=0;
var fadeOutTime=(100/step)*speed;
var time=total;
var n = 0;
var opacity;
elem.src=images[n];
var fadeInterval=setInterval(function(){
time=time-speed;
opacity=iter/100;
if(time>fadeOutTime&&opacity<1){
iter=iter+step;
} else if(time<=fadeOutTime&&time>0&&opacity>0){
iter=iter-step;
} else if(time<=0){
n<images.length-1?n++:n=0;
elem.src=images[n];
time=total;
}
elem.style.opacity=opacity;
elem.style.filter= 'alpha(opacity=' +opacity*100 + ')';
},speed);
}
window.onload = fadeImg(document.getElementById('slideShow'),time);
I borrowed the interval concept from here: https://stackoverflow.com/a/2207751/6661052
I'm trying to make this a slider for a site and I'm having trouble making this slider rotate its images. what I want to get is when I click next on the last image it would back to the first image and the same with the previous button. the code works if i make the adjustments i made into a comment. any help would be very helpful!thanks!!
< script type = "text/javascript" >
var Slider = function() {
this.initialize.apply(this, arguments)
}
Slider.prototype = {
initialize: function(slider) {
this.ul = slider.children[0]
this.li = this.ul.children
// make <ul> as large as all <li>’s
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
this.currentIndex = 0
},
goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return
// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'
this.currentIndex = index
},
goToPrev: function() {
this.goTo(this.currentIndex - 1)
},
goToNext: function() {
/* this is the code im trying on but it wont work
if (this.currentIndex = 0) {
this.goTo(this.currentIndex + 1)
};
else if (this.currentIndex = 1) {
this.goTo(this.currentIndex + 1)
};
else if (this.currentIndex = 2) {
this.goTo(this.currentIndex + 1)
};
else*/
this.goTo(this.currentIndex - 3)
}
}
var sliders = []
$('.slider').each(function() {
sliders.push(new Slider(this))
})
.slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider > ul {
position: relative;
left: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
list-style: none;
margin: 0;
padding: 0;
}
.slider > ul > li {
float: left;
width: 400px;
height: 300px;
}
<div class="slide">
<div class="slider">
<ul>
<li>
<img src="img1.jpg">
</li>
<li>
<img src="img2.jpg">
</li>
<li>
<img src="img3.jpg">
</li>
</ul>
</div>
<div class="navigation">
Prev
<a class="butnav" href="javascript:sliders[0].goTo(0)">1</a>
<a class="butnav" href="javascript:sliders[0].goTo(1)">2</a>
<a class="butnav" href="javascript:sliders[0].goTo(2)">3</a>
Next
</div>
</div>
I have made some modification in the code and it's working for me.
var Slider = function() {
this.initialize.apply(this, arguments);
};
Slider.prototype = {
initialize: function(slider) {
this.ul = slider.children[0];
this.li = this.ul.children;
// make <ul> as large as all <li>’s
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px';
this.currentIndex = 0;
},
goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return;
// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%';
this.currentIndex = index;
},
goToPrev: function() {
if(this.currentIndex === 0){
this.goTo(2);
}else{
this.goTo(this.currentIndex - 1);
}
},
goToNext: function() {
if(this.currentIndex === 2){
this.goTo(0);
}else{
this.goTo(this.currentIndex + 1);
}
}
};
var sliders = [];
$('.slider').each(function() {
sliders.push(new Slider(this));
});
.slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider > ul {
position: relative;
left: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
list-style: none;
margin: 0;
padding: 0;
}
.slider > ul > li {
float: left;
height: 300px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slide">
<div class="slider">
<ul>
<li>
<img src="https://pbs.twimg.com/profile_images/590405794153136128/fdGjhrrv.jpg">
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/3c/af/cf/3cafcf31f34af16b7f833f0bd844c856.jpg">
</li>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT-l-xbQ1bUZMCrbTvm_qbAwZOdJEWYBg3e23OrLmRl72LcWhsJfQ">
</li>
</ul>
</div>
<div class="navigation">
Prev
<a class="butnav" href="javascript:sliders[0].goTo(0)">1</a>
<a class="butnav" href="javascript:sliders[0].goTo(1)">2</a>
<a class="butnav" href="javascript:sliders[0].goTo(2)">3</a>
Next
</div>
</div>
I am trying to rotate the background image of a div with jquery. It works fine but the content within the div disappears when the image rotates. How can i prevent the content from disappering and make it such the it is always present:
Code:
jQuery(document).ready(function($) {
$(window).load(function() {
var i =0;
var images = ['http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png'];
var image = $('#slideit');
image.css('background-image', 'url(http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png)');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
})
});
Fiddle HERE
You can make it like this http://jsfiddle.net/frzssoyw/3/
<div id="slideit">
<div id="slideit-bg"></div>
<div id="slideit-content">
some content
</div>
</div>
You can use position: absolute; on images.
I edited your JSFiddle using position: absolute;.
HTML:
<div id="slideit" style="width:700px;height:391px;">
<div class="slideit-content">some content</div>
<img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>
CSS:
.img-rotate {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 391px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-rotate.active {
opacity: 1;
}
.slideit-content {
z-index: 10;
position: relative;
}
JS:
jQuery(function($) {
var i = 0,
image = $('#slideit'),
images = image.find(".img-rotate"),
images_count = images.length,
next_image;
setInterval(function(){
i = (i+1) % images_count;
next_image = images.eq(i);
images.filter(".active").removeClass("active");
next_image.addClass("active");
}, 5000);
});