Friday, March 29, 2024

HTML Goodies: Script Tip: Week 49

 

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 pulled 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 flags. 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:

var top=”<HTML>” + “r”
+ “<TITLE>My Frame Page</TITLE>”
+ “r” +”<HEAD></HEAD>”

var nf=”<noframes>” + “r” + “You need a frames capable browser to view this page.”
+ “r” + “</noframes>” + “r” + “</HTML>”

var f=”</frameset>”
var bc=”bordercolor=blue>”
var MW=”marginwidth=0″
var MH=”marginheight=0″

You get to pick out what each of the variables represent 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:

<HTML>
<TITLE>My Frame Page</TITLE>
<HEAD></HEAD>

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 flag, “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:

function framesa()


{

document.Framer.Fillit.value=top

+ “r” + “<frameset cols=50%,* “

+ ” ” + bc + “r” + “<frame src=w.htm” +” ” + “name=One”

+ “r” + “scrolling=auto” + ” ” + MW + ” ” + MH + ” ” + “noresize=yes>”

+ “r” + “<frame src=x.htm” +” ” + “name=Two”

+ “r” + “scrolling=auto” + ” ” + MW + ” ” + MH + ” ” + “noresize=yes>”

+ “r” + f

+ “r” + nf

}


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 flag 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 flag (f) is placed. Line break. Then the noframes text (nf) is added.

Put it all together and this is the display you’ll get:

<HTML>

<TITLE>My Frame Page</TITLE>

<HEAD></HEAD>

<frameset cols=50%,* bordercolor=blue>

<frame src=w.htm name=One

scrolling=auto marginwidth=0 marginheight=0 noresize=yes>

<frame src=x.htm name=Two

scrolling=auto marginwidth=0 marginheight=0 noresize=yes>

</frameset>

<noframes>

You need a frames capable browser to view this page.

</noframes>

</HTML>


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 Week: Let Me See It!



     Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the JavaScript Goodies!



You can find many other uses for JavaScript on your Web pages here!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured