JavaScript Tip of the Week for December 2, 1996: LiveConnect: The Adventure Continues | Source Code

JavaScript Tip of the Weekfor December 2, 1996: Source Code: LiveConnect: The Adventure Continues

Important: If you want to use any of these examples, you must first download the dynamicText class file and place it in a working directory. Just refer to the class file in the APPLET tag as you would any other file.

Example #1: Fading Effects
Example #2: In Your Face
Example #3: Standard Issue Ticker
dynamicText Source



The first example, fading and scrolling text: 
<HTML>
<HEAD>
<TITLE>Ticker</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* This code is Copyright (c) 1996 Nick Heinle, all rights reserved.
 * In order to receive the right to license this code for use on your
 * site the original code must be copied from the Web site 
 * webreference.com/javascript/. License is granted to user to reuse 
 * this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */
function makeTicker(text, wait) {
this.scrollMessage = text;
this.curScrollMessage = '';
this.posit = 0;
this.wait = wait;
}
function newTicker(text, wait) {
tickerMessages[num] = new makeTicker(text, wait);
num++;
}
function typeLetter() {
tickerMessages[cur].posit++;
tickerMessages[cur].curScrollMessage = tickerMessages[cur].scrollMessage.substring(0, tickerMessages[cur].posit);
document.dynamictextApp.setText(tickerMessages[cur].curScrollMessage);
}
function resetTicker() {
cur = 0;
    for (i = 0; i < tickerMessages.length; i++)
    tickerMessages[i].posit = 0;
}
function fadeColors() {
t = 255 - (tickerMessages[cur].posit * 6) + ""
if (t < 0) t = 0;
return t + "," + t + "," + t;
}
function advanceTicker() {
    if (tickerMessages[cur].posit > tickerMessages[cur].scrollMessage.length) {
    lst = cur;
        if (cur < tickerMessages.length - 1) {
        cur++;
        setTimeout('advanceTicker()', tickerMessages[lst].wait);
        }
        else setTimeout('parent.location = endpage;', tickerMessages[lst].wait);
    }
    else {
    typeLetter();
    document.dynamictextApp.setfColor(fadeColors());
    reDraw = setTimeout('advanceTicker()', 100);
    }
}
function start() {
    if (navigator.appName == "Microsoft Internet Explorer" ||
       ((navigator.appName == "Netscape" &&
       parseInt(navigator.appVersion) >= 3) &&
       navigator.javaEnabled())) {
    advanceTicker();
    }
    else {
    //stuff for non-java browser
    }
}
var cur = 0;
var lst = 0;
var num = 0;
var endpage = "index.html";
var tickerMessages = new Array();
newTicker ('This text is displayed through Java.', 1500); 
newTicker ('Here\'s the interesting part of it:', 1500);
newTicker ('the ticker is done in JavaScript.', 2000);
newTicker ('That\'s the beauty of LiveConnect.', 3000);
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF" onLoad = "start()">
<BR><BR><BR><BR><BR><BR>
<CENTER>
<APPLET NAME = "dynamictextApp" CODE = "dynamictext.class" WIDTH = 420 HEIGHT = 100>
<PARAM NAME = "x_pos" VALUE = "2">
<PARAM NAME = "y_pos" VALUE = "15"> 
<PARAM NAME = "center" VALUE = "1"> 
<PARAM NAME = "fontface" VALUE = "TimesRoman">
<PARAM NAME = "fontsize" VALUE = "24">
<PARAM NAME = "fontcolor" VALUE = "255,255,255"> 
<PARAM NAME = "bgcolor" VALUE = "255,255,255">
</APPLET>
</CENTER>
</BODY>
</HTML>
The second example, in your face text: 
<HTML>
<HEAD>
<TITLE>Ticker</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* This code is Copyright (c) 1996 Nick Heinle, all rights reserved.
 * In order to receive the right to license this code for use on your
 * site the original code must be copied from the Web site 
 * webreference.com/javascript/. License is granted to user to reuse 
 * this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */
function makeTicker(text, wait, dir) {
this.message = text;
this.wait = wait;
this.dir = dir;
    if (this.dir < 0) this.posit = max;
    else this.posit = min;
}
function newTicker(text, wait, dir) {
zoomMessages[num] = new makeTicker(text, wait, dir);
num++;
}
function fadeSize() {
hue = (zoomMessages[cur].posit * Math.round(255 / max));
if (hue > 255) hue = 255;
return hue + "," + hue + "," + hue;
}
function resetTicker() {
cur = 0;
    for (i = 0; i < zoomMessages.length; i++)
        if (zoomMessages[i].dir < 0) zoomMessages[i].posit = max;
        else zoomMessages[i].posit = min;
}
function displayTicker() {
document.dynamictextApp.setfSize(zoomMessages[cur].posit);
document.dynamictextApp.setfColor(fadeSize());
document.dynamictextApp.setText(zoomMessages[cur].message);
}
function advanceTicker() {
var chng = zoomMessages[cur].posit + zoomMessages[cur].dir;
    if (chng <= max && chng >= min ) {
    zoomMessages[cur].posit += zoomMessages[cur].dir * speed;
    displayTicker(); 
    reDraw = setTimeout('advanceTicker()', 50);
    }     
    else {
    lst = cur;
        if (cur < zoomMessages.length - 1) { 
        cur++;
        setTimeout('advanceTicker()', zoomMessages[lst].wait);
        }
        else setTimeout('parent.location = endpage;', zoomMessages[lst].wait);
    }
}
function start() {
    if (navigator.appName == "Microsoft Internet Explorer" ||
       ((navigator.appName == "Netscape" &&
       parseInt(navigator.appVersion) >= 3) &&
       navigator.javaEnabled())) {
    advanceTicker();
    }
    else {
    //stuff for non-java browser
    }
}
var cur = 0;
var lst = 0;
var num = 0;
var max = 28;
var min = 1;
var endpage = "index.html";
var speed = 2;
var zoomMessages = new Array();
newTicker ('The text is displayed through Java.', 1500, 1); 
newTicker ('But, you may want to note this:', 1500, 1);
newTicker ('all the work is done in JavaScript.', 2000, 1);
newTicker ('Java.', 10, 1);
newTicker ('and', 10, -1);
newTicker ('JavaScript', 1000, 1);
newTicker ('Can\'t we all just get along?', 4000, 1);
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#000000" onLoad = "start()">
<BR><BR><BR><BR><BR><BR>
<CENTER>
<APPLET NAME = "dynamictextApp" CODE = "dynamictext.class" WIDTH = 500 HEIGHT = 100>
<PARAM NAME = "x_pos" VALUE = "2">
<PARAM NAME = "y_pos" VALUE = "15"> 
<PARAM NAME = "center" VALUE = "1"> 
<PARAM NAME = "fontface" VALUE = "TimesRoman">
<PARAM NAME = "fontsize" VALUE = "24">
<PARAM NAME = "fontcolor" VALUE = "0,0,0"> 
<PARAM NAME = "bgcolor" VALUE = "0,0,0">
</APPLET>
</CENTER>
</BODY>
</HTML>
The third example, standard issue ticker: 
<HTML>
<HEAD>
<TITLE>Ticker</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function makeTicker(text, url, wait) {
this.scrollMessage = text;
this.curScrollMessage = '';
this.posit = 0;
this.wait = wait;
this.url = url;
}
function newTicker(text, url, wait) {
tickerMessages[num] = new makeTicker(text, url, wait);
num++;
}
function typeLetter() {
tickerMessages[cur].posit++;
tickerMessages[cur].curScrollMessage = tickerMessages[cur].scrollMessage.substring(0, tickerMessages[cur].posit);
document.dynamictextApp.setText(tickerMessages[cur].curScrollMessage + '_');
}
function resetTicker() {
cur = 0;
    for (i = 0; i < tickerMessages.length; i++)
    tickerMessages[i].posit = 0;
}
function fadeColors() {
t = (tickerMessages[cur].posit * 6) + ""
if (t > 255) t = 255;
return t + "," + t + "," + t;
}
function fontSize() {
}
function advanceTicker() {
    if (tickerMessages[cur].posit > tickerMessages[cur].scrollMessage.length) {
    lst = cur;
        if (cur < tickerMessages.length - 1) cur++;
        else resetTicker();
    setTimeout('advanceTicker()', tickerMessages[lst].wait);
    }
    else {
    typeLetter();
    reDraw = setTimeout('advanceTicker()', 100);
    }
}
function start() {
    if (navigator.appName == "Microsoft Internet Explorer" ||
       ((navigator.appName == "Netscape" &&
       parseInt(navigator.appVersion) >= 3) &&
       navigator.javaEnabled())) {
    advanceTicker();
    }
    else {
    //stuff for non Java enabled browsers
    }
}
var cur = 0;
var lst = 0;
var num = 0;
var tickerMessages = new Array();
newTicker ('This looks like your run of the mill Java ticker.', null, 1500); 
newTicker ('But it\'s not.', null, 1500);
newTicker ('The ticker is done in JavaScript.', null, 2000);
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF" onLoad = "start()">
<FONT SIZE = 4>
Good old fashioned static text:
</FONT>
<P>
<BLOCKQUOTE>
This looks like your run of the mill Java ticker. But it's not. The ticker is done in JavaScript.
</BLOCKQUOTE>
<P>
<FONT SIZE = 4>
Dynamic text
</FONT>
<P>
<BLOCKQUOTE>
<APPLET NAME = "dynamictextApp" CODE = "dynamictext.class" WIDTH = 420 HEIGHT = 100>
<PARAM NAME = "x_pos" VALUE = "2">
<PARAM NAME = "y_pos" VALUE = "15"> 
<PARAM NAME = "center" VALUE = "0"> 
<PARAM NAME = "fontface" VALUE = "TimesRoman">
<PARAM NAME = "fontsize" VALUE = "15">
<PARAM NAME = "fontcolor" VALUE = "0,0,0"> 
<PARAM NAME = "bgcolor" VALUE = "255,255,255">
You need a Java enabled browser to view this.
</APPLET>
</BLOCKQUOTE>
</BODY>
</HTML>
This is the source for the dynamicText Java app: 
/* dnynamicText by Nick Heinle *********************
 * This Code is Copyright (c) 1996 by Nick Heinle  * 
 * - setText(String text), changes the text        *
 * - setXY(int x, int y), changes the x,y coords   *
 * - setCenter(), toggles the centering of the text*
 * - setfColor(String col) change foreground color *
 * - setfSize(int size) change font size           *
 * Use with LiveConnect for best results :)        *
 * Last Mod on 12/6/96 using JDK 1.0.2             *
 ***************************************************/
import java.awt.*;
import java.lang.*;
import java.util.*;
public class dynamictext extends java.applet.Applet implements Runnable {
    Thread ticking;
    Color fcolor;
    Color bgcolor;
    Font curFont;
    FontMetrics curMets;
    String curText = "";
    String lstText = "";
    String fface;
    int fsize;
    int lst_fsize;
    int fcenter;
    int x_pos;
    int y_pos;
    int lst_x_pos;
    int lst_y_pos;
    /* start thread (in this case it's somewhat pointless) */
    public void start() {
        if (ticking == null) {
        ticking = new Thread(this);
        ticking.start();
        }
    }
    public void stop() {
        if (ticking != null) {
        ticking.stop();
        ticking = null;
        }
    }
    /* Grab parameters, font face, color, center, etc. */
    public void init() {
    x_pos = Integer.parseInt(getParameter("x_pos"));
    y_pos = Integer.parseInt(getParameter("y_pos"));
    lst_x_pos = x_pos;
    lst_y_pos = y_pos;
    fcenter = Integer.parseInt(getParameter("center"));
    fcolor = convColor(getParameter("fontcolor"), getForeground());
    bgcolor = convColor(getParameter("bgcolor"), getBackground());
    setBackground(bgcolor); 
   
    fface = getParameter("fontface");
    fsize = Integer.parseInt(getParameter("fontsize"));
    lst_fsize = fsize;
    curFont = new Font (fface, Font.PLAIN, fsize);
    }
    /* When loaded, display copyright and let things go JavaScript from there */
    public void run() {
    getAppletContext().showStatus("dynamicText 1.1, Copyright 1996 Nick Heinle");
        try { Thread.sleep(2000); }
        catch (InterruptedException e) {}
        getAppletContext().showStatus("");
    }
    /* Allow JavaScript to set the text to be displayed */
    public void setText(String text) {
    lstText = curText;
    curText = text;
    repaint();
    }
    /* Allow JavaScript to set the color of the font */
    public void setfColor(String col) {
    fcolor = convColor(col, getForeground());
    repaint();
    }
    /* Allow JavaScript to set the size of the font */
    public void setfSize(int size) {
    lst_fsize = fsize;
    fsize = size;
    curFont = new Font (fface, Font.PLAIN, fsize);
    repaint();
    }
    /* Allow JavaScript to set the exact X and Y coords of the text */
    public void setXY(int x, int y) {
    lst_x_pos = x_pos;
    lst_y_pos = y_pos;
    x_pos = x;
    x_pos = y;
    repaint();
    }
    /* Allow JavaScript to toggle centering on/off */
    public void setCenter() {
    if (fcenter == 1) fcenter = 0;
    else fcenter = 1;
    repaint();
    }
    /* Center text using fontMetrics, half screen height and width */
    public void textCenter() {
    lst_x_pos = x_pos;
    lst_y_pos = y_pos;
    curMets = getFontMetrics(curFont);
    x_pos = (size().width - curMets.stringWidth(curText)) / 2;
    y_pos = (size().height + curMets.getHeight()) / 2;
    }
    
    /* Convert string to color object */
    public Color convColor (String col, Color colDef) {
    int r, g, b;
    StringTokenizer st = new StringTokenizer(col, ",");
        try {
        r = Integer.valueOf(st.nextToken()).intValue();
        g = Integer.valueOf(st.nextToken()).intValue();
        b = Integer.valueOf(st.nextToken()).intValue();
        return new Color(r, g, b);
        }
    catch (Exception e) { return colDef; }
    }
    public void paint(Graphics g) {
        if (fcenter == 1) textCenter();
    /* Erase the old text using last coords, disabled temporarily
       untill I find a better fix.
    curFont = new Font (fface, Font.PLAIN, lst_fsize + 1);
    g.setFont(curFont);
    g.setColor(bgcolor);
    g.drawString(lstText, lst_x_pos, lst_y_pos);
     
    */
    /* Display the new text */
    curFont = new Font (fface, Font.PLAIN, fsize);
    g.setFont(curFont);
    g.setColor(fcolor);
    g.drawString(curText, x_pos, y_pos);
    }
    /*public void update(Graphics g) {
    paint(g);
    }*/
/*
    public boolean mouseDown(java.awt.Event evt, int x, int y) {
    }
*/
}