Menus, part 2


What I really use the Firefox menus for is reading online comics. I’ve written before about my VBScripts for grabbing the image URLs for the GoComics strips that I like reading every day. I have a folder on my desktop that contains a batch file that I run after GoComics rolls over their comics for the next day at 10 minutes after midnight CST. The file runs my VBScript, which gets the links for each of the GIF or jpg files for those strips, and then builds up an HTML page. Once that’s done, I go to my Firefox root menu screen, click on the Comics link, and then I’d click on the link “GoComics shortcut”, which would open the page created by the VBScript.

This system was fine when I only had 20 or so strips that I liked, but now I’m up to 40, and it doesn’t work at all with the strips that are hosted on the Seattle newspaper site (such as Funky Winkerbean and Bizarro), since that site stopped allowing hot linking of their comics. In the case of GoComics, I just made a second script and a second generated HTML file, but this means that I have to manually open both generated HTML pages one at a time if I want to read all of the GoComics comics at one sitting. And, I have to open every single Seattle comic one at a time every day. It’s not a particularly crippling problem, but I’m a programmer, and I’ve had this itch at the back of my mind to address this situation at some point.

I finally got around to doing something about this. Initially, I was hoping there’d be something in HTML that would allow me to open multiple pages with one link, but it doesn’t look like this is part of the HTML standard, yet. So I started rooting around on the javascript tutorial sites. And, it’s surprisingly easy to open new pages in .js. So much so that I rewrote all of my pages to adopt a new format. The links are all image buttons, and either open a sub-menu page, or go directly to the outside page I want.


(New root menu.)

As I made my changes, I figured that I’d try my hand at cascading style sheets (CSS) as well, which is what gave me my above 2-column layout. The results have been much more mixed, though…

Just about every tutorial site I visited starts out the same way – “HTML, javscript and CSS are the three prongs that every web developer needs to be familiar with.” Modern developer, maybe. I started HTML programming in the 90’s, when the internet was just starting to catch on. There’s not that much to HTML, and since the obsoleted tags still work in backward-compatible browsers, I haven’t needed to “get with the times”. Javascript isn’t necessary in simple pages, and I’ve never liked CSS.

Actually, I’ve always viewed CSS as an unnecessary complication that doesn’t work all that well. Yes, I get the idea that having a master CSS file in one location that lets you update 200 .html pages in one fell swoop is a nice thing, but this works best if all the pages follow similar structures, or if you work within some development environment like Dreamweaver. For what I do, with only a few pages that are all different, CSS just gets in the way.

But… since I was changing everything anyway, I might as well at least try to see if CSS would let me do something more cool than I was planning on.

First off, having a “navigation” bar and a “main body block” is nice. I can more easily add a “back” button to the sub-menus. That part’s ok. So, I made my “mystyles.css” file, put it in the html directory, and linked to it from the other pages.

The next step was to turn the text links into image buttons. According to several of the tutorials, putting “img src” tags inside the button definition is a “bad thing” because of unresolved security issues. Because all the files, image and html, are on my PC, and no one else uses it, I’m not worried about this. Rather, I don’t like the work-around, which is to make separate calls to 3 different functions, for hover, mouse out and onclick, with different images for each button state. That would put several hundred little thumbnail images in the pics directory, and additional stress on my hard drive read head. Naw, I’ll keep things straightforward.

<button onclick=”openSingle(‘http://www.yahoo.com/&#8217;)” type=”button”>
<img src=”pics/yahoo_com.gif” width=”100″>
</button>

I put the javascript code itself at the bottom of the page, just before the end of the body block:

<script>
function openSingle(fn) {
var myWindow = window.open(fn, “_self”);
}
</script>

I could have just wrapped an “a href” statement around the “img src” statement, and that would have been fine, except that I want to be able to open multiple links with one mouse click. Having the button calling my function works for this, and it gives me a “hover over” effect because the button border changes color. If I want to open multiple tabs, I can make a second function and stick all of my links in that.

<script>
function openMany() {
var myWindow = window.open(“http://www.yahoo.com/&#8221;, “_self”);
myWindow = window.open(“http://www.yahoo.co.jp/&#8221;, “_target”);
myWindow = window.open(“http://www.google.com/&#8221;, “_target”);
}
</script>

This works really well for opening all of the webcomics pages I want to read all at one time.

What’s still missing, though, is some kind of reminder for what a particular image represents, should I forget along the way. Apparently, this was a problem for other newbie javascript programmers, because several people asked about this on the forums, and most of the replies were “I dunno”. I did track down one solution that was exactly what I wanted – span. Span pops up a tool tip-kind of text message when the mouse stays in one place over the hot spot for 1 second or so.

<span title=”English Yahoo”>
<button onclick=”openSingle(‘http://www.yahoo.com/&#8217;)” type=”button”>
<img src=”pics/yahoo_com.gif” width=”100″>
</button>
</span>

This gives me my functionality. The next step is look and feel.

I recently read a paper from some computer guru that made a big deal about “separating presentation from content”. And I saw similar comments in the CSS forums. What this means is that the code for defining how a page looks (the presentation) should be separate from the code controlling what the page does (the content, or the domain). The reason is that you can then easily port your page between browsers, or platforms (Mac, PC, tablets, smartphones). And this is where having a dedicated .css file comes in. By specifying styles for each part of your HTML page, and just calling the style by its ID, you don’t need style information (presentation) as part of your content (presentation code then goes in the .css file).

It’s a noble conceit, but I couldn’t make it work. If you look at my above screen cap, I have two columns, each of which is one division (<div>). To specify where each of the buttons is going to go, I need to make additional div’s, one for each button. The only positional choices are “absolute” and “relative”. Using multiple embedded “absolute divs” kills “a href” links because the location of the link, and where the browser THINKS the link is, don’t line up anymore. And, using “relative” forces the buttons onto separate lines. In other words, I couldn’t get the buttons to work if I used <div> instead of tables. Now, I know that CSS programmers hate tables for anything other than displaying tabular data, and that tables are presentation code that’s mixed in with content. I don’t care. For what I want – image-based menu buttons in a nice layout on my screen – tables work fine and CSS doesn’t.

On the other hand, if someone can tell me how to do this better, I am willing to listen.

Advertisements
Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: