Have a nice Tip…
This script arrived from Tim Wolfskill. The script is quite functional. If you ever have trouble writing code for frames, like I do, then this is the script for you.
On top of its functionality, it offers some new JavaScript coding for us to look at. Plus, like last week, it is easily understandable (is that a word?) when you start to break it down.
I should tell you that I altered the script a bit. It used to have another button that popped up a secondary window with instructions. That was a lot of code that I could easily pull out… so I did.
Here it is:
See it in Action
Here’s the Code
(It’s big. Get it all.)
Normally when FORM commands are involved, I go after those first. Not this time. I want to start by talking about how the frame code is created.
If you were going to create a script like this, you might find yourself writing the same things again and again. Every frame code will require the HTML and TITLE tags. You’ll also write the NOFRAMES code again and again. Yes, you could write it again and again, but it would be a whole lot easier if you simply assigned a short variable name to the code, then you could call it all up with just a couple of letters.
That’s what the author did in the first block of code:
|
You get to pick out what each of the variables represents, so I’ll just hit a couple. With this, all you need to do is call for “top” and you’ll get the entire text string:
|
Won’t that make life a little easier? Now, you might notice the code “r” stuck in there. Look again and notice where it’s stuck. It’s put in as if it is text (double quotes around it). See what it does? It produces a line break when the text string is displayed. How’s that for a good trick? Just make sure the slash is a backslash. A forward slash will not make the line break.
So, now we have “top” for the header info, “nf” for the noframes text, “f” for the end frameset tag, “bc” for the body’s background color, “MW” for the marginwidth, and “MH” for the marginheight.
The First Frame Function
Moving down the script, let’s look at the first, and easiest, frame function. This is the function that will produce the text for two vertical frames:
|
It really looks cryptic, huh? Well, let’s break it down. When the function is called for, the first thing you’ll get is “top.” That’s the header information. Then a line break. Then the frameset tag and the background color “bc” is added. Line break. The first frame window’s source is next adding a NAME, a line break, the “scrolling=auto” text, the marginwidth (MW), marginheight (MH), and finally the “noresize=yes” text.
You’ll notice the author made a lot of blank spaces by using the code (” “). That’s his preference. I always add spaces by putting a space on the end of the text inside the double quotes. This is another method that will work just as well.
That format is followed again for the next frame window source. Line break. The end frameset tag (f) is placed. Line break. Then the noframes text (nf) is added.
Put it all together and this is the display you’ll get:
|
That format was followed six times until the author created the six FRAME code functions framesa(), framesb(), framemixa(), frames3v(), frames3h(), and framemixb(). Read them through. Go slow because they get confusing. I was impressed the first time I went through it. It’s a pretty nice bit of coding.
Next week we’ll start displaying the text we create.
Next Time: Let Me See It!
