iFrames coming around

My website/blog merger is now 95% complete. I ended up keeping (but rephrasing and restructuring) the various lists of work because I find those lists help me choose what to work on next. I got rid of the book covers and blurbs and decided to save those for when I have an actual published book to sell.

So, if you are not reading this through an aggregator like Google Reader but are in fact at my blog, you will see a black panel in the top right corner that has the following links:

Backstory
Details
Character
The Other
Networking


Previously and for the past decade and a half, I have called the page I list my writing the Inkwell. Given the length of time since I actually wrote with a pen and the lack of quill imagery that I used to season my sites with, this term seemed dated. It also reminded me of a time when I did not complete or publish my writing, so something new seemed warranted. I actually dropped the page all together because of the space on that black form. One extra page for Inkwell pushed the last link to the bottom margin. And since that black panel is an image and can't be resized without redoing the entire image, I left it off.

Then I finally figured out how to incorporate iframes I have been talking about previously. Rather than incorporating an Inkwell link, I would combine the Inkwell and FAQ pages into a single page, which is what you see now on the Details page.

Now simultaneously but unrelated to the above, I decided the Biography page was boring and it would be cute to call it Backstory. This created a theme. Having a recommendations page (even though I love to share my interests and make recommendations) seemed pretentious. Those things are aspects of my character, so boom there's that title. FAQ is just details and you need details for a story. I wisely scrapped the use of Foreshadowing because that just didn't make sense anywhere. And I kind of shoe-horned in The Other talking about other people's writing. Previously named Bookshelf might have been more appropriate, but it didn't fit the theme! I'll make that square peg fit in the round hole if I have to take a hammer to it!


But anyway, let's get back to the iframes. iframe stands for inline frame. You remember frames from the early '00s right? Top banner, side navigation, and content frames. They moved us out of tables and made sites look more orderly. The problem was, they didn't resize well and pages would look weird on different screens. With the advent of mobile devices, appearance means a lot more than it did before.

An iframe is a content window like before, but rather than being separate from the element it appears in, it is part of it. It is inline. I'm going to show you how I use iframes in my website and then explain how you can use them in yours. So for this demonstration, go to my Details page. Don't try to understand this reading in Google Reader.

On the Details page you'll see an awesome picture of a kid in Seattle looking at some of the smartest graffiti ever made. And beside it, you'll see five menu items. These items are text linked with HTML and separated by non-breaking spaces. Nothing tricky involved there. Then I add a couple blank paragraphs to bush content below the image, and then I add the following code (replacing [ with < and ] with >).

[iframe name="alice" src="http://josephlselby.webs.com/html/faq.html" width="100%" height="1500"]
[p]
Your browser does not support iframes.[/p]
[/iframe]


What this has done is create an inline frame that takes up 100% of the alloted content space (in this case everything to the left of the gutter) that is 1500 pixes down the page. I named this frame "alice" as in Alice through the Looking Glass. The name is relevant for later, so keep that in mind. The src dictates which of the five menu items opens when first arrive on the Details page. In this instance, it is the FAQ content.

Now here's the first catch. iframes require HTML files and Blogger doesn't have a place that allows you to store HTML files. So you'll need some kind of other online host that lets you keep HTML files that you can access using a URL. For my purposes, I am using my old Webs website that I have recently retired. Without applying a personalized domain name, webs offers free hosting, so it's a good place to upload HTML files to reference from Blogger.

If you're intimidated by HTML, I promise that I used the most rudimentary tags to make this content, something you can learn through a beginner's tutorial.

In the above iframe code, you'll notice the line "Your browser does not support iframes. We put that there for those old and busted browsers people continue to use despite the awesomeness that is available to them today. If your browser can't read iframes, it will instead say whatever text you list there. It may be more fitting to put "Update to a real browser, jerky" and link to Chrome or Rockmelt or something. But for the time being, we're being polite.

Okay, so the code above along with the faq.html file creates the page you see when you first show up on the Details page. How do we do the rest of the menu items?

For each menu item (Novels, Short Stories, Plays, D&D, and FAQ), we link them to their respective HTML files.

[a href="http://josephlselby.webs.com/html/novels.html" target="alice"]Novels[/a]

Now, if you've learned any HTML code, it's probably how to bold, italicize, and underline. But if you've learned anything past that, it's probably how to create links. You may even have learned how to make that link open in a new tab/window by adding target="_blank". Targeting is just what it sounds, stating where you want the link to open. Other options are top, self, etc. In this case, we're targeting alice, which is the name of my iframe. You're opening the listed HTML file within the iframe.

What's even cooler is that target continues to hold true as long as you're on the page with the inline frame. So you can add links in those HTML files that ALSO target alice, which I do on the D&D page.

That's it. That's how simple iframes are. All the content on the Details page appears in iframes. And when I have a book to sell, I can create its own HTML file that can also be linked in the iframe, making everything neat and orderly and awesome.

If you have any questions, feel free to list them in the comments, and I'll see if I can answer them for you.