Here's the project:
I've done it with iFrame except for the being able to choose part (see code below). So after hours of searching this site, I can't quite find an answer on how to choose a file and then send it to an iFrame.
Not set on iFrames, just what I thought of so far. I'm open to suggestions! (Also, note I'm using Bulma for CSS framework)
Thank you!
`enter code here`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>Illustrations of Masonry</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="js/fontawesome-all.min.js"></script>
</head>
<body>
<section class="hero is-link">
<div class="hero-body">
<p class="title">
Illustrations of Masonry
</p>
<p class="subtitle">
Compare Editions
</p>
</div>
</section>
<section> <div class="container">
<div class="columns is-center">
<div class="column">
<iframe src ="pdf/1772.pdf" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
<div class="column">
<iframe src ="pdf/1781.pdf" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>
</body>
</html>
UPDATE! Found a JS script that's close but I need help making it work across 2 iFrames. Sorry, huge noob here! ;-) Feels like I'm close!
<section> <div class="container">
<div class="columns is-center">
<div class="column">
<button id="btn1" >1772</button>
<button id="btn2" >1775</button>
<button id="btn3" >1781</button>
<iframe id="frame1" src="http://www.tlhinteractive.com/preston/pdf/1772.pdf" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
<div class="column">
<button id="btn4" >1772</button>
<button id="btn5" >1775</button>
<button id="btn6" >1781</button>
<iframe id="frame2" src="http://www.tlhinteractive.com/preston/pdf/1772.pdf" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>
<script>
var frame = document.getElementById("frame1");
var frame2 = document.getElementById("frame2")
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var btn6 = document.getElementById("btn6");
btn1.addEventListener("click",link1)
btn2.addEventListener("click",link2)
btn3.addEventListener("click",link3)
btn4.addEventListener("click",link1)
btn5.addEventListener("click",link2)
btn6.addEventListener("click",link3)
function link1(){
frame.src="http://www.tlhinteractive.com/preston/pdf/1772.pdf"
}
function link2(){
frame.src="http://www.tlhinteractive.com/preston/pdf/1775.pdf"
}
function link3(){
frame.src="http://www.tlhinteractive.com/preston/pdf/1781.pdf"
}
function link1(){
frame2.src="http://www.tlhinteractive.com/preston/pdf/1772.pdf"
}
function link2(){
frame2.src="http://www.tlhinteractive.com/preston/pdf/1775.pdf"
}
function link3(){
frame2.src="http://www.tlhinteractive.com/preston/pdf/1781.pdf"
}
</script>
I'm not 100% clear I know what you are looking for but try the code below and see if that does what you want. I did not use your pdfs so replace the .html pages with you pdf links. All I did was take the code that you have and name the function link1-link6 instead of having two link1's, two link2's and two link3's. OR what you can also do is add the code for frame2 in the link 1 function separated by a semi-colin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>Illustrations of Masonry</title>
<script defer src="js/fontawesome-all.min.js"></script>
</head>
<body>
<section>
<div class="container">
<div class="columns is-center">
<div class="column">
<button id="btn1" >1772</button>
<button id="btn2" >1775</button>
<button id="btn3" >1781</button>
<iframe id="frame1" src="0101001.html" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
<div class="column">
<button id="btn4" >1772a</button>
<button id="btn5" >1775b</button>
<button id="btn6" >1781c</button>
<iframe id="frame2" src="0101002.html" width="100%" height="1000">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>
</body>
</html>
UPDATE! Found a JS script that's close but I need help making it work across 2 iFrames. Sorry, huge noob here! ;-) Feels like I'm close!
<script>
var frame = document.getElementById("frame1");
var frame2 = document.getElementById("frame2")
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var btn6 = document.getElementById("btn6");
btn1.addEventListener("click",link1);
btn2.addEventListener("click",link2);
btn3.addEventListener("click",link3);
btn4.addEventListener("click",link4);
btn5.addEventListener("click",link5);
btn6.addEventListener("click",link6);
function link1(){
frame.src="0101001.html";
}
function link2(){
frame.src="0101002.html";
}
function link3(){
frame.src="0101003.html";
}
function link4(){
frame2.src="0101004.html";
}
function link5(){
frame2.src="0101005.html";
}
function link6(){
frame2.src="0101006.html";
}
</script>