Today is . Page created 11/30/05, updated 05/21/06
|
|
T
his script slides any text you want to the side. It also changes between colors. You can customize it all. If you put in <center> </center> tags to center the <div>, the script does something other than what you see above. Grab the below link and see the effect when set between <center> </center> tags.
[ Set Between <center> </center> Tags ]
W e have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape7.02, Netscape8.1 and AOL Explorer1.2. This script worked in in all platforms with the exception of Netscape7.02 where the effect will not be visible. It degrades well and you will not get any error messages.
D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document with minimal reconfigurations within the <HEAD> section plus a modification*(see further down page for explanation) you may need so the material below the effect does not move up and down to make room for the effect.
Head Section Reconfiguratons
//How fast the text will slide
var speed=100
//The Message
var msg="your Message Goes Here"
//The Text Size
var size="4"
//Don't Edit below this line - Except the colors.
O n the above reconfigurations, they are basically self-explanatory except for the below.
var speed=100 The higher you set it, the slower the effect will move.
Head Section Reconfiguratons For Colors
//You can Edit the colors
var color=new Array()
color[1]="blue"
color[2]="#ff0000"
color[3]="green"
O n the above as you can notice, you can either use words or HEX code for the colors. Remember if you you HEX code, precede the 6 characters with the #
I
f you would like a really (we feel) excellent small (485 kb) "Freeware" color chart that gives you Word, HEX and RGB color codes. "Visual Color Picker is a simple color selection program with instant RGB-HSV conversion. It contains predefined and custom color tables, HTML code converter as well as a text/background color preview. The program also allows you to save selected colors to a custom color collection......". This program was designed for Windows 98/ME/NT/2000/XP. Grab the below link to read more about it and install it if you want.
[ Visual Color Picker ]
* At the top of the page you observed the little asterick and were probably wondering where is the explanation about the modification. If you clicked on the link for
[ Set Between <center> </center> Tags ]
and saw all the material on the page move up and down to accommodate the effect. It was not too professional looking and quite annoying. Ok, a work around is quite simple to alleviate that jumping. Just enclose the snipplet of code that goes anywhere in the <BODY> section (you want it to appear) with a defined <table>. See below:
<center>
<table bgcolor="#?" border="0" height="55"
cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#?" align="center" colspan="3">
<!------ Start <BODY> Section Of Code ------>
<!--Put this were you want it to slide-->
<div id="M1">
</div>
<!------ End <BODY> Section Of Code ------>
</tr></td></table>
</center>
N
otice on the above the opening and closing <center> </center> tags, how we surrounded it with a defined table and the most important attribute you need to concern yourself with is the height="55". Depending on the length of the text to appear and move is how you would adjust the height of the table. Remember, the bigger the number, the more gap between the effect and the content below. It would not hurt to add a little to this for a cushion. Just play around with it until it does not make the material below the effect move. The last thing is the ?. Just replace the question mark with the color of your page so it will blend seamlessly and you will not be able to tell it is surrounded by a table. If you will grab the below link, this time you will see the effect surrounded in a table and there will be no movement of any material below the effect.
[ Surrounded By A Defined Table ]
T
he last thing we shall cover is inserting an image into the effect.Below is where and howto add an image if you are so inclined but before you do, grab the below link and see if you really want to make this reconfiguration. Also, notice if you add an image, in the task bar at the bottom of your browser window, the image will constantly show loading and Done over and over again.
[ with Image Added ]
T o add an image into this script there is a certain way you need to write the image code. This reconfiguration is done in the <HEAD> section of the code in the same place you add the text.
//How fast the text will slide
var speed=150
//The Message
var msg="Add Image Here Text Goes Here Or Add Image Here"
//The Text Size
var size="4"
//Don't Edit below this line - Except the colors.
N otice in the below that when we inserted the image tag(s), we made exclusive use of the apostrophe ( ' ) as opposed to the quotation marks ( " ). Reason being is quite simple. This script makes use of the quotation marks throughout and by adding more than the prescribed amount, it will not function nor will it be visible and you will wonder why. So the work around to make it work with images is to use the apostrophe ( ' ).
//How fast the text will slide
var speed=150
//The Message
var msg="<img src='Path To Image Here' border='0' width='?'height='?' alt='?' align='?'> Text Goes Here <img src='Path To Image Here' border='0' width='?' height='?' alt='?' align='?'>"
//The Text Size
var size="4"
//Don't Edit below this line - Except the colors.
I
n essence, what we are saying is to use the below image tag in order to add an image into the script. Also be sure to replace the ? with the attributes associated with the uploaded image. If you are a little unclear on all the attributes setforth within an image tag, grab the below link and images are completely explained.
[ All About Images ]
<img src='Path To Image Here' border='0' width='?' height='?' alt='?' align='?'>"
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 ]
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
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 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
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.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-