Figure 2   Using DHTML with Version 4.0

<HEAD>
<SCRIPT>
function expandCollapse ()
{
    oSource = event.srcElement;
    if (oSource.className != "COLLAPSING")
        return;

    oChild = document.all(oSource.getAttribute('CHILD', false));
    if (oChild.style.display=='none')
    {  
        oChild.style.display='';
        event.srcElement.style.listStyleImage=               
        'url(/workshop/graphics/blueminus.gif)'
    }
    else
    {
        oChild.style.display='none';
        event.srcElement.style.listStyleImage=
        'url(/workshop/graphics/blueplus.gif)'
    }
}

function doMouseOver()
{
    oSource = event.srcElement;
    if ((oSource.className != "COLLAPSING") && (oSource.tagName != "A"))
        return;

    oSource.style.cursor = "hand";
    oSource.style.color = "red";
}

function doMouseOut()
{
    oSource = event.srcElement;
    if ((oSource.className != "COLLAPSING") && (oSource.tagName != "A"))
        return;

    oSource.style.cursor = "";
    oSource.style.color = "black"; 
}
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF"
        onmouseover="doMouseOver()"
        onmouseout ="doMouseOut()"
        onclick    ="expandCollapse()">

<IMG SRC="" WIDTH=199 HEIGHT=59 BORDER=0>
<FONT SIZE=1 FACE="Verdana,Arial,Helvetica">

<UL>
    <LI><DIV CHILD=Topics1
        CLASS="COLLAPSING">HTML Authoring</DIV>
        <UL ID=Topics1>
        <LI><A HREF="">Internet Explorer 4.0 authoring tips</A>
        <LI><A HREF="">Four special effects with IE 4.0</A>
        :
        </UL>

    <LI><DIV CHILD=Topics2
    CLASS="COLLAPSING">Dynamic HTML (DHTML)</DIV>
    <UL ID=Topics2>
    <LI><A HREF="">Overview</A>
    <LI><A HREF="">Technology comparison</A>
    :
    </UL>
</UL>

</FONT>
</BODY> 

Figure 3   Using Behaviors with Version 5.0

<HEAD>
<STYLE>
    .COLLAPSING {behavior:url(ul.sct)} 
    A           {behavior:url(hilite.sct)}
</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<IMG SRC="" WIDTH=199 HEIGHT=59 BORDER=0>
<FONT SIZE=1 FACE="Verdana,Arial,Helvetica">

<UL>
    <LI><DIV CLASS="COLLAPSING" CHILD=Topics1>HTML Authoring</DIV>
    <UL ID=Topics1>
        <LI><A HREF="">Internet Explorer 4.0 authoring tips</A>
        <LI><A HREF="">Four special effects with IE 4.0</A> 
        :
    </UL>
    <LI><DIV CLASS="COLLAPSING" CHILD=Topics2>Dynamic HTML (DHTML)</DIV>
    <UL ID=Topics2>
        <LI><A HREF="">Overview</A>
        <LI><A HREF="">Technology comparison</A> 
    :
    </UL>
</UL>
</FONT>
</BODY> 

Figure 5   Mouseover Highlight Scriptlet

<?scriptlet error="yes"?>

<scriptlet id="hilite">
<implements id="Behavior" type="Behavior" default/>

<script language="JScript">
var prevColor;

attachEvent("onmouseover", event_onmouseover);
attachEvent("onmouseout",  event_onmouseout);

function event_onmouseover()
{
  prevColor = style.color;  
  style.color  = "red";
}

function event_onmouseout()
{
    style.color  = prevColor;
}

</script>
</scriptlet> 

Figure 6   Hiding Behavior Scriptlet

<?scriptlet error="yes"?>

<scriptlet id="showHide">
<implements id="Behavior" type="Behavior" default />
<implements id="Auto" type="Automation">
    <property name="child" />
</implements>

<script language="jscript">

attachEvent("onclick", event_onclick);
attachEvent("onmouseover", event_onmouseover);
attachEvent("onmouseout", event_onmouseout);


function event_onmouseover()
{
    style.cursor = "hand";
    style.color = "red";
}

function event_onmouseout()
{
    style.cursor = "";
    style.color = "black";
}

function event_onclick()
{
    var i;
    var sDisplay;

    // Determine current state of the list (ie expanded or collapsed)
    // based on the current display property of the child.
    bCollapsed = (document.all(child).style.display == "none");
    
    if (bCollapsed)
    {
        style.listStyleImage = "url('/workshop/graphics/blueminus.gif')";
        document.all(child).style.display = "";
    }
    else
    {
        style.listStyleImage = "url('/workshop/graphics/blueplus.gif')";
        document.all(child).style.display = "none";
    }
}

</script>
</scriptlet> 

Figure 7   Masked Entry Field Scriptlet

<scriptlet id="oScriptlet">

<implements type="Behavior" id="Behavior" default/>
<implements type="Automation">
    <property name="MASK_VALUE"/>
</implements>

<script language="JScript">

// Capture these events to process mask input.

attachEvent("onkeypress",fnMaskInteger);
attachEvent("onblur",fnStyleReset);
attachEvent("onfocus",fnStyleSet);
attachEvent("ondblclick",fnMaskReset);
attachEvent("onchange",fnMaskApply);

// Variables For Existing Style Information

var sCurrentColor="";
var sCurrentBackgroundColor="";
var sCurrentFontFamily="";
var sCurrentFontSize="";

function fnMaskApply()
{
    if(value.length>MASK_VALUE.length)
    {
        value=value.substring(0,MASK_VALUE.length);
    }
}

// Allow double-clicking to reset the mask.
function fnMaskReset()
{
    value=MASK_VALUE;
}

// Set the masking style; preserve the original.
function fnStyleSet()
{
    sCurrentBackgroundColor=style.backgroundColor;
    sCurrentColor=style.color;
    sCurrentFontFamily=style.fontFamily;
    sCurrentFontSize=style.fontSize;
    style.fontFamily="Arial";
    style.fontSize="14pt";
    style.backgroundColor="#CFCFFF";
    style.color="black";
    if(value.length==0)
    {
    value=MASK_VALUE;
    }
}

// Reset the masked input to the original values.
function fnStyleReset()
{
    style.fontFamily=sCurrentFontFamily;
    style.fontSize=sCurrentFontSize;
    style.backgroundColor=sCurrentBackgroundColor;
    style.color=sCurrentColor;
}

// Filter keypresses for integers, return false for anything else.
function fnMaskInteger()
{
    if ((event.keyCode-48>=0) && (event.keyCode-48<=9))
    {
        var sMaskValue=value;
        var sCurPos=fnGetFIPos();
        value = value.substring(0,sCurPos) + 
               (event.keyCode-48) + 
               MASK_VALUE.substring(sCurPos+1,MASK_VALUE.length);
    }
    else value=value.substring(0,sCurPos) + 
        MASK_VALUE.substring(sCurPos,MASK_VALUE.length);

    event.returnValue=false;
}

function fnGetFIPos()
{
    return value.indexOf("#");
}

</script>
</scriptlet> 

Figure 8   UserData DHTML Behavior

<html>
<head>
<title>userData DHTML Behavior</title>
<style>
   .userData {behavior: url(#_IE_);}
</style>
<script>
function fnSaveInput(){
    var oPersist=oPersistForm.oPersistText;
    //Add an attribute to the persistent object to hold the input value.
    oPersist.setAttribute("sPersistText",oPersist.value);
    //Save the persistent object into an XML Store.
    oPersist.save("oXMLBranch");
    oPersist.value="";
}
function fnLoadInput(){
    var oPersist=oPersistForm.oPersistText;
    //Load the XML store used to save the input value.
    oPersist.load("oXMLBranch");
    //Set the persistent object’s value to the attribute's value.
    oPersist.value=oPersist.getAttribute("sPersistText");
    //Remove the attribute.
    oPersist.removeAttribute("sPersistText");
}
</script>
</head>
<body>
<form id=oPersistForm>
<input type=text id=oPersistText class="userData">
<br>
<input type=button value="Save" onclick="fnSaveInput()">
<input type=button value="Load" onclick="fnLoadInput()">
</form>
</body>
</html> 

Figure 9   Calling the Recalc Method

<HTML>
<HEAD>
<SCRIPT>
function temp() 
{
    document.recalc();
}
window.onresize = temp;
window.onload = temp;
</SCRIPT>
</HEAD>
<BODY>
<DIV id=Blue 
style="BACKGROUND: blue; HEIGHT: 50%; LEFT: 
10px; POSITION: absolute; TOP: 10px;
width:function(document.body.clientWidth - Red.style.posWidth - Green.style.posWidth - 40)">
</DIV>
<DIV id=Red 
style="BACKGROUND: red; HEIGHT: 50%; POSITION: absolute; 
TOP: 10px; WIDTH: 50px; 
left:function(Blue.style.posLeft + Blue.clientWidth + 10)">
</DIV>
<DIV id=Green 
style="BACKGROUND: green; HEIGHT: 50%; LEFT: 30px; POSITION: 
absolute; TOP: 10px; WIDTH: 50px; 
left:function(Red.style.posLeft + Red.clientWidth + 10)">
</DIV>
</BODY>
</HTML> 

Figure 12   DHTML Drag and Drop

<SCRIPT>
function fnSetInfo() 
{
// Sets data format in first parameter and provides text to drop in second.
    event.dataTransfer.setData("Text", "Microsoft Golf 1998"); 
    event.dataTransfer.effectAllowed = "copy";  // Copies text.
}

// This function is called by the target object in the ondrop event.
function fnGetInfo()
{
    event.returnValue = false;                   // Cancels default action.
    event.dataTransfer.dropEffect = "copy";      // Sets cursor to system copy 	      
                                           // icon.

// Specifies data format to retrieve. And sets the value property of oTarget 
// object to the information from getData. 
    oTarget.value = event.dataTransfer.getData("Text");
}


function fnCancelDefault()
{
// Cancel default action in ondragenter and ondragover so that copy cursor
// will display until selection is dropped.
event.returnValue = false;
event.dataTransfer.dropEffect = "copy"; 
}
</SCRIPT> 

Figure 13   Copying Text

<HTML>
<HEAD>
<SCRIPT>

function fnBeforeCopy()  
{
    event.returnValue = false;
}

function fnCopy()  
{
    event.dataTransfer.setData("Text");
}

function fnBeforePaste()  
{
    event.returnValue = false;
}

function fnPaste()  
{
    event.returnValue = false;
    oTarget.value = event.dataTransfer.getData("Text");
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN ID=oSource onbeforecopy="fnBeforeCopy()" oncopy="fnCopy()">Copy Me</SPAN>
<INPUT ID="oTarget" onbeforepaste="fnBeforePaste()" onpaste="fnPaste()">
</BODY>
</HTML> 

Figure 14   Internet Explorer Client Capabilities

Client Capability Description New for version 5.0?
availHeight Height of the working area of the system’s screen, in pixels, excluding the taskbar  
availWidth Width of the working area of the system’s screen, in pixels, excluding the taskbar  
bufferDepth Number of bits per pixel used for colors on the off-screen bitmap buffer  
colorDepth Number of bits per pixel used for colors on the destination device or buffer  
compareVersions Compares two version numbers
connectionType Type of connection currently in use (LAN, modem, or offline)
cookieEnabled Whether client-side cookies are enabled in the browser  
cpuClass Type of CPU (x86 or Alpha)  
getComponentVersion Version of the component
height Vertical resolution of the screen, in pixels  
isComponentInstalled Whether the specified component is available
javaEnabled Whether Java is enabled  
platform Platform on which the browser is running  
systemLanguage Default language that the system is running  
userLanguage Current user language  
width Horizontal resolution of the screen, in pixels