xmenu-xlayer
ID: 3659723 • Letter: X
Question
Need full soluton codes for tasks in next link: (http://john.cs.olemiss.edu/~cbzickos/download_files/475/labs/Lab 13.pdf). Please post full solution code, or screenshot of solution code.Explanation / Answer
xmenu-xlayer // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-31-12 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-01-28 // version: 0.8.0 function Browser( browsers ) { this.browsers = browsers; // browser detection array this.createBooleans(); } Browser.prototype.createBooleans = function() { var name = navigator.appName; var cname = navigator.appCodeName; var usragt = navigator.userAgent; var ver = navigator.appVersion; for ( i = 0; i =6.x) --- [ "gk", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >= 0 && usragt.indexOf( 'Gecko' ) >= 0 && usragt.indexOf( 'Safari' ) < 0", "[rv[:| ]*([0-9]).([0-9])|Galeon/([0-9]).([0-9])]", [ "0.7", "0.8", "0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6" ] ], // Netscape Navigator --- [ "nn", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && parseInt( ver ) = 0 && ( name.indexOf( 'Microsoft Internet Explorer' ) >=0 || name.indexOf( 'Opera' ) >= 0 ) && usragt.indexOf( 'Opera' ) >= 0", "Opera.([0-9]).([0-9])", [ "5", "5.1", "6", "7", "7.1", "7.2" ] ], // Safari --- [ "sf", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && usragt.indexOf('AppleWebKit' ) >= 0 && usragt.indexOf('Safari') >= 0", "AppleWebKit/([0-9])", "Konqueror/([0-9].[0-9])", [ "48", "85" ] ], // Konqueror --- [ "kq", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Konqueror' ) >= 0 && usragt.indexOf( 'Konqueror' ) >= 0", "Konqueror/([0-9]).([0-9]*)", [ "2.2", "3", "3.1" ] ] ] ); // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-12-20 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-02-06 // version: 1.4.0 function XlayerParent( sLayerId, sImg, sDesc, iWidth, iHeight, sContent ) { // static var -------- if( !XlayerParent.prototype.instances ) XlayerParent.prototype.instances = new Array(); XlayerParent.prototype.instances[ XlayerParent.prototype.instances.length ] = this; this.sId = this.create( sLayerId, sImg, sDesc, iWidth, iHeight ) } XlayerParent.prototype.create = function( sLayerId, sImg, sDesc, iWidth, iHeight ) { this.sParentLayerId = sLayerId; this.sParentLayerXlayerId = sLayerId + "Xlayer" var sLayer = ""; var content_str = ''; if ( sImg ) sContent = ''; else if ( sDesc ) sContent = sDesc; // nn4up ---------- if ( is.nn4up ) { var sLayer = '' + ( ( sContent )? sContent : "" ) + ''; document.write( sLayer ); return sLayerId; } // iewin5up, iemac5up, gk -------- else if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { var sLayer = '' + ( ( sContent )? sContent : "" ) + ''; document.write( sLayer ); return sLayerId; } else { return null; } } XlayerParent.prototype.getLayer = function( sLayerId ) { var layer = null; if ( sLayerId ) { // id supplied if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) return document.getElementById( sLayerId ); else if ( is.nn4up ) return document.layers[ sLayerId ]; } else if ( !sLayerId ) { // null supplied if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) return document.body; else if ( is.nn4up ) return window; } } XlayerParent.prototype.getX = function( layer ) { var x = 0; if ( is.nn4up ) { if ( layer != window ) x = layer.pageX; } else if ( is.gk || is.iemac5up || is.iewin5up || is.sf || is.kq3up || is.op6up ) { if ( layer != document.body ) { currentX = 0; object = layer; while ( object ) { currentX += object.offsetLeft; object = object.offsetParent; } x = currentX; } if ( is.iemac5up ) x += parseInt( "0" + document.body.currentStyle.marginLeft, 10 ); } return x; } XlayerParent.prototype.getY = function( layer ) { var y = 0; if ( is.nn4up ) { if ( layer != window ) y = layer.pageY; } else if ( is.gk || is.iewin || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer != document.body ) { currentY = 0; object = layer; while ( object ) { currentY += object.offsetTop; object = object.offsetParent; } y = currentY; } if ( is.iemac5up ) y += parseInt( "0" + document.body.currentStyle.marginTop, 10 ); } return y; } XlayerParent.prototype.getW = function( layer ) { var w = 0; if ( is.nn4up ) { if ( layer == window ) return window.innerWidth; else return layer.clip.width; } else if ( is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer == document.body ) return window.innerWidth; else return layer.offsetWidth; } else if ( is.iewin5up ) { if ( layer == document.body ) return document.body.clientWidth; else return layer.offsetWidth; } } XlayerParent.prototype.getH = function( layer ) { var h = 0; if ( is.nn4up ) { if ( layer == window ) return window.innerHeight; else return layer.clip.height; } else if ( is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer == document.body ) return window.innerHeight; else return layer.offsetHeight; } else if ( is.iewin5up ) { if ( layer == document.body ) return document.body.clientHeight; else return layer.offsetHeight; } } // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-12-20 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-02-21 // version: 2.5.3 function Xlayer( sParent, xlayerParent, x, y, offsetX, offsetY, w, h, iClipTop, iClipRight, iClipBottom, iClipLeft, iZindex, bVisibility, sBgcolor, fading, events, sText, bBold, sAlign, iTopTextBorder, iRightTextBorder, iBottomTextBorder, iLeftTextBorder, sFgcolor, sHref, sIcon, iIconWidth, iIconHeight, iconBorder, sFontface, iFontsize, src , sSpacer ) { if ( !Xlayer.prototype.instances ) Xlayer.prototype.instances = new Array(); Xlayer.prototype.instances[ Xlayer.prototype.instances.length ] = this; // Store this Instance In static array this.index = Xlayer.prototype.instances.length - 1; this.sParent = sParent; this.parent = null; this.xlayerParent = xlayerParent; this.lyr = null; this.id = this.id || "Xlayer" + this.index; this.x = x || 0; this.y = y || 0; this.offsetX = offsetX || 0; this.offsetY = offsetY || 0; this.w = w || 0; this.h = h || 0; this.iClipTop = iClipTop || 0; this.iClipRight = iClipRight || w; this.iClipBottom = iClipBottom || h; this.iClipLeft = iClipLeft || 0; this.iZindex = iZindex || 0; this.bVisibility = bVisibility; this.sBgcolor = sBgcolor || "black"; this.iOpacity = 0; this.sSpacer = sSpacer; // caption --- this.sText = sText || null; this.bBold = bBold || false; this.sAlign = sAlign || "center"; this.iTopTextBorder = iTopTextBorder; this.iRightTextBorder = iRightTextBorder; this.iBottomTextBorder = iBottomTextBorder; this.iLeftTextBorder = iLeftTextBorder; this.sFgcolor = sFgcolor || "white"; this.sHref = ( is.nn4up && !sHref )? "#" : sHref; // nn4 always need a href to process clicks this.sFontface = sFontface || "Helvetica"; this.iFontsize = iFontsize || 2; this.sIcon = sIcon || null; this.iIconWidth = iIconWidth || 0; this.iIconHeight = iIconHeight || 0; this.iconBorder = iconBorder || 0; // iframe ---- this.iframe = null; this.scrollbars = null; this.src = src || null; this.events = events || null; // array: event, func, event, func, ... this.fading = fading || null; // array: start, stop, steps, delay if ( is.op6up && !is.op7up ) // opera can't create dynamically this.writeDiv(); } Xlayer.prototype.MOUSEOVER = "onmouseover"; Xlayer.prototype.MOUSEOUT = "onmouseout"; Xlayer.prototype.CLICK = "onclick"; Xlayer.prototype.create = function() { this.parent = XlayerParent.prototype.getLayer( this.sParent ); // parent = another layer or document.body this.parentCoordsOnly = XlayerParent.prototype.getLayer( this.xlayerParent.sId ); if ( is.nn4up ) { if ( this.w == "100%" ) this.lyr = new Layer( this.parent.innerWidth, this.parent ); else this.lyr = new Layer( this.w, this.parent ); } else if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { this.lyr = document.createElement( "DIV" ); // create layer this.lyr.style.position = "absolute"; this.lyr.style.overflow = "hidden"; this.lyr.id = this.id; this.parent.appendChild( this.lyr ); // insert into DOM } else if ( is.op6up && !is.op7up ) { // already created on instanciation (no dynamic creation possible) this.lyr = document.getElementById( this.id ); } this.setVisibility( this.bVisibility ); this.setSize( this.w, this.h ); this.setEvents( this.events ); if ( !( is.op6up && !is.op7up ) ) this.setBody( this.getCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) ); this.setBgColor( this.sBgcolor ); this.setFgColor( this.sFgcolor ); this.setPos( this.x, this.y, this.offsetX, this.offsetY ); this.setZindex( this.iZindex ); this.fade( this.fading ); } Xlayer.prototype.writeDiv = function() { document.writeln( '' + this.getCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) + '' ); } Xlayer.prototype.kill = function() { if ( is.nn4up ) { for ( i = 0; i 0 ) desc += ''; desc += ''; // left border if ( this.iLeftTextBorder > 0 ) desc += ''; // text cell desc += '' + sTextCell + ''; // right border if ( this.iRightTextBorder > 0 ) desc += ''; desc += ''; // bottom text border if ( this.iBottomTextBorder > 0 ) desc += ''; // right border desc += ''; // text & icons --- if ( sIcon && sText ) { tab_body = '' + '' + desc + '' + '' + img + '' + ''; } // text only --- else if ( sText && !sIcon ) { tab_body = '' + desc + ''; } // icon only --- else if ( sIcon && !sText ) { tab_body = '' + sIcon + ''; } var html = tab_head + tab_body + tab_foot; return html; } } function Xmenu( sNavigationName, sNavigation, globals, styles, contents ) { if( !Xmenu.prototype.instances ) Xmenu.prototype.instances = new Array(); Xmenu.prototype.instances[ Xmenu.prototype.instances.length ] = this; // store this instance in static Array this.index = Xmenu.prototype.instances.length - 1; this.sNavigationName = sNavigationName; this.sNavigation = sNavigation; this.iType = globals[ 0 ]; this.iCloseDelay = globals[ 1 ] * 1000; this.bClick = globals[ 2 ]; this.bMenuBelow = globals[ 3 ]; this.bLeftAlign = globals[ 4 ]; this.bKeepExpansionState = globals[ 5 ]; this.bHighlightClickedNodes = globals[ 6 ]; this.sSpacerUrl = globals[ 8 ]; this.styles = styles; this.contents = contents; this.iContent = 0; this.tree = null; this.overNode = null; this.outNode = null; this.lastNode = null; this.absY = 0; this.timeout = null; this.bOpened = false; iParentLayerWidth = ( is.iemac5up )? 0 : globals[ 7 ][ 0 ]; // XparentLayer disturbs Xlayer-events on iemac5 iParentLayerHeight = ( is.iemac5up )? 0 : globals[ 7 ][ 1 ]; this.xlayerParent = new XlayerParent( "XlayerParent" + this.index, this.sSpacerUrl, null, iParentLayerWidth, iParentLayerHeight, null ); this.tree = this.buildTree( 0, 0, false, null, "tree" ); this.nodeFound = null; this.navigationNode = null; if ( this.findNode( this.sNavigation, this.tree ) ) { // node indicated in request found this.navigationNode = eval( "this." + this.nodeFound ); } } Xmenu.prototype.VERTICAL = 0; Xmenu.prototype.HORIZONTAL = 1; Xmenu.prototype.COLLAPSING = 2; Xmenu.prototype.buildTree = function( iAbsX, iAbsY, bSibling, sParent, sPath ) { var node = this.buildNode( iAbsX, iAbsY, bSibling, sParent, sPath ); this.iContent++; if ( this.iContent 0 && !this.bMenuBelow )? this.styles[ 1 ][ 2 ] : 0 ); } else { // level 0, ( level 1 && menu on the right ) node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ]; if ( !this.bLeftAlign ) // add yOffset, add width of last + xOffset node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ] + ( ( node.iLevel > 0 )? this.styles[ node.iLevel + 1 ][ 2 ] : 0 ); else node.absX = this.styles[ node.iLevel + 1 ][ 0 ] + this.cumulateOffsets( 0, node.iLevel ) + ( ( node.iLevel > 0 && !this.bMenuBelow )? this.styles[ 1 ][ 2 ] : 0 ); } } else { // sibling node.absY = iAbsY; node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 2 ]; } } else if ( this.iType == this.COLLAPSING ) { if ( !bSibling ) { // child node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ]; node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ]; } else { // sibling node.absX = iAbsX; node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 3 ]; } } return node; } Xmenu.prototype.cumulateOffsets = function( iStyleIndex, iMaxLevel ) { var iOffset = 0; for ( i = 0; i take root node tree = this.tree; } if ( tree.child ) { this.createXlayers( tree.child ); } if ( tree.sibling ) { this.createXlayers( tree.sibling ); } tree.xlayer.create(); } Xmenu.prototype.setOpenListener = function( openListener ) { this.openListener = openListener; } Xmenu.prototype.setCloseListener = function( closeListener ) { this.closeListener = closeListener; } Xmenu.prototype.setLinkClickListener = function( linkClickListener ) { this.linkClickListener = linkClickListener; } Xmenu.prototype.open = function() { if ( this.navigationNode != null ) { this.openLastClicked(); } else { this.setVisibSiblings( this.tree, true ); } this.bOpened = true; this.openListener.onMenuOpen( this ); } Xmenu.prototype.openLastClicked = function() { node = this.navigationNode; this.lastNode = node; if ( node.child != null ) this.setVisibSiblings( node.child, true ); while ( node != null ) { this.highlightClickedNode( node ); if ( node.sParent != null ) { this.setVisibSiblings( eval( node.sParent ).child, true ); node = eval( node.sParent ); } else { this.setVisibSiblings( this.tree, true ); node = null; } } } Xmenu.prototype.findNode = function( sText, node ) { if ( this.nodeFound ) return true; if ( node.child ) this.findNode( sText, node.child ); if ( node.sibling ) this.findNode( sText, node.sibling ); if ( sText == node.sText ) this.nodeFound = node.sPath; if ( this.nodeFound ) return true; else return false; } Xmenu.prototype.close = function() { if ( this.bOpened && !this.bKeepExpansionState ) { this.setVisibChildren( this.tree, false ); this.setVisibSiblings( this.tree, true ); if ( this.iType == this.COLLAPSING ) this.setCollapsePos( this.tree ); // if ( this.bClick && this.lastNode ) // { this.clearHighlightChildren( this.tree ); this.lastNode = null; // } this.bOpened = false; this.closeListener.onMenuClose( this ); } } Xmenu.prototype.onmouseover = function( node ) { this.overNode = node; if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && !this.bClick ) { if ( !this.bOpened ) { // this menu will open this.bOpened = true; this.openListener.onMenuOpen( this ); } if ( this.outNode ) var outNode = this.outNode; else var outNode = this.tree; if ( outNode.iLevel > node.iLevel ) { this.showBranch( node, this.outNode ); // this.setVisibSiblings( eval( outNode.sParent + ".child" ), false ); // this.setVisibSiblings( outNode.child, false ); } else if ( outNode.iLevel == node.iLevel ) { this.setVisibSiblings( outNode.child, false ); } this.setVisibSiblings( node.child, true ); } if ( this.checkClickPath( node ) ) { // current node is not the node that was clicked (or its parents) this.highlight( node, true ); } return false; } Xmenu.prototype.onmouseout = function( node ) { if ( this.checkClickPath( node ) ) this.highlight( node, false ); var timeout = this.timeout; if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && !this.bClick ) // close menu if no onmouseover until timeout { this.timeout = setTimeout( "Xmenu.prototype.instances[" + this.index + "].checkOnmouseout()", this.iCloseDelay ); } this.outNode = node; clearTimeout( timeout ); return false; } Xmenu.prototype.checkClickPath = function( node ) { if ( this.bHighlightClickedNodes ) { lastNode = this.lastNode; while ( lastNode != null ) { if ( lastNode == node ) // node clicked found return false; else // continue looking for it lastNode = eval( lastNode.sParent ); } return true; } else { return true; } } Xmenu.prototype.checkOnmouseout = function() { if ( this.overNode == this.outNode && !( this.bKeepExpansionState && this.bClick ) ) { // onmouseover executed since delay? this.close(); } } Xmenu.prototype.onclick = function( node ) { if ( node.target ) { // follow href node.target.open( node.sText, this.sNavigationName, this.sNavigation ); this.sNavigation = node.sText; this.navigationNode = node; // store navigation node this.clearHighlightChildren( this.tree ); this.linkClickListener.onLinkClick( this ); // inform controller } else if ( ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && this.bClick ) || this.iType == this.COLLAPSING ) { this.highlight( node, true ); if ( !this.bOpened ) { // this menu will open this.bOpened = true; this.openListener.onMenuOpen( this ); } if ( this.iType == this.COLLAPSING ) this.collapse( node ); else if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && this.bClick ) this.showBranch( node, this.lastNode ); this.lastNode = node; } return false; } Xmenu.prototype.showBranch = function( node, hideNode ) { // if ( this.bClick && hideNode == node && node.child && node.child.xlayer.isVisible() ) if ( this.bClick && node.child && node.child.xlayer.isVisible() ) { // reclose branch this.setVisibChildren( node.child, false ); this.clearHighlightChildren( node, false ); } else { if ( hideNode ) { // hide old nodes this.setVisibChildren( this.tree, false ); this.clearHighlightChildren( this.tree, false ); } if ( node.child ) this.setVisibSiblings( node.child, true ); while ( node ) { // show new nodes if ( this.bClick ) this.highlightClickedNode( node, true ); if ( node.sParent ) this.setVisibSiblings( eval( node.sParent ).child, true ); else this.setVisibSiblings( this.tree, true ); node = eval( node.sParent ); } } } Xmenu.prototype.clearHighlightChildren = function( node ) { if ( node ) { if ( node.child ) this.clearHighlightChildren( node.child ); if ( node.sibling ) this.clearHighlightChildren( node.sibling ); this.highlight( node, false ); } } Xmenu.prototype.collapse = function( node ) { this.showBranch( node, this.lastNode ); this.setCollapsePos( this.tree ); } Xmenu.prototype.setCollapsePos = function( node ) { if ( node == this.tree ) // start looping this.absY = this.tree.xlayer.y; if ( node.xlayer.isVisible() ) { node.xlayer.setPos( node.xlayer.x, this.absY ); this.absY += node.xlayer.h; } if ( node.child ) this.setCollapsePos( node.child ); if ( node.sibling ) this.setCollapsePos( node.sibling ); } Xmenu.prototype.highlight = function( node, bHighlight ) { var index = ( bHighlight )? 6 : 5; // style for mouseover or mouseout ? node.xlayer.setBgColor( this.styles[ node.iLevel + 1 ][ index ][ 0 ] ); // nn4 crashes, iemac stops rendering if ( !is.nn4up && !is.iemac5up ) node.xlayer.setFgColor( this.styles[ node.iLevel + 1 ][ index ][ 1 ] ); } Xmenu.prototype.highlightClickedNode = function( node ) { if ( node && this.bHighlightClickedNodes ) { node.xlayer.setBgColor( this.styles[ 0 ][ 0 ] ); if ( !is.nn4up && !is.iemac5up ) node.xlayer.setFgColor( this.styles[ 0 ][ 1 ] ); } } Xmenu.prototype.setVisibSiblings = function( node, bVisibility ) { if ( node ) { if ( node.sibling ) this.setVisibSiblings( node.sibling, bVisibility ); node.xlayer.setVisibility( bVisibility ); } } Xmenu.prototype.setVisibChildren = function( node, bVisibility ) { if ( node ) { if ( node.child ) this.setVisibChildren( node.child, bVisibility ); if ( node.sibling ) this.setVisibChildren( node.sibling, bVisibility ); node.xlayer.setVisibility( bVisibility ); } } Xmenu.prototype.isNavigationNodeFound = function() { return this.navigationNode != null; } // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2002-05-11 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-01-17 // version: 2.1.0 function Xmenus( sNavigationName, sNavigation ) { if( !Xmenus.prototype.instances ) Xmenus.prototype.instances = new Array(); Xmenus.prototype.instances[ Xmenus.prototype.instances.length ] = this; this.index = Xmenus.prototype.instances.length - 1; this.bCompatibleBrowser = ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.nn4up || is.op6up ); this.iCloseDelay = 1; this.xmenus = new Array(); this.sNavigationName = sNavigationName; this.sNavigation = sNavigation; this.navigationMenu = null; this.lastMenu = null; this.timeout = null; this.bReopenDisabled = false; } Xmenus.prototype.add = function( xmenuConfig ) { if ( this.bCompatibleBrowser ) this.xmenus[ this.xmenus.length ] = new Xmenu( this.sNavigationName, this.sNavigation, xmenuConfig[ 0 ], xmenuConfig[ 1 ], xmenuConfig[ 2 ] ); // else // this.writeDegradationHtml( xmenuConfig ); } Xmenus.prototype.create = function() { if ( !this.bCompatibleBrowser ) return; for ( j = 0; j open navigation menu this.navigationMenu.open(); } } Xmenus.prototype.onLinkClick = function( xmenu ) { // fired by Xmenu on click on a link // this.navigationMenu.clearHighlightChildren( this.navigationMenu.tree ); this.openNavigationMenu( xmenu ); } Xmenus.prototype.writeDegradationHtml = function( xmenuConfig ) { var content = xmenuConfig[ 2 ]; for ( i = 0; iRelated Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.