ARTICLE AD BOX
I intended to make some sort of library website where I can track my reading and share them but I'm unsure what's the best option to go forward with.
Currently the layout uses two iframes:
one iframe shows the book shelves
the other iframe shows the selected book page / review
In one single page I have two iframes. When a book in the shelf iframe is clicked, I want the book page to open in the side iframe while the shelf remains visible.
so far it looks like this
Main library: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Library</title> <link href="css/library.css" rel="stylesheet" type="text/css" media="all"> <style> @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'); </style> </head> <body> <div class="body"> <nav> <a href="../shelf/home.html" target="main">Home</a> <a href="../shelf/novel.html" target="main">Novel</a> <a href="../shelf/comic.html" target="main"></a>Comic</a> </nav> <div class="main"> <iframe name="main" style="display:block; height: 800px; width: 100%; border: none; "> </iframe> </div> <div class="side"> <iframe name="side" style="display:block; height: 850px; width: 600px; border: none;"> </iframe> </div> </div> </body> Shelf: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Novel shelf</title> <link href="css/shelf.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <button class="collapsible">still reading</button> <div class="content"> <section> <div class="books-container"> <div class="book" style="background-image: url(../img/bookcover.png); background-size: contain"> <a href="../books/book1.html" target="side">Book 1</a></div> <div class="book">Book 2</div> <div class="book">Book 3</div> <div class="book">Book 4</div> </div> </section> </div> <button class="collapsible">finished reading</button> <div class="content"> <section> <div class="books-container"> <div class="book"> </div> <div class="book">Book 2</div> <div class="book">Book 3</div> <div class="book">Book 4</div> </div> </section> </div> <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } </script> </body>But right now the iframe can't access another iframe, What's the best approach here? I'm open to scrap this whole iframe mechanic in order to make the concept work. The goal is:
the shelf loads in main
clicking a book that is within a shelf should open the book page in the side
However I'm having difficulty making the shelf iframe interact with the side iframe reliably.
Is using iframes the correct approach here, or should I structure the site differently?
![I can't get my footer to stick to the bottom at all times [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)