I'm so tired...

I'm back with a bonus third post! When I last left off after writing my second post, I had a functional system for displaying content in the iframe, but it still had some issues. Now I've finally fixed all of them...I think. Here's what's new:

Keeping Content Displayed on Page Reload

One issue I had with my script was that if the user reloads the page while reading entry two, the page would load the default entry (that's number 1) instead. Plus, the select menu would still say entry two. That's confusing! And not the behavior I want!

Luckily, this one was a pretty simple fix: all I had to do was add an onload="switchBlog()" to my <body> tag, so that the correct entry is loaded when the page is refreshed! Now users can reload the page without getting booted back to the beginning of the journal.

Fitting the Page to the Iframe

This may be an unpopular opinion on Neocities, but I kind of hate scroll windows. They have their uses, but I absolutely, positively did not want my massive wall of text to be stuck inside a smaller window. It's supposed to be the focus of the page! It should fit into the page seamlessly, so nobody even realizes it's an iframe (unless they read this post...)

This turned out to be really, really hard to accomplish. Not because that the solution ended up being very complicated, but because I have no idea what I'm doing here. Most of my website is built through trial and error and googling. This problem took a lot of trial and error and googling. Shoutout to my friends who let me rant about HTML at them throughout the entire process.

I definitely don't need to get into every single thing I tried, because that would take forever, and honestly I ended up trying so many different tactics to no avail, that I don't think I can even remember them all. I spent a long time looking at event listeners and onmessage and readystatechange, but none of those ended up working at all. Maybe one day I'll understand them, but not today, I guess.

My original strategy for resizing around the iframe was to just try and resize the page whenever switchBlog() ran. Since the switchBlog function is what changed the iframe's content, and therefore its size, I thought this would work:

// the rest of my switchBlog() function from the previous entry remained unchanged ... testframe.src = file; // the container is this white part of the page, which I wanted to resize to completely fit the vertical height of the iframe's content document.getElementById("container").style.height = testframe.contentWindow.document.body.scrollHeight + 'px';

This only kind of worked: it would resize the container, but only if you clicked the button twice. As far as I can tell, this means the iframe doesn't load the new content before the function finishes executing. Thus, I began my quest to find a way to resize the container after the iframe finished switching its content.

The solution I finally landed on is actually really simple. I now have a new function in my script:

function resize(){ var testframe = document.getElementById("testframe"); var container = document.getElementById("container"); // we actually don't have to resize the container itself, just make sure the iframe is set to the full height of its content testframe.style.height = testframe.contentWindow.document.body.scrollHeight + 'px'; }

For some reason, even after doing this, the iframe had a tiny bit of scrolling. I don't totally understand why, but adding 50 to the testframe.style.height equation made the iframe scrolling go away entirely, meaning you can now safely scroll through the page without fearing you'll get stuck in the iframe because you can't access the page's scrollbar. Yikes.

Then, all I had to do was call this function in two places: an onload="resize()" within the iframe tag (to resize the frame whenever it loads new content), and an onresize="resize()" in the body tag, so that if the user resizes their browser window after the iframe has already loaded, the page will respond accordingly. Wait, did I just make a responsive feature by myself? Woah.

Now my page will resize just how I want it to. YIPPEE! ...as a side note, though, I think the fact that I had set my iframe to have position: absolute might have played a part in how difficult it was, since I ended up removing that style in order to get my resizing fully working. I have no idea how many of my problems were because of that, since I didn't change it until after doing all this. But at least I learned something, right?

What's next?

Even though I've fixed my biggest issues with this page, I still have a couple things left to do before I can really call it finished:

Add a button to switch the font! I like this pixel font for the aesthetic, but I think it's not the best for reading long essays.
Style the dropdown menu and button so they look nicer (right now they're just default HTML)
Add some navigation links! The sidebar I've been using for navigation on the rest of the site isn't a good fit here, since I want to devote the entire container to the journal entries, but I think I'll at least include links to the index, sitemap, and main journal page at the top. As a temporary measure, I've stuck a plain text link to the index back up there, so there's at least a way to navigate off of this page.
What happens when the user hits the bottom of the page? I'm not sure yet, but it shouldn't force them to scroll all the way back to the top just to leave the page or read another entry. Options I'm considering: click to go to the next/previous entry, another dropdown menu, a button to return to the top. Or maybe all 3?

For right now, though, I'm calling this page good enough as proof of concept for my journal. I'm really looking forward to posting more!!! Thanks for reading, and see you soon! :-]

Update 9/16/2024: I've completed all of the above! The styling isn't super fancy, but now I have a complete template for my future journaling >:]