www.insideDHTML.com
Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/

 
Introduction
moveo FunctionIE4
fadeo FunctionIE4
bubblo FunctionIE4
typeo FunctionIE4
switcho FunctionIE4
scrollo FunctionIE3,IE4,NS3,NS4
isie4 FunctionIE4
profileo FunctionIE4
Anchor FunctionsIE4
Path FunctionsIE4

styleo FunctionsIE4

Download Library
 

typeo() Function

The typeo() function makes it easy to show and hide information on your web page.

To use this function, define an HTML element with the style property of VISIBILITY: HIDDEN and a unique ID. 

 <DIV ID=demo STYLE="visibility: hidden">
    12/1 -- <A HREF="/discussion/idhtml/discfor.htm">Inside Dynamic HTML Discussion Group</A><BR>
    12/2 -- Steve Gore's IE4 Function Library Released
 </DIV>

To later type the contents of the element, you call the typeo() function with the element to type and the delay in milliseconds between each character:

In non-IE4 browsers, the contents are displayed and not typed

This function can handle rich HTML that are included inside the element, so a link is can still be clicked on. The function parses every character in the element and places it in its own span tag with the VISIBILITY set to HIDDEN. Next, the contents are walked sequentially and setting each span tag's style VISIBILITY property to VISIBLE.

typeo() Function

function typeo(x, p) {

        if (x.i == null) {
                x.i = -1;
                x.chri = 0;
                x.txt = x.innerHTML;
                x.lng = x.txt.length;
                x.innerHTML = "";
                x.style.visibility = "visible";
                x.msg = "";
        }

        /* still making msg */
        if (x.i < x.lng) {
                for (x.i = 0; x.i < x.lng; x.i++) {
                        chr = x.txt.charAt(x.i)
        
                        if (chr == "<") {
                                aTag = "<";
                                while (chr != ">") {
                                        x.i++;
                                        chr = x.txt.charAt(x.i);
                                        aTag = aTag + chr;
                                }
                                aTag = aTag;
                                x.msg = x.msg + aTag;
                        }                            

                        if (chr != ">") {
                                x.msg = x.msg + "<span style='visibility: hidden' id=" + x.id + "_" + x.chri + ">" + chr + "</span>";
                                x.chri++;
                        } 
                }
        }

        /* made msg */
        if (x.i == x.lng) {
                if (x.cmpl == null) {
                        x.innerHTML = x.msg;                     
                        x.cmpl = x.chri;
                        x.chri = 0;
                }

                if (x.chri < x.cmpl) {
                        t = eval(x.id + "_" + x.chri);
                        t.style.visibility = "visible";
                        x.chri++;
                        ab1 = window.setTimeout("typeo(" + x.id + "," + p +")", p);
                }
        }

        if (x.chri == x.cmpl) {
                x.innerHTML = x.txt;
        }
}

Copyright © 1997-98 InsideDHTML.com, LLC.
All rights reserved.