T
his script has about as many uses as you want to think of. You can have it as a FAQ page, Famous Quotes Page, or anything you want to think of. It is totally customizable and you can add or subtract any number of subjects you want.
We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.
Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section and <BODY> section (wherever you want it to appear) of your document. All of your reconfigurations other than one are done in the <HEAD> section. There is one minimal reconfiguration that needs to be addressed within the <BODY> section.
<HEAD> Section Reconfigurations
//additional tips can be added here just follow the pattern
//remember to use single quotes in the tip text or else bad
//things will happen. Do it this way "text 'more text' text"
if (tipShow == 1) {
var _tip = "Your First Tip Goes Here!";
}
if (tipShow == 2) {
var _tip = "Your Second Tip Goes Here!";
}
if (tipShow == 3) {
var _tip = "Your Third Tip Goes Here!";
}
The below section of script is also in the <HEAD> section and must be configured to reflect the number of tips you have within the code.
}function tipMach(){
var totalTips = 8; //set total number of tips here
if ((document.tipMachine.shownext.value == "Y") &&
(document.tipMachine.showprev.value == "N")){
For all intensive purposes, the default <HEAD> section has (8) tips. If you want to add more, just follow the pattern to add more.
<BODY> Section Reconfigurations
<!-- This part of the script goes between your BODY tags. -->
<form NAME="tipMachine" METHOD="post">
<input type="hidden" name="shownext" value="N"><input type="hidden" name="showprev"
value="N"><div align="center"><center><p><textarea NAME="tipsHere" ROWS="8" COLS="50"
WRAP="virtual" onFocus="this.blur();">The Title Can Go Here!</textarea><br>
Define The Above
- ROWS="8" This denotes how high from top to bottom the textarea will be.
- COLS="50" This denotes how wide from side to side the textarea will be.
- The Title Can Go here! This is the message that will appear when the effect is first seen. It is like an opening statement describing what the effect has. As you noticed, ours is configured as
" Consigliere's Tips And Tricks Textarea Form "
For your Information: Be extremely careful when you add your text. The code is very sensitive to the positioning of the text and the use of the " within the code. DO NOT USE the quote sign ( " ). You will get an Error Expected ';'. Use the ' instead if you need to quote something within the configuration area. This is also explained in the script.
N
ow the last error message you may get will be the " Undertermined String Constant". This error is caused if you have too many spaces between your words ( This is evident by you seeing the -----------> in the box to separate the Question and the Answer ) or if the ending quote and the semi colon in each of the configurations "; are not on the same line as the end of the reconfiguration. This can happen when you paste your text in between the quotes.
Below you will see the Right and Wrong way if this does not make sense.
if (tipShow == 8) {
var _tip = " This is The Right Way";
}
if (tipShow == 8) {
var _tip = " This Is The Wrong Way
":}
It does not matter which number it is, they all have to conform this way. What is also good about this script is that when you change from one to another it does not reload the page.
Little Extra Not Included In The Script: The last this we shall cover is to make the <HEAD> section of the script into an external.js file and called from an external location. Reason you may want to do this is quite simple. This section of code can become quite large and bloated depending on what you enter. Also you may want to have this effect on more than one of your pages. Instead of editing each individual page, you just need to update the external.js file and it will be reflected in all the pages you have this effect. If you need a little refresher on howto, see below.
The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:
- Opens With:
<script LANGUAGE="JavaScript1.1">
<!--Cast invisibility spell here
<HEAD> Section of code goes here
- Closes With:
//Dispell invisibility here-->
</script>
- Remove the opening and closing JavaScript tags.
- Copy/cut and paste everything in-between into a notepad and save it as tipMaker.js*
- The newly created (Saved As) file will look something like this
- Upload the newly created tipMaker.js into your directory
- Paste the below snipplet of code into the <HEAD> section of your document to call tipMaker.js
<script type="text/javascript" src="tipMaker.js">
</script>
- If you have uploaded the tipMaker.js into a different directory, you will have to change the path of the above to reflect the location.
- If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]
* We named our external.js file tipMaker.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.
If you would like to see an example of this effect with the use of an external.js file in the <HEAD> section, grab the below link and you are there.
[ Tip Maker With External.JS File ]
W
e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link* and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here
[ Rate This Page ]
For your Information:
* Since the original script site no longer archives this effect, we now are archiving this script for your convenience.
Tip Maker Textarea Form 