This is a card game I am making. The codepen is at LINK
I am currently working on the battle functionality of it but this happened. There are supposed to be 4 cards. This is what I want it to look like. Whenever I call the setup function, strange things happen. Please check the codepen for what I want see.
Link for what I want it to look like
var turn = true;
var enemyCards = document.getElementById('enemy-cards');
var friendlyCards = document.getElementById('friendly-cards');
var friendlyHealth = document.getElementById('friendly-health-value');
var enemyHealth = document.getElementById('enemy-health-value');
var enemyCardArray = [[2, 3], [2, 4]];
var friendlyCardArray = [[3, 3], [3,2]];
function initialSetup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
}
function setup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML = "";
enemyCards.innerHTML+="<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
}
function battle() {
if (turn === true){
for (var i = 0; i<friendlyCardArray.length; i++) {
if (friendlyCardArray.length == enemyCardArray.length){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
}else{
}
}
}else if (turn === false){
}
}
initialSetup();
battle();
setup();
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
#enemy-cards{
background-color: #873a00;
width: 100%;
height: 270px;
}
#friendly-cards{
background-color: #873a00;
width: 100%;
height: 270px;
position: fixed;
bottom: 0;
}
.card {
width: 150px;
height: 250px;
background-color: #afafaf;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
float:left;
}
.damage {
text-align: left;
position: absolute;
bottom:0;
left: 20px;
}
.health {
text-align: right;
position: absolute;
bottom:0;
right: 20px;
}
#friendly-health{
float:left;
width: 50%;
background-color: lightgreen;
height: 200px;
}
#friendly-health-value{
position: fixed;
left: 25%;
vertical-align: middle;
color: white;
}
#enemy-health-value{
position: fixed;
left: 75%;
vertical-align: middle;
color: white;
}
#enemy-health{
float:left;
width: 50%;
background-color: #f73f27;
height: 200px;
}
<div id="game">
<div id="enemy-cards">
</div>
<div id="health">
<div id="friendly-health">
<h1 id="friendly-health-value">20</h1>
</div>
<div id="enemy-health">
<h1 id="enemy-health-value">20</h1>
</div>
</div>
<div id="friendly-cards">
</div>
</div>
Looked at your setup function. It appears the problem is that you are setting innerHTML="" inside the for loop. Probably, you want to set it at the beginning of the setup() function like below:
function setup() {
enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
for (var i = 0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
//enemyCards.innerHTML = "";
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
for (var i = 0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
//friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
}
Related
I have a simple function which change opacity of divs every x seconds.
When I click on "pause button", this one make a pause in this loop, and get the color of the current div. When I click a second time on this button, the loop restart to play after a setTimeout.
My problem is that when I multi click (fast) on button, there is a bug in the loop.
My condition doesn't work.
Is there a solution to stop effect of click during setTimeout with stopPropagation or e.preventDefault or something else?
var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');
var colorArray = []
for (let i = 0; i < myElements.length; i++) {
let currentColor = getComputedStyle(myElements[i]).backgroundColor;
colorArray[i] = currentColor;
}
function my_fonction() {
myElements[j].style.opacity = 1;
for (let k = 0; k < myElements.length; k++) {
if (k != j) {
myElements[k].style.opacity = 0;
}
}
j++;
if (j == myElements.length) {
j = 0
}
playForbidden = false;
}
function setIntervalAndExecuteFn(fn, t) {
fn();
return (setInterval(fn, t));
}
var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var play = true;
var playForbidden = false;
myButton.addEventListener('click', function() {
if (playForbidden == false) {
if (play == true) {
play = false;
clearInterval(myIntervalId);
if (j == 0) {
myIndice = myElements.length - 1;
} else {
myIndice = j - 1;
}
myButton.style.backgroundColor = colorArray[myIndice]
} else {
play = true;
myButton.style.backgroundColor = 'transparent';
setTimeout(function() {
myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
}, 500);
}
playForbidden == true;
} else {
return;
}
});
.div_parent {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.my_button {
width: 300px;
height: 100px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 20px;
color: black;
}
.div_child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
}
.div_child_one {
opacity: 0;
background-color: red;
}
.div_child_two {
opacity: 0;
background-color: green;
}
.div_child_three {
opacity: 0;
background-color: violet;
}
.div_child_four {
opacity: 0;
background-color: rgb(104, 104, 104);
}
<div class="div_parent">
<div class="div_child div_child_one"></div>
<div class="div_child div_child_two"></div>
<div class="div_child div_child_three"></div>
<div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>
The problem in your code is the setTimeout function. When you execute your setTimeout, what you are saying is "Start the interval in 0.5 seconds". But the problem is that this command is not stopped if you click on pause again really fast (within 0.5 seconds). What you can do is clearing the timeout at every click of the button. This way, you can cancel the command "Start the interval in 0.5 seconds".
You can see a working snippet of what I mean here below:
var j = 0;
var myElements = document.querySelectorAll('.div_child');
var myButton = document.querySelector('.my_button');
var colorArray = []
for(let i=0; i<myElements.length; i++){
let currentColor = getComputedStyle(myElements[i]).backgroundColor;
colorArray[i] = currentColor;
}
function my_fonction(){
myElements[j].style.opacity = 1;
for(let k = 0; k < myElements.length; k++){
if(k!=j){
myElements[k].style.opacity = 0;
}
}
j++;
if(j == myElements.length){ j = 0}
playForbidden = false;
}
function setIntervalAndExecuteFn(fn, t){
fn();
return(setInterval(fn, t));
}
var myIndice = j;
var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
var myTimeoutId;
var play = true;
var playForbidden = false;
myButton.addEventListener('click', function(){
clearTimeout(myTimeoutId);
if(playForbidden == false){
if(play == true){
play = false;
clearInterval(myIntervalId);
if(j == 0){
myIndice = myElements.length-1;
}else{
myIndice = j-1;
}
myButton.style.backgroundColor = colorArray[myIndice]
}else{
play = true;
myButton.style.backgroundColor = 'transparent';
myTimeoutId = setTimeout(function() {
myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
}, 500);
}
playForbidden == true;
}else{
return;
}
});
.div_parent{
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
.my_button{
width: 300px;
height: 100px;
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 20px;
color: black;
}
.div_child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
}
.div_child_one{
opacity: 0;
background-color: red;
}
.div_child_two{
opacity: 0;
background-color: green;
}
.div_child_three{
opacity: 0;
background-color: violet;
}
.div_child_four{
opacity: 0;
background-color: rgb(104, 104, 104);
}
<div class="div_parent">
<div class="div_child div_child_one"></div>
<div class="div_child div_child_two"></div>
<div class="div_child div_child_three"></div>
<div class="div_child div_child_four"></div>
</div>
<div class="my_button">PAUSE BUTTON</div>
function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp);
}
console.log(respb);
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
The result I get each container has the array in it. How can I split the array up so that box1 has only data1, box2 has only data2, and box3 has only data3 instead of box1 having data1,data2, and data3.
and please no jquery.
you already have the array, just add the index :
.innerHTML = resp[j]
^^^
function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
}
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
To achieve expected result, use index while assigning with document.getById for below line
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
working code for refernce:
function fillBoxes() {
var s = ['data1', 'data2', 'data3'];
var v = ['box1', 'box2', 'box3'];
var lengtha = s.length;
var lengthb = v.length;
if (lengtha > lengthb) {
console.log("not enough objects to contain data.");
} else {
var resp = [];
var respb = [];
for (var i = 0; i < s.length; i++) {
resp.push(s[i]);
}
for (var j = 0; j < v.length; j++) {
respb.push(document.getElementById(v[j]).innerHTML = resp[j]);
}
console.log(respb);
}
}
.testToggle {
background-color: green;
width: 100px;
height: 100px;
float: left;
display: none;
}
.pressme {
width: 200px;
height: 50px;
float: left;
background-color: gray;
}
.gen {
width: 200px;
height: 200px;
float: left;
border: thin #000000 solid;
}
<div onclick="fillBoxes();" id="pressme" class="pressme" title="yoooo">Click Me</div>
<div id="drop" class="testToggle">sdfgsdfg</div>
<div class="gen" id="box1"></div>
<div class="gen" id="box2"></div>
<div class="gen" id="box3"></div>
codepen- https://codepen.io/nagasai/pen/zYOPYzx
Not 100% sure what you're looking to do, except maybe add text to the dom. Try not to set innerHTML. This can be a source of vulnerability in some instances.
function fillBoxes(){
const ids = ['box1','box2','box3'];
const data = ['data1','data2','data3'];
if (ids.length !== data.length) {
console.log("not enough objects to contain data.");
} else {
for (let i = 0; i < ids.length; i++) {
let el = document.getElementById(ids[i]);
let content = document.createTextNode(data[i]);
el.appendChild(content);
}
}
}
I'm currently developing a web application in Samsung Smart TV IDE, I've been testing it on the IDE emulator and it works fine. But when I try it on a real TV (Model: UE32H4500AW), the performance slow down a lot, it takes a lot to process the input events when it needs to translate a huge amount of simple divs.
Here's the code where it slow down:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: 0;
color: white;
background: black;
}
body{
overflow: hidden;
}
#wrapper {
position: relative;
width: 70vw;
height: 70vw;
overflow: hidden;
}
#EPG-channel-wrapper {
vertical-align: top;
width: 20%;
box-sizing: border-box;
display: inline-block;
}
.EPG-channel {
height: 50px;
width: auto;
padding: 15px;
border: 2px solid white;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
}
.EPG-channel-title-wrapper {
display: inline-block;
vertical-align: top;
}
.EPG-channel-title {
vertical-align: top;
}
#EPG-program-wrapper {
vertical-align: top;
display: inline-block;
position: relative;
width: 75%;
left: 3%;
box-sizing: border-box;
overflow-x: hidden;
}
.EPG-channel-programs {
height: 84px;
box-sizing: border-box;
border: 2px solid yellow
}
.EPG-program {
border: 2px solid cyan;
height: 100%;
width: 30%;
box-sizing: border-box;
display: inline-block;
}
.EPG-program-context {
display: inline-block;
}
</style>
<script type="text/javascript">
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main = {};
Main.onLoad = function()
{
// Enable key event processing
document.onkeydown = Main.keyDown(event);
widgetAPI.sendReadyEvent();
Main.loadDivs();
};
Main.loadDivs = function() {
var addChannels = [];
var addPrograms = [];
var width = 0;
for(var i = 0; i< 140; i++){
addChannels[addChannels.length] = "<div class='EPG-channel'>";
addChannels[addChannels.length] = "<img alt='' src='' class='EPG-channel-img'>";
addChannels[addChannels.length] = "<div class='EPG-channel-title-wrapper'><div class='EPG-channel-title'>Test " + i +" </div></div></div>";
addPrograms[addPrograms.length] = "<div class='EPG-channel-programs'>";
for( var j = 0; j< 100; j++){
width = 200;
addPrograms[addPrograms.length] = "<div class='EPG-program' style='width:"+width+"px'>";
addPrograms[addPrograms.length] = "<div class='EPG-program-title'>Test program "+ i + " - " + j + " </div>";
addPrograms[addPrograms.length] = "<div class='EPG-program-duration'>00.00 - 00.00</div></div>";
};
addPrograms[addPrograms.length] = "</div>";
};
document.getElementById("EPG-channel-wrapper").innerHTML = addChannels.join('');
document.getElementById("EPG-program-wrapper").innerHTML = addPrograms.join('');
};
Main.translate = 0;
Main.keyDown = function(event)
{
var keyCode = event.keyCode;
switch(keyCode)
{
case tvKey.KEY_LEFT:
var elements = document.getElementsByClassName("EPG-program");
for (var i = 0; i < elements.length; i++){
elements[i].style.display = "";
}
break;
case tvKey.KEY_RIGHT:
var elements = document.getElementsByClassName("EPG-program");
for (var i = 0; i < elements.length; i++){
elements[i].style.display = "none";
}
break;
case tvKey.KEY_UP:
var translate = --Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
break;
case tvKey.KEY_DOWN:
var translate = ++Main.translate * document.getElementsByClassName("EPG-channel")[0].offsetHeight;
document.getElementById("EPG-channel-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
document.getElementById("EPG-program-wrapper").style["-webkit-transform"] = "translate(0, -"+translate+"px)";
break;
default:
break;
}
};
</script>
</head>
<body onkeydown="Main.keyDown(event)" onload="Main.onLoad();">
<div id="wrapper">
<div id="EPG-channel-wrapper"></div>
<div id="EPG-program-wrapper"></div>
</div>
</body>
</html>
When right key is pressed, it hide all the programs and the performance works fine.
Is there any memory leak I might be missing or other way to translate that amount of divs more efficiently?
Thanks in advance!
The following code looks daunting, but a lot of it is repetitive. Try clicking on the red buttons.
<body>
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
</body>
<style>
.carousel {
list-style-type: none;
position: relative;
}
.moveSlideLeft {
left: 0px;
}
.moveSlideLeft>img {
width: 10px;
height: 10px;
transform: rotate(180deg);
}
.moveSlide {
margin: none;
padding: none;
width: 20px;
height: 20px;
background-color: red;
border: none;
float: left;
position: absolute;
z-index: 1;
}
.carousel>.track {
margin: none;
padding: none;
left: 0px;
width: 99px;
height: 100px;
overflow: hidden;
position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
transform: translateX(-99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
transform: translateX(0px);
z-index: 2;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
transform: translateX(99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li>img {
float: left;
width: 99px;
height: 100px;
}
.moveSlideRight {
left: 80px;
}
.moveSlideRight>img {
width: 10px;
height: 10px;
}
</style>
<script>
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i=0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 1) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
else if (placeholder == 2) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
right.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i = 0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
else if (placeholder == 1) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 2) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
</script>
I don't know why only one image is showing up. I'm trying to make a sliding carousel. Every time a button is clicked, the data-shown attribute is changed. Based on the value of the data-shown attribute, a new slide should slide in. Where is my error?
You just need to add position: absolute to carousel>.track>li>img to list them in one line because you position them floating to left but in top of each other
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i=0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 1) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
else if (placeholder == 2) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
right.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i = 0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
else if (placeholder == 1) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 2) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
.carousel {
list-style-type: none;
position: relative;
}
.moveSlideLeft {
left: 0px;
}
.moveSlideLeft>img {
width: 10px;
height: 10px;
transform: rotate(180deg);
}
.moveSlide {
margin: none;
padding: none;
width: 20px;
height: 20px;
background-color: red;
border: none;
float: left;
position: absolute;
z-index: 1;
}
.carousel>.track {
margin: none;
padding: none;
left: 0px;
width: 99px;
height: 100px;
overflow: hidden;
position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
transform: translateX(-99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
transform: translateX(0px);
z-index: 2;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
transform: translateX(99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li>img {
float: left;
width: 99px;
height: 100px;
position: absolute;
}
.moveSlideRight {
left: 80px;
}
.moveSlideRight>img {
width: 10px;
height: 10px;
}
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
I have this simple jsfiddle example: https://jsfiddle.net/fLp74gnu/
As the example says, the onlclick function shows/hides the download-icon element. How to show on click and hide on hover out?
var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("main-cell");
for (var i = 0; i < parents.length; i++) {
parents[i].onclick = function () {
toggleChildren(this);
};
}
function toggleChildren(elem) {
for (var i = 0; i < divs.length; i++) {
if (divs[i] == elem) {
for (var ii = 1; ii <= 5; ii++) {
if (divs[i + ii].style.display == "none") {
divs[i + ii].style.display = "block";
} else {
divs[i + ii].style.display = "none";
}
}
}
}
}
.main-cell {
background: #bbb;
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;
}
.download-icon {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
border-radius: 7%;
display: none;
}
<div class="main-cell">
<div class="download-icon"></div>
</div>
It is very easy.
.main-cell {
background:transparent;/*set to transparent so the user can't see it but the element will still have height and width*/
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;/*the element is visible but when the user hovers over it it will take a color and reappear*/
}
Do you mean something like following:
jsfiddle
var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("main-cell");
for (var i=0; i<parents.length; i++) {
parents[i].onclick = function() { toggleChildren(this); console.log(this);};
parents[i].onmouseleave = function(){
this.removeChild(document.getElementById('DELETEME'));
};
}
function toggleChildren(elem) {
for (var i=0; i<divs.length;i++) {
if (divs[i] == elem) {
for (var ii=1; ii<=5; ii++) {
if (divs[i+ii].style.display == "none") {
divs[i+ii].style.display = "block";
} else {
divs[i+ii].style.display = "none";
}
}
}
}
}
.main-cell {
background: #bbb;
width: 200px;
height: 130px;
border-radius: 7%;
}
.main-cell:hover {
background: #999;
}
.download-icon {
background: rgba(0,0,0,.8);
width: 100%;
height: 100%;
border-radius: 7%;
display: none;
}
<div class="main-cell"><div ID="DELETEME" class="download-icon"></div></div>
Is that the behaviour ? ( may be you only want to remove the class ? )
Edit:
parents[i].onmouseleave = function(){
var el = this.getElementsByTagName('div');
el[0].classList.remove('download-icon');
};
parents[i].onmouseover = function(){
var el = this.getElementsByTagName('div');
el[0].classList.add('download-icon');
// el[0].style.display = "none"; if you want ed to appear in that way
};
In this way you are not removing the element but the class. ( and adding it again ).