Frame movement question and tree view question
Quote:
> 1) Is there a way to control the size of a frame via jscript dynamically.
> If the user clicks something in the banner, I want to enlarge one of the
> side frames. Is this possbile?
> 2) Does anyone know of a GOOD tree view written in Jscript that is free?
> Most I have seen dont allow for wrapping of text.
1) The width of the frame is addressable in script
<script>
function go() {
it.cols="25%,*";
Quote:
}
...
<frameset id=it cols="50%.*">
<frame src="about:<input type=button onclick='top.go()' >">...
2) From the MSDN behavior library:
http://msdn.microsoft.com/workshop/author/behaviors/library/behaviors...
<HTML XMLNS:Menu>
<HEAD>
Menu\:node{
behavior: url(/behaviors/expand.htc) ;
}
Quote:
}
</STYLE>
</HEAD>
<BODY>
<Menu:node>List 1
<Menu:node>Item 1</Menu:node>
<Menu:node>Item 2</Menu:node>
<Menu:node>Item 3</Menu:node>
</Menu:node>
</BODY>
</HTML>
--expand.htc--
<HTC URN="ex">
<!-- ---------------------------------------------------------------------
//
// Copyright 2000 Microsoft Corporation. All Rights Reserved.
//
// File: expand_js.htc
//
// Description: The expand behavior allows web authors to easily create
// expanding/collapsing menus and outlines.
//
//-------------------------------------------------------------------- -->
<PROPERTY NAME="imgExpand" />
<PROPERTY NAME="imgClose" />
<PROPERTY NAME="state" />
<PROPERTY NAME="masterState" />
<PROPERTY NAME="href" />
<PROPERTY NAME="target" />
<PROPERTY NAME="title" />
<METHOD NAME="expandAll" />
<METHOD NAME="closeAll" />
<METHOD NAME="expandNode" />
<METHOD NAME="closeNode" />
<EVENT NAME="onExpandAll" ID="expandall" />
<EVENT NAME="onCloseAll" ID="closeall" />
<EVENT NAME="onExpandNode" ID="expandnode" />
<EVENT NAME="onCloseNode" ID="closenode" />
<EVENT NAME="onError" ID="error" />
<ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<ATTACH EVENT="onclick" HANDLER="CheckNode" />
<ATTACH EVENT="ondrag" HANDLER="DoSelect" />
<SCRIPT LANGUAGE="jscript">
//+----------------------------------------------------------------------------
//
// Global Variables
//
//-----------------------------------------------------------------------------
var bImage = true; // Tracks whether the node has an image associated with it
//+----------------------------------------------------------------------------
//
// Function: DoInit
//
// Description: Nodes are formatted by setting defaults, adding images,
// and adding the indentation.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function DoInit()
{
SetDefaults();
// If imgExpand and imgClose are both null, don't include images
if (imgExpand == null && imgClose == null)
{
bImage = false;
}
else
{
// Set defaults for images.
if (imgExpand == null || imgExpand == "default")
{
imgExpand = "plus.gif";
}
if (imgClose == null || imgClose == "default")
{
imgClose = "minus.gif";
}
// Insert image into the element
var sImgTag = "<IMG SRC='" + imgExpand + "' "
+ "imgExpand='" + imgExpand + "' "
+ "imgClose='" + imgClose + "'> ";
}
// If there are children, call FormatChildren() to format each
if (children[0] != null)
{
FormatChildren(true);
if (bImage) insertAdjacentHTML("AfterBegin", sImgTag);
}
// Attach onpropertychange
attachEvent("onpropertychange", DoPropChange);
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: SetDefaults
//
// Description: Called during the initialization of the behavior. Sets
// the defaults for custom CSS properties (calls the
// CustomDefault() function), regular CSS properties (the
// NormalDefault() function), and attribute/properties.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function SetDefaults(sImgTag)
{
// Custom CSS Property Defaults
CustomDefault('mv--indent', 'mvIndent', '17px');
// CSS Property Defaults
NormalDefault('cursor', 'auto', 'default');
// Attribute | Property Defaults
if (target == null) target = "_self";
if (href == null) href = "";
state = "closed";
masterState = "closed";
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: CustomDefault
//
// Description: Sets the defaults for custom CSS properties and establishes
// a scriptable name for the property
//
// Arguments: sCSSName - the CSS name of the property
// sScriptName - the desired Scriptable name of the property
// sDefault - the desired default value
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function CustomDefault(sCSSName, sScriptName, sDefault)
{
if (currentStyle[sCSSName] == null)
{
style[sCSSName] = sDefault;
}
else style[sCSSName] = currentStyle[sCSSName];
style[sScriptName] = style[sCSSName];
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: NormalDefault
//
// Description: Sets the defaults for CSS properties by checking the
// currentStyle and style of the object against the IE
// default.
//
// Arguments: sCSSName - the CSS name of the property
// sIEDefault - the IE standard default of the property
// sDefault - the desired default of the property
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function NormalDefault(sCSSName, sIEDefault, sDefault)
{
if (currentStyle[sCSSName] == sIEDefault
&& (style[sCSSName] == "" || style[sCSSName] == null))
{
style[sCSSName] = sDefault;
}
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: FormatChildren
//
// Description: Sets the formatting for each level of child nodes
//
// Arguments: bInit - true (if setting at design time) or false (if
// setting at run time).
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function FormatChildren(bInit)
{
// Check if an image is the first child, so it doesn't get formatted
var iStart = 0;
if (!bInit && bImage) iStart = 1;
// Iterate through children adding indenting as necessary and hiding them
for (i=iStart; i<children.length; i++)
{
if (bInit) children[i].style.display = "none";
children[i].style.marginLeft = style.mvIndent;
}
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: DoPropChange
//
// Description: Handles property changes on CSS and regular property/
// attributes.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function DoPropChange()
{
var propertyName = window.event.propertyName;
//
// Handle CSS property changes by calling necessary functions, setting
// variables, and/or setting styles
//
if (propertyName.substring(0,5) == "style")
{
switch (propertyName)
{
case "style.mvIndent" :
FormatChildren();
break;
case "style.cursor" :
break;
}
}
else
{
//
// Detach the onpropertychange event to prevent it from firing while
// the changes are handled
//
detachEvent("onpropertychange", DoPropChange);
switch(propertyName)
{
case "imgExpand" :
if (bImage && state == "closed")
{
children[0].src = imgExpand;
}
break;
case "imgClose" :
if (bImage && state == "expand")
{
children[0].src = imgClose;
}
break;
case "href" :
break;
case "target" :
break;
case "title" :
break;
case "state" :
break;
case "masterState" :
break;
default :
ReturnError(propertyName + " not a valid property");
break;
}
// Re-attach the onpropertychange event
attachEvent("onpropertychange", DoPropChange);
}
Quote:
}
//+----------------------------------------------------------------------------
//
// Function: expandAll
//
// Description: Expand node and all children nodes
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------
function expandAll()
{
// Get the collection of expand nodes in this element
var oNodeTags = element.all.urns("ex");
// Expand all nodes in this element
for (i=0; i<oNodeTags.length; i++)
{
...
read more »
