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>
Related
I am using this typewriter effect made with JavaScript, HTML and CSS (method seen below) but I am wanting to take it a step further. Is there a way I can change the font of each word that is typed? I've looked around for solutions but I honestly don't even know what to search for. Please let me know if this is possible.
var words = ['Design','Create','Dream', 'Inspire'],
currentStep = 0,
textEl = document.querySelector('.change-text'),
oldWord = '';
setTimeout(changeWord, 2000);
function changeWord() {
oldWord = textEl.innerHTML;
// check if there is a word atm or not
if (oldWord.length < 1) {
if (currentStep !== words.length -1) {
currentStep ++;
}else {
currentStep = 0;
}
addNextWord();
} else {
setTimeout(deleteWord, 1400);
}
};
function deleteWord() {
var WordLength = oldWord.length,
currentWord = textEl.innerHTML,
currentLength = currentWord.length;
// The word is deleted so, start adding in the new one
if (currentLength < 1) {
changeWord();
return;
}
// Remove a charachter
textEl.innerHTML = currentWord.substring(0, currentLength - 1);
setTimeout(deleteWord, 140);
}
function addNextWord() {
var currentWord = textEl.innerHTML,
currentLength = currentWord.length,
nextWord = words[currentStep],
nextWordLength = nextWord.length;
if (currentLength === nextWordLength) {
changeWord();
return;
}
// add a charachter
textEl.innerHTML = nextWord.substring(0, currentLength + 1);
setTimeout(addNextWord, 240);
}
#first-section{
z-index: 4;
background-image: linear-gradient(to top, #205ba8 0%, #537895 100%);
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.inspire{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 10%;
color: #fff;
font-size: 50px;
font-weight: 600;
font-family: sans-serif;
}
.change-text {
position: absolute;
bottom: 0;
left: 10%;
color: #fff;
line-height: 500px;
font-size: 70px;
font-weight: 900;
cursor: context-menu;
}
#keyframes blinking {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1; }
}
.change-text:after {
content: '_';
animation: blinking 1.2s infinite;
}
<section id="first-section">
<h1 class="inspire" data-aos="fade-right">
HERE TO:
</h1>
<div class="change-text" data-aos="fade-right">Design</div>
</section>
you can use array of objects for the words.
Add your custom fonts to each word.
And then change the font dynamically.
I have tweaked the timer to show it quick between.
var words = [
{
word: 'Design',
font: 'Cursive'
},
{
word: 'Create',
font: 'Serif'
},
{
word: 'Dream',
font: 'Sans-Serif'
},
{
word: 'Inspire',
font: `'Pangolin', cursive`
}
],
currentStep = 0,
textEl = document.querySelector('.change-text'),
oldWord = '';
setTimeout(changeWord, 2000);
function changeWord() {
oldWord = textEl.innerHTML;
// check if there is a word atm or not
if (oldWord.length < 1) {
if (currentStep !== words.length -1) {
currentStep ++;
}else {
currentStep = 0;
}
textEl.style.fontFamily = words[currentStep].font;
addNextWord();
} else {
setTimeout(deleteWord, 100);
}
};
function deleteWord() {
var WordLength = oldWord.length,
currentWord = textEl.innerHTML,
currentLength = currentWord.length;
// The word is deleted so, start adding in the new one
if (currentLength < 1) {
changeWord();
return;
}
// Remove a charachter
textEl.innerHTML = currentWord.substring(0, currentLength - 1);
setTimeout(deleteWord, 140);
}
function addNextWord() {
var currentWord = textEl.innerHTML,
currentLength = currentWord.length,
nextWord = words[currentStep].word,
nextWordLength = nextWord.length;
if (currentLength === nextWordLength) {
changeWord();
return;
}
// add a charachter
textEl.innerHTML = nextWord.substring(0, currentLength + 1);
setTimeout(addNextWord, 240);
}
#import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
#first-section{
z-index: 4;
background-image: linear-gradient(to top, #205ba8 0%, #537895 100%);
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.inspire{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 10%;
color: #fff;
font-size: 50px;
font-weight: 600;
font-family: sans-serif;
}
.change-text {
position: absolute;
bottom: 0;
left: 10%;
color: #fff;
line-height: 500px;
font-size: 70px;
font-weight: 900;
cursor: context-menu;
}
#keyframes blinking {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1; }
}
.change-text:after {
content: '_';
animation: blinking 1.2s infinite;
}
<section id="first-section">
<h1 class="inspire" data-aos="fade-right">
HERE TO:
</h1>
<div class="change-text" data-aos="fade-right"></div>
</section>
Follow my example i add a simple if, engines the counter of array word and finally change font.
var words = ['Design','Create','Dream', 'Inspire'],
currentStep = 0,
textEl = document.querySelector('.change-text'),
oldWord = '';
setTimeout(changeWord, 2000);
function changeWord() {
oldWord = textEl.innerHTML;
// check if there is a word atm or not
if (oldWord.length < 1) {
if (currentStep !== words.length -1) {
currentStep ++;
}else {
currentStep = 0;
}
if(currentStep == 0){
textEl.style.fontFamily = "Impact,Charcoal,sans-serif";
}else if(currentStep== 1){
textEl.style.fontFamily = "Times New Roman";
}else if(currentStep == 2){
textEl.style.fontFamily = "Palatino Linotype";
}else if(currentStep == 3){
textEl.style.fontFamily = "Georgia";
}
addNextWord();
} else {
setTimeout(deleteWord, 1400);
}
};
function deleteWord() {
var WordLength = oldWord.length,
currentWord = textEl.innerHTML,
currentLength = currentWord.length;
// The word is deleted so, start adding in the new one
if (currentLength < 1) {
changeWord();
return;
}
// Remove a charachter
textEl.innerHTML = currentWord.substring(0, currentLength - 1);
setTimeout(deleteWord, 140);
}
function addNextWord() {
var currentWord = textEl.innerHTML,
currentLength = currentWord.length,
nextWord = words[currentStep],
nextWordLength = nextWord.length;
if (currentLength === nextWordLength) {
changeWord();
return;
}
// add a charachter
textEl.innerHTML = nextWord.substring(0, currentLength + 1);
setTimeout(addNextWord, 240);
}
#first-section{
z-index: 4;
background-image: linear-gradient(to top, #205ba8 0%, #537895 100%);
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.inspire{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 10%;
color: #fff;
font-size: 50px;
font-weight: 600;
font-family: sans-serif;
}
.change-text {
position: absolute;
bottom: 0;
left: 10%;
color: #fff;
line-height: 500px;
font-size: 70px;
font-weight: 900;
cursor: context-menu;
}
#keyframes blinking {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1; }
}
.change-text:after {
content: '_';
animation: blinking 1.2s infinite;
}
<section id="first-section">
<h1 class="inspire" data-aos="fade-right">
HERE TO:
</h1>
<div class="change-text" data-aos="fade-right">Design</div>
</section>
You can add all the fonts that you wish to use to an array, then create a function that selects them randomly.
var fonts = ['verdana', 'arial', 'timesNewRoman'];
function changeFont() {
var font = fonts[Math.floor(Math.random() * fonts.length)];
textEl.style.fontFamily = font;
}
Then call this function right after you call addNextWord
function changeWord() {
oldWord = textEl.innerHTML;
// check if there is a word atm or not
if (oldWord.length < 1) {
if (currentStep !== words.length -1) {
currentStep ++;
}else {
currentStep = 0;
}
addNextWord();
changeFont(); // Call changeFont Here!!
} else {
setTimeout(deleteWord, 1400);
}
}
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);
}
}
}
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>
So I am working on creating a custom alert box. I've got most of the code the way I want it.
What I Want:
What I would like is to click the minus to fade the alert box so you can view the html behind it.
What is Wrong:
My issue is the min.onclick code does not click (clicking the minus sign does nothing).
See Below:
var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '−';
var s = true;
min.onclick = function() {
console.log('pressed!');
if(s) {
box.style.opacity = '.25';
s = false;
}
else{
box.style.opacity = '1';
s = true;
}
};
box.appendChild(min);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++) (function(i){
var btn = document.createElement('button');
btn.setAttribute('class','alert-button');
btn.setAttribute('id',images[i]+'btn');
btn.onclick = function () {
console.log('You clicked: ', images[i]);
};
box.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('id',images[i]+'img');
img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
img.setAttribute('class','alert-image');
btn.appendChild(img);
})(i);
.alert {
display: block;
position: fixed;
z-index: 1;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.alert-content {
background-color: #daac27;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.alert-min {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>
To be honest I have no idea why your script does not work. I did nothing but appending the close "button" after that loop. Now the click handler is working.
edit:
i also edited the other console.log due to it printed undefined
var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++) {
var btn = document.createElement('button');
btn.setAttribute('class','alert-button');
btn.setAttribute('id',images[i]+'btn');
let tmp = images[i]
btn.onclick = function () {
console.log('You clicked: ', tmp);
};
box.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('id',images[i]+'img');
img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
img.setAttribute('class','alert-image');
btn.appendChild(img);
}
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '−';
var s = true;
min.onclick = function() {
console.log('pressed!');
if(s) {
box.style.opacity = '.25';
s = false;
}
else{
box.style.opacity = '1';
s = true;
}
};
box.appendChild(min);
.alert {
display: block;
position: fixed;
z-index: 1;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.alert-content {
background-color: #daac27;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.alert-min {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>
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 ).