<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>
<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>
<?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>
<?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>
<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>
<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 objects 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>
<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>
<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>
<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 systems screen, in pixels, excluding the taskbar | |
availWidth | Width of the working area of the systems 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 |