I am working on a match color game. After the guesses are completed the initialize function is called, which resets the program. After the first set of guesses, when the initialize function is called again, code below the initialize function (two setTimeouts), that asks the user where a color is does not fire again. Thanks for the help.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body style="pointer-events: none">
<div class="question">
<div class="questionbox">
<p>Where is:</p>
</div>
</div>
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
<div class="score-container">
<div class="score">Score: <span id="score">0</span></div>
</div>
<div class="button">
<button type="button" id="btn">Restart</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
}
.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.question {
position: absolute;
height: 100vh;
width: 100%;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.questionbox {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
background-color: red;
height: 400px;
width: 600px;
color: white;
font-size: 33px;
}
.container-box {
width: 600px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 400px;
}
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
}
.hide {
background-color: grey !important;
}
.open {
border: 40px white;
cursor: default;
}
.button {
width: 100vw;
display: flex;
flex-direction: row;
justify-content: center;
}
#btn {
display: flex;
position: absolute;
bottom: 50px;
justify-content: center;
text-align: center;
}
.score-container {
display: flex;
position: absolute;
width: 100vw;
justify-content: center;
bottom: 100px;
}
.border {
border: 8px solid #66ff00 !important;
}
.border-red {
border: 8px solid #EE4B2B !important;
}
javascript
let colors = ["red", "yellow", "blue", "green", "orange", "purple"],
$fullbox = $('.container'),
$popup = $('.question'),
gamecolor = [],
$restart = $('#btn'),
clicks = 0,
guessColor = [],
score = 0,
guess;
window.onload = initialize();
// initialize board
function initialize () {
clicks = 0;
$('.colorbox').removeClass('border');
$('.colorbox').removeClass('border-red');
$('.colorbox').each(function () {
$('body').css("pointer-events", "none");
$('.colorbox').removeClass('hide');
$(this).css("border", "2px solid black");
let randColor = colors[Math.floor(Math.random() * colors.length)];
$(this).css("background-color", `${randColor}`);
setTimeout(hide, 3000);
})
}
function hide() {
$('.colorbox').each(function () {
$(this).addClass('hide');
$('body').css("pointer-events", "auto");
$('.colorbox').css("pointer-events", "auto");
})
}
//restart
$('#btn').on('click', () => {
initialize();
})
setTimeout(() => {
$popup.css('display', 'flex');
guessColor = colors[Math.floor(Math.random() * colors.length)];
$('.questionbox').find('p').after(`<span> ${guessColor}?</span>`);
}, 2500)
setTimeout(() => {
$popup.css('display', 'none');
$('body').css("pointer-events", "auto");
}, 6000)
$('.container').on('click', '.colorbox', function () {
console.log($(this));
$(this).css("pointer-events", "none");
clicks++;
guess = $(this)[0].style.backgroundColor;
console.log(guess);
$(this).removeClass('hide');
console.log(guessColor);
console.log(guess);
if (guess === guessColor) {
score;
score++;
$('#score').html(score);
$(this).addClass('border');
} else {
$(this).addClass('border-red');
// $(this).css("border", "4px solid red");
}
if (clicks >= colors.length) {
setTimeout(initialize, 800);
$('body').css("pointer-events", "none");
}
console.log($(this));
});
If you mean the timeouts aren't firing again, you need to put them within initialize()'s scope. Otherwise they are one-time only.
function initialize () {
clicks = 0;
$('.colorbox').removeClass('border');
$('.colorbox').removeClass('border-red');
$('.colorbox').each(function () {
$('body').css("pointer-events", "none");
$('.colorbox').removeClass('hide');
$(this).css("border", "2px solid black");
let randColor = colors[Math.floor(Math.random() * colors.length)];
$(this).css("background-color", `${randColor}`);
setTimeout(hide, 3000);
});
setTimeout(() => {
$popup.css('display', 'flex');
guessColor = colors[Math.floor(Math.random() * colors.length)];
$('.questionbox').find('p').after(`<span> ${guessColor}?</span>`);
}, 2500)
setTimeout(() => {
$popup.css('display', 'none');
$('body').css("pointer-events", "auto");
}, 6000)
}
Related
I want to show a clickable button over the mouse cursor, whenever the user hover's over an image.
Code I am using: codepen
const box = document.getElementById("box");
function movebox(e) {
box.style.left = event.clientX - 20 + 'px';
box.style.top = event.clientY - 20 + 'px';
box.style.display = 'block';
}
function removebox() {
box.style.display = 'none';
}
function click() {
console.log("clicked")
}
#maindiv {
border: 1px solid blue;
padding: 1px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
min-height: 100vh;
}
#maindiv img {
max-width: 400px;
max-height: 400px;
object-fit: scale-down;
border: 1px solid red;
}
#box {
position: absolute;
z-index: 100;
display: none;
}
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script><div id="maindiv">
<img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onmousemove="movebox(event)" onmouseout="removebox()" />
<button id="box" class="btn btn-primary" onclick="click()">click</button>
</div>
Problems:
Getting unwanted blinking effect on button.
I have tried using the pointer-events: none property on button, but it also disables the onclick events.
Your function can not be named "click" because when you call it you are calling the built in click method.
Updated your code to rely on CSS to show and hide the element. Added hove to the img and the button.
Fixed a bug where you did not account for scroll position.
const box = document.getElementById("box");
function movebox(e) {
box.style.left = window.scrollX + event.clientX - 20 + 'px';
box.style.top = window.scrollY + event.clientY - 20 + 'px';
}
function clickMe() {
console.log("clicked")
}
#maindiv {
border: 1px solid blue;
padding: 1px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
min-height: 100vh;
}
#maindiv img {
max-width: 400px;
max-height: 400px;
object-fit: scale-down;
border: 1px solid red;
}
#box {
position: absolute;
z-index: 100;
display: none;
transition: all .25s;
}
#maindiv img:hover + #box,
#box:hover
{
display: block;
}
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script><div id="maindiv">
<img src="https://images.unsplash.com/photo-1563884993747-a52423c68196?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" onmousemove="movebox(event)" />
<button id="box" class="btn btn-primary" onclick="clickMe()">click</button>
</div>
I created a 16 x 16 grid where I can etch a sketch on that grid. It's working well. However, the problem now is that, I can't seem to make the buttons to work. I want that if I click on the buttons, it's going to change the colors so I can sketch using other colors, instead, it can not read the eventListener.
--------- Below is my code :
let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');
const blue = document.getElementsByClassName('blue');
const eraser = document.getElementsByClassName('eraser');
const black = document.getElementsByClassName('black');
let reset = document.getElementById('reset');
function createGrid(number) {
makeRow(number);
makeColumn(number);
changeColours();
}
function makeRow(numberOfRow) {
for (let i = 0; i <numberOfRow; i++) {
let row = document.createElement('div');
container.appendChild(row);
row.classList.add('gridRow');
}
}
function makeColumn(numberOfColumn, selection) {
for ( let i = 0; i < rows.length; i++) {
for ( let j = 0; j < numberOfColumn; j++) {
let column = document.createElement('div');
if (selection == 'blue') {
column.addEventListener('mouseenter', function() {
column.classList.add('blue');
})
} else if (selection == 'eraser') {
column.addEventListener('mouseenter', function() {
column.classList.add('eraser');
})
} else if (selection == 'black') {
column.addEventListener('mouseenter', function() {
column.classList.add('black');
})
} else {
column.addEventListener('mouseenter', function() {
column.classList.add('colored');
})
}
// column.addEventListener('mouseleave', () => {
// column.classList.remove('colored');
// })
rows[j].appendChild(column);
column.classList.add('gridColumn');
}
}
}
blue.addEventListener('click', function() {
makeColumn(number, 'blue');
})
eraser.addEventListener('click', function() {
makeColumn(number, 'white');
})
black.addEventListener('click', function() {
makeColumn(number, 'black');
})
createGrid(16);
#importurl('https://fonts.googleapis.com/css2family=Asap:wght#400;600;700&display=swap');
body {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
background-color: beige;
font-family: Asap, sans-serif;
margin: 0;
padding: 0;
justify-content: center;
align-content: center;
align-items: center;
}
.header {
display: flex;
flex: 1;
justify-content: center;
}
#setGridSize {
display: inline-flex;
justify-content: center;
flex: 1;
gap: 12px;
}
#guide {
text-align: center;
margin: 1px;
font-family: Asap, sans-serif;
color: red;
font-size: 13px;;
}
.container {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
border: 1px solid black;
width: 550px;
height: 550px;
}
.gridColumn {
display: inline-flex;
border: 1px solid beige;
margin: -1px 0;
width: 30px;
height: 30px;
}
.colored{
background: red;
}
.buttons {
display: flex;
flex: 1;
gap: 20px;
margin: 10px;
}
.blue {
background: blue;
}
.eraser {
background: white;
}
.black {
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation and Events</title>
<script src="javascript.js" defer></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header"> Let's sketch ! </h1>
<div id="setGridSize">
<p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box">
<button id="submit" > Submit </button>
</div>
<p id="guide"> Enter a number between 2 to 99</p>
<div class="container"></div>
<div class="buttons">
<button class="blue"> Blue </button>
<button class="eraser" > Eraser </button>
<button class="black"> Black </button>
<button class="rainbow" > Rainbow </button>
<button class="reset" > Reset</button>
</div>
</body>
</html>
When you use
document.getElementsByClassName('blue')
the result is an Array-like object (HTMLCollection).
So just use
blue[0].addEventListener('click', function() {
makeColumn(number, 'blue');
})
I am building a simple Drag N drop application demo,draggable was supposed to be dragged over dropzone and could be left there.
it is here, https://jsfiddle.net/yuzhangoscar/em4ns5v7/2/
The problem I am having is:
I cannot attach callback functions dragoverHandler and dropHandler to element dropzoneOne via .addEventListener()
The code snippet would work if I had attached dragoverHandler and dropHandler as attributes directly to the HTML element dropzone, e.g. ondrop="dropHandler(event)"
Can anyone help?
const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');
function dragstartHandler(event) {
console.log('start');
event.dataTransfer.setData('text/plain', event.target.id);
event.currentTarget.style.backgroundColor = 'yellow';
}
function dragoverHandler(event) {
console.log('dragging over');
event.preventDefault();
}
function dropHandler(event) {
console.log('dropped');
const id = event.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
event.dataTransfer.clearData();
}
draggableOne.addEventListener('dragstart', dragstartHandler);
dropzoneOne.addEventListener('ondragover', dragoverHandler);
dropzoneOne.addEventListener('ondrop', dropHandler);
.example-parent {
border: 2px solid #DFA612;
color: black;
display: flex;
font-family: sans-serif;
font-weight: bold;
}
.example-origin {
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
.example-draggable {
background-color: #4AAE9B;
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
}
.example-dropzone {
background-color: #6DB65B;
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
<head>
<title>My Drag-and-Drop Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="example-parent">
<div class="example-origin">
<div id="draggable-1" class="example-draggable" draggable="true">
draggable
</div>
</div>
<div class="example-dropzone">
<div id="dropzone-1">
dropzone
</div>
</div>
</div>
<script src="app.js"></script>
</body>
It should be "drop" and "dragover", not "ondrop" / "ondragover". Also, your drop area is rather small.
const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');
function dragstartHandler(event) {
console.log('start');
event.dataTransfer.setData('text/plain', event.target.id);
event.currentTarget.style.backgroundColor = 'yellow';
}
function dragoverHandler(event) {
console.log('dragging over');
event.preventDefault();
}
function dropHandler(event) {
console.log('dropped');
const id = event.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
event.dataTransfer.clearData();
}
draggableOne.addEventListener('dragstart', dragstartHandler);
dropzoneOne.addEventListener('dragover', dragoverHandler);
dropzoneOne.addEventListener('drop', dropHandler);
.example-parent {
border: 2px solid #DFA612;
color: black;
display: flex;
font-family: sans-serif;
font-weight: bold;
}
.example-origin {
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
.example-draggable {
background-color: #4AAE9B;
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
}
.example-dropzone {
background-color: #6DB65B;
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}
#dropzone-1 {
min-height: 100px;
}
<head>
<title>My Drag-and-Drop Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="example-parent">
<div class="example-origin">
<div id="draggable-1" class="example-draggable" draggable="true">
draggable
</div>
</div>
<div class="example-dropzone">
<div id="dropzone-1">
dropzone
</div>
</div>
</div>
<script src="app.js"></script>
</body>
I'm making a Tic Tac Toe game where the user can choose if they play X or O. How do I change the onclick function to display X if they chose X, or O if they chose O?
My code right now doesn't work since it only displays X even if I selected O from the two buttons.
Note: The other boxes don't have a function yet. To see the problem I'm talking about, click the first box on the upper left.
#import url('https://fonts.googleapis.com/css2?family=Koulen&family=VT323&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Signika+Negative:wght#400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
text-align: center;
background-color: #1C2C54;
color: #D175B7;
font-family: 'Signika Negative', sans-serif;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
margin: auto;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
}
h1 {
font-family: 'VT323', monospace;
font-size: 3rem;
}
.text-container {
display: flex;
flex-direction: column;
width: 300px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #4BC3B5;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.button-container {
display: flex;
flex-direction: row;
gap: 10px;
}
button {
padding: 3px 20px;
background-color: #4BC3B5;
color: white;
border: 3px solid #34a396;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c8d82;
border: 3px solid #124640;
}
button:focus {
background-color: #2c8d82;
border: 3px solid #124640;
}
.score-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
justify-content: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
</head>
<body>
<main>
<div class="text-container">
<h1>Tic Tac Toe</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid1" onclick="clickBox1()"></div>
<div class="grid-item" id="grid2" onclick="clickBox2()" ></div>
<div class="grid-item" id="grid3" onclick="clickBox3()"></div>
<div class="grid-item" id="grid4" onclick="clickBox4()"></div>
<div class="grid-item" id="grid5" onclick="clickBox5()"></div>
<div class="grid-item" id="grid6" onclick="clickBox6()"></div>
<div class="grid-item" id="grid7" onclick="clickBox7()"></div>
<div class="grid-item" id="grid8" onclick="clickBox8()"></div>
<div class="grid-item" id="grid9" onclick="clickBox9()"></div>
</div>
<div class="button-container">
<button id="x-el" onclick="selectX()">X</button>
<button id="o-el" onclick="selectO()">O</button>
</div>
<div class="score-container">
<p id="playerscore">Player Score:</p>
<p id="compscore">Computer Score:</p>
</div>
</main>
<script>
// Grab the elements
let xBtn = document.getElementById('x-el')
let oBtn = document.getElementById('o-el')
let playerScoreDisplay = document.getElementById('playerscore')
let compScoreDisplay = document.getElementById('compscore')
let x = 'X'
let o = 'O'
// Grabbing individual boxes
let box1 = document.getElementById('grid1');
let box2 = document.getElementById('grid2');
let box3 = document.getElementById('grid3');
let box4 = document.getElementById('grid4');
let box5 = document.getElementById('grid5');
let box6 = document.getElementById('grid6');
let box7 = document.getElementById('grid7');
let box8 = document.getElementById('grid8');
let box9 = document.getElementById('grid9');
/*
let boxes = document.querySelectorAll("div.grid-item")
*/
// Selecting x or o
function selectX() {
alert('You selected X!');
}
function selectO() {
alert('You selected O!');
}
// Function for each box
function clickBox1() {
if (selectX) {
box1.innerHTML = x;
} else if (selectO) {
box1.innerHTML = o;
}
}
</script>
</body>
</html>
You would probably want to create a variable to save the user's choice and set it depending on whether or not they clicked on "x-el" or "o-el" like so below.
Also, loop through the boxes instead of creating a function for every single box.
// user's choice
let myChoice
// Selecting x or o
function selectX() {
alert('You selected X!');
myChoice='X'
}
function selectO() {
alert('You selected O!');
myChoice='O'
}
// Function for each box
function clickBox1() {
if (myChoice==='X') {
box1.innerHTML = x;
} else if (myChoice==='O') {
box1.innerHTML = o;
}
}
This html to display 3 pdf according to the button clicked works in Firefox and Chrome. It does not display the pdf's in Edge after the first time the second or third button is clicked. But it does display the pdf's when a button is clicked for the second time.
What would cause this? And if it is a bug in Edge, is there a workaround?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.row-container {
flex: 1 1 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background-color: red;
}
.first-row {
background-color: beige;
}
.second-row {
flex: 1 1 auto;
flex-direction: column;
display: flex;
border: 3px solid lightblue;
min-height: 0;
overflow: hidden;
}
.frame {
flex: 1 1 auto;
border: 0;
}
.active {
display: block;
}
.hidden {
display: none;
}
.selected {
color: white;
background-color: blue;
}
.not-selected {
color: black;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="row-container">
<div class="first-row">
<p>just some text here</p>
<nav>
<div id="nav-tab">
<button id="but1" class="button selected">Dummy</button>
<button id="but2" class="button not-selected">Lorem</button>
<button id="but3" class="button not-selected">Resume</button>
</div>
</nav>
</div>
<div class="second-row" id="nav-tabContent">
<iframe class="frame active" id="pdf-but1"
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
</iframe>
<iframe class="frame hidden" id="pdf-but2"
src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
</iframe>
<iframe class="frame hidden" id="pdf-but3"
src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
</iframe>
</div>
</div>
<script>
var buttons = document.getElementsByClassName("button");
var frames = document.getElementsByClassName("frame");
var i
function click() {
for (i = 0; i < buttons.length; i++) {
if (buttons[i].id != this.id) {
buttons[i].setAttribute("class", "button not-selected");
frames[i].setAttribute("class", "frame hidden");
}
}
this.setAttribute("class", "button selected");
document.getElementById("pdf-" + this.id).setAttribute("class", "frame active");
}
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", click)
}
</script>
</body>
</html>
I try to test the issue with the Microsoft Edge (Chromium) browser Version 88.0.705.74 and found that when we click the second or third button for the first time then it is taking time and the PDF file does not get appear.
I noticed that you are setting the display: none to the Iframe to hide it.
I think the Edge browser is not rendering the PDF for those hidden Iframes and when you set the display: block, it is causing this issue.
You can notice that if we scroll a little bit then PDF will get appear properly.
As an alternative solution for this issue, I suggest you can overlap the Iframes on each other and use the zIndex to bring the Iframe on the top using the button click.
Example:
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.row-container {
flex: 1 1 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background-color: red;
}
.first-row {
background-color: beige;
}
.second-row {
flex: 1 1 auto;
flex-direction: column;
display: flex;
border: 3px solid lightblue;
min-height: 0;
overflow: hidden;
}
.selected {
color: white;
background-color: blue;
}
.not-selected {
color: black;
background-color: lightblue;
}
.frame {
flex: 1 1 auto;
border: 0;
display:block;
width:100%;
height:92%;
}
.frm1{
position:absolute;
background-color: red;
z-index: 2;
}
.frm2{
position:absolute;
background-color: green;
z-index: 1;
}
.frm3{
position:absolute;
background-color: yellow;
z-index: 0;
}
</style>
<script>
function fun1() {
document.getElementById('pdf-but1').style.zIndex = 2;
document.getElementById('pdf-but2').style.zIndex = 0;
document.getElementById('pdf-but3').style.zIndex = 1;
document.getElementById('btn1').setAttribute("class", "button selected");
document.getElementById('btn2').setAttribute("class", "button not-selected");
document.getElementById('btn3').setAttribute("class", "button not-selected");
}
function fun2() {
document.getElementById('pdf-but1').style.zIndex = 1;
document.getElementById('pdf-but2').style.zIndex = 2;
document.getElementById('pdf-but3').style.zIndex = 0;
document.getElementById('btn1').setAttribute("class", "button not-selected");
document.getElementById('btn2').setAttribute("class", "button selected");
document.getElementById('btn3').setAttribute("class", "button not-selected");
}
function fun3() {
document.getElementById('pdf-but1').style.zIndex = 0;
document.getElementById('pdf-but2').style.zIndex = 1;
document.getElementById('pdf-but3').style.zIndex = 2;
document.getElementById('btn1').setAttribute("class", "button not-selected");
document.getElementById('btn2').setAttribute("class", "button not-selected");
document.getElementById('btn3').setAttribute("class", "button selected");
}
</script>
</head>
<body>
<div class="row-container">
<div class="first-row">
<p>just some text here</p>
<nav>
<div id="nav-tab">
<button id="btn1" onclick="fun1()" class="selected">Dummy</button>
<button id="btn2" onclick="fun2()" class="not-selected">Lorem</button>
<button id="btn3" onclick="fun3()" class="not-selected">Resume</button>
</div>
</nav>
</div>
<div class="second-row" id="nav-tabContent">
<iframe class="frm1 frame" id="pdf-but1"
src="https://freshmindsgroup.com/wp-content/uploads/2020/03/LoremIpsumH101-2016.pdf">
</iframe>
<iframe class="frm2 frame" id="pdf-but2"
src="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">
</iframe>
<iframe class="frm3 frame" id="pdf-but3"
src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf">
</iframe>
</div>
</div>
</body>
</html>
Output in the Edge browser:
Further, you can try to modify the code example as per your own requirements.
Thanks for your understanding.