Today is . Page created 12/29/06
 Typewriter Ticker 
|
The above example is set within an "I" frame or inline frame. [ Click here ] to see why we have it set up this way.
Typewriter displays any message character by character from left to right or center out, based upon text_alignment set out in CSS. HTML tags - included image tags - are allowed within message. Adjustables: speed,size,background.
We have tested the code in IE7.0, Firefox2.0.0.1, 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 three (3) part copy and paste code that goes in both the <HEAD> (2 parts) and <BODY> sections of your document with reconfigurations that can be made to all parts. It also makes use of an onload event handler inserted directly into the <BODY> tag.
Since this does have numerous parts to contend with, we will go through them one by one. The first section to cover is the CSS style sheet section that is located in the <HEAD> section of the document. This controls the link color, font face, font size etc.
<style type="text/css">
A { text-decoration:none;}
A:link {color: blue}
A:visited {color: blue}
A:hover {color: red;background-color:#66ffff;}
.leftaln {font-size:10px; text-align:left; font-family: "Arial", "Helvetica";color:navy;}
.centeraln {font-size:10px; text-align:center; font-family: "Arial", "Helvetica";color:navy;}
.lefthyp {font-weight:bold; font-size:12px; text-align:left; font-family: "Arial", "Helvetica";}
</style>
In regards to the above section of code. Everything that is color coded can be reconfigured to suit you and your site. It is for all intensive purposes just a style sheet (CSS) for the font and the links within the effect. Just play around with it until it works for you.
The next section(s) to be covered (which is still located in the <HEAD> section) are the parameters of the effect itself and the messages that it will contain. Since there are two parts within one section of code, we will take each section separately. First are the "Parameters" or size,color and position of the ticker effect itself.
|
<script language="JavaScript"> |
The first section of this code is basically self-explained. It is for the size of the form, the background color and speed in which the effect will operate. For the background we used #ffffe0 or lightyellow. This part is for the alignment of the ticker itself. This sets it to either left to right or from the center out. The default as seen is to go from left to right. To change it to go from the center out do it as reconfigured below: var expclass='class=centeraln'; |
The last section to be configured within the <HEAD> section is that of the message(s) links images etc. you want to appear within the form box. This part can get a little confusing if you allow it. As you notice in the below code, there are "No" spaces between messages. If you have spaces or line separations, the effect "Will Not Appear" and you will wonder why. If this is a little unclear, see the below examples that should clear it up for you.
Correct Way - Notice The Lack Of Spaces Or Line Breaks
//Message:
//Inside any message you MUST use \' in lieu of ';
var mesaj='<a class="lefthyp" target="_self" href="http://news-ticker.vbarsan.com/">Typewriter Scroller - <font color="red">Multiple Message Typewriter Ticker 5.0</font></a><br />Ticker has 2 portions of same width: typewriting & scrolling.<br />Typewriting goes at bottom, then same text scrolls up pushing any preceeding upper.<br /><br /><a class="lefthyp" target="_self" href="http://vertical-scroller.vbarsan.com/">Vertical Scroller - <font color="red">Multiple Message Vertical Scroller 7.0</font></a><br />Messages scroll up and pause along 2 different patterns.<br />Singles: pause at top or may automatically be centered. More: each pauses at top.<br /><br /><a class="lefthyp" target="_self" href="http://news-scroller.vbarsan.com/">Horizontal Scroller - <font color="red">Multiple Message Belt Conveyer 7.0</font></a><br />Messages scroll left & pause along 2 different patterns.<br />Singles: pause at left or centered based upon CSS. More: each pauses at left edge.<br /> <img src="https://www.angelfire.com/ny5/consigliere/images1/smile1.gif" border="0" width="15" height="15" alt="Happy Face"align="bottom"> Yes, you can add images also!';
//Algorithm:
Incorrect Way - Notice The Spaces And/Or Line Breaks
//Message:
//Inside any message you MUST use \' in lieu of ';
var mesaj='<a class="lefthyp" target="_self" href="http://news-ticker.vbarsan.com/">Typewriter Scroller - <font color="red">Multiple Message Typewriter Ticker 5.0</font></a><br />
Ticker has 2 portions of same width: typewriting & scrolling.<br />
Typewriting goes at bottom, then same text scrolls up pushing any preceeding upper.<br /><br />
<a class="lefthyp" target="_self" href="http://vertical-scroller.vbarsan.com/">Vertical Scroller - <font color="red">Multiple Message Vertical Scroller 7.0</font></a><br />
Messages scroll up and pause along 2 different patterns.<br />
Singles: pause at top or may automatically be centered. More: each pauses at top.<br /><br />
<a class="lefthyp" target="_self" href="http://news-scroller.vbarsan.com/">Horizontal Scroller - <font color="red">Multiple Message Belt Conveyer 7.0</font></a><br />
Messages scroll left & pause along 2 different patterns.<br />
Singles: pause at left or centered based upon CSS. More: each pauses at left edge.<br />
<img src="https://www.angelfire.com/ny5/consigliere/images1/smile1.gif" border="0" width="15" height="15" alt="Happy Face"align="bottom"> Yes, you can add images also!';
//Algorithm:
Grab the below link to view an example of the effect with improper code spacing.
[ Improper Code Spacing ]
The next part is the placement of the onload event handler directly into the <BODY> tag. If you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:
Default <BODY> Tag ~ No onload event handler
<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
Reconfigured <BODY> Tag ~ onload Event Handler Inserted
<body onload="startexp();" bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
O nce you have completed and reconfigured the above steps for the <HEAD> section, all that is left is to paste the <BODY> section of code where you want the effect to appear.
If you notice in our above example, we have it sitting inside an "I" Frame. Reason being is quite simple. The CSS Style Sheet we covered earlier in our tutorial causes every link on the page to have the mouseover effect and not just the ones within the effect itself. So..... the "Workaround" is to place it in an "I" frame (and be sure to have links open in a new window). If you do not understand or need a little refresher on "I" Frames, grab the below link and you are there.
[ I Frames Explained ]
|
|
For all intensive purposes, all we did to place the effect within an "I" frame was to build a new document (page) with only the effect on it. Then we added the URL from the new page into the code for an "I" frame and pasted it where we wanted it to appear on the original page.
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 code contains errors (or more correctly added material not pertaining to the code), until they rectify the problem, you can get a good copy of the code below.
[ Get Good Code Here ]