More little tips and tricks page 6 I frames,automatic form field clearing,scrolling credits page scrolls automatically on Load,

Today is . Page updated 08/27/08

More Tips & Tricks - Page 6 Little Tricks

I Frames or Inline Frames

Inline frames, also known as IFrames, are created with the <IFRAME> tag, which is supported by Explorer 3.2 and up, as well as Netscape 4.0 or better. Inline frames differ from the regular <Frame> tag, as we simply embed them right into an HTML page. No frameset or index pages are required. So you do not need a vast amount of HTML knowledge to add an <IFRAME> into your pages. This is only one line of code on the same page. All you do is link the <IFRAME> to another file (page) very similar to adding a link to another page.

Here is an example of how to use a simple IFRAME:

<IFRAME SRC="sample.html"></IFRAME></div>

Just replace the "sample.html" with your own file that you want it to link to within the IFRAME.

All we will do place the IFrame into a page, bearing the source of the actual file. This method is handy if you want to give people remote files to include on their site, sourcing a file to yours.

So in our example, an HTML page carrying our IFRAME might look like this:

<HTML>
<BODY>
Our page ... text, etc ... and now, here comes the IFRAME!

</BODY>
</HTML>

In this above example, the <IFRAME> code would look like the below.

If you have links within the <IFRAME> be sure they are targeted to a new browser window otherwise they will open within the IFRAME and be to coin a phrase "Be Rather Small" to say the least. The page we targeted within the <IFRAME> has links on it. They will all open in a new window except the last one. Try it and see why you must target a new browser window! If you don't know how to target a link in a new browser window, it is extremely easy to do. Just see the below example on howto.

Ss with every rule of "Thumb" as the above, there are always exceptions. Here is an the exception. If the content that is linked to from the IFRAME is not as wide as the parameters you have set forth within the IFRAME itself and is easy to read or seen by scrolling up and down and not from side to side, then it can open in the same window. Just leave off the target="_blank" attribute from the link.

If you notice in our example <IFRAME> code, we did not use all "CAPS" inside the code. This is your choice if you want to use caps or lowercase letters. It will not make any difference in the code.

When you add an <IFRAME> into your pages, you may run across a slight positioning problem with the text right after the closing </IFRAME> tag. Depending on how and where you have the frame positioned, you may get text along side the frame in certain instances. See the below example and how to rectify this little problem.

This text is positioned to the right side of the <IFRAME> and I want it underneath the frame!! HELP!!

To solve this little inconvenience so to speak, just see how the below IFRAME looks with the added attribute break <BR> tag.

<IFRAME SRC="samlpe.html"height="100" width="410" scrolling="auto"align="left"marginheight="0"></IFRAME></div></p>
<BR><BR><BR><BR><BR>

There is no certain amount of <BR> tags to use. Just play around with it until it is positioned where you want it to appear.

Note of Importance ~ In reference to the positioning of the text be be seen below the Iframe as opposed to alongside, this only happens when the align="left" or align="right" is configured. If you have the align="center", this will not happen. Also be sure to close the Iframe with a closing divide tag </div>

The IFRAME Tag does carry some specific attributes to help you control the display. Here is a quick, but limited reference:

ALIGN - Offset to other elements, much like the Image Tag.

BORDER - The default is 0 (pixels)

HEIGHT / WIDTH - (pixels or %)

HSPACE / VSPACE As with Images, this attribute specifies a pixel size for horizontal or vertical margins around the IFRAME (external margin)

MARGINHEIGHT / MARGINWIDTH - Internal margin in pixels

SCROLLING - If set to "AUTO," the browser determines whether scrollbars are necessary; otherwise, specify either "YES" or "NO"

Automatic Form Field Clearing

This little tip is not designed for a beginner or novice in HTML codes and java scripting. You should first have a good working knowledge of HTML, java scripts and forms to completely understand this tutorial.

When you click inside the text box, you will see that the text disappears. This is great for people who do not want to manually clear out a lot of data, or if you do not have room to put text descriptions beside the boxes, but still want to explain things to the user.

The above is what is called "Stand Alone". This means it is not yet incorporated within your form/s and all you can do with it is clear the preset "value" that is set into the code.

As it stands so far this is a two part scripting operation. One part gets pasted into the <HEAD> section of your document;

And the second part which is the form textarea box gets pasted into the <BODY> section of your document where your form is located.

As you can notice in the above functional email form, all the values have been inserted and when you click inside each box, they will vanish.

If your forms on your page are already pre-existent, all you need to do to make this function work within your forms is to paste the above part of the code into the <HEAD> section of your document and add the below into the form itself;

value="Enter URL" onFocus="doClear(this)"

The above words, "Enter URL" are just an example. The value or words inside the form element can be defined what ever you need them to be, not just "Enter URL".

If this part is already confusing to you, the below example should clarify it for you. It is a part of the above working form first without this function and then with this function added.

Without Automatic Form Field Clearing

Name:</B>
<input type="text" name="name" size="45" maxlength="100"><br />
<b>Type In Your E-mail:</B><br />
<input type="text" name="youremail" size="45" maxlength="100" /><br />
<b>Your Friend's Email:</B><br />
<input type="text" name="emailaddress" size="45" wrap="soft" /><br />
<b>Your Comments:</B>
<textarea name="yourmessage" cols="45" rows="6" wrap="soft"></textarea>

With Automatic Form Field Clearing

Name:</B>
<input type="text" name="name" value="Enter Your Name" onFocus="doClear(this)" size="45" maxlength="100"><br />
<b>Type In Your E-mail:</B><br />
<input type="text" name="youremail" value="Enter Your Email Address" onFocus="doClear(this)" size="45" maxlength="100" /><br />
<b>Your Friends E-mail:</B><br />
<input type="text" name="emailaddress" value="Enter Your Friend's Addresses Here" onFocus="doClear(this)" size="45" wrap="soft" /><br />
<b>Your Comments:</B>
<textarea name="yourmessage" value="" onFocus="doClear(this)" cols="45" rows="6" wrap="soft">Add Any And All Comments Here</textarea>

With this above example, we hope it is now perfectly clear on where to insert the second part of the code within your forms to activate this function. All we did here was to insert the below section of script into the form itself.

value="Enter URL" onFocus="doClear(this)"

To sum it all up, you paste the first part of the script into the <HEAD> section of your document and add the above line of script directly into your form itself as shown in our example.

On a final note as you can see in the "Comments" box the coding is slightly different. Reason being the textarea box needs text within the box itself as well as the script addition. This place you will notice that the value does not have a preset set of text but instead just the value="" and text within the textarea box itself. This is fine as long as the section of script is within the parameters of the comments box.

Scrolling Credits

Build a web page that scrolls down on it's own. This effect is mainly used for making a roll credits type page. Works with the latest versions of Internet Explorer, Netscape and MSNTV.

Place this first piece of coding between the <HEAD> and </HEAD> tags of your Html document.

Then place the onLoad="scrollit()" into your <BODY> line of code.

If you do not know how to add the onLoad event into your <BODY> tag, see the below example;

To see an example of this in action, follow the below link.
[ Scrolling Credits ]

Mini Tips for Webmasters

Highlight the Background of Text:

Yellow Background With Black Font

Code For Highlight Background of Text:

<span style="background-color:ffffcc;"><font color="#000000">Yellow Background With Black Font</font></span>

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
[ Disclaimer ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.