This is a second document of this series, showing some degree of challenges in interpreting JavaScript traversing through the tree nodes. The first example of this series Expression_Toggle5.htm ( http://manas6/aspnet.35/Expression_Toggle5/)
Step: Add a web page http://manas6/aspnet.35/Expression_Toggle5/Default2.aspx
Step: 2 Codes
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Expression Toggle5</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Default2.aspx is a back up copy don't change unless you are 100% sure
var details = false;
// var domp = document.getElementsByTagName("ul");
//
function toggleme(param, currentroot) {
var divid = param;
grabFile(('home/Home.aspx'), 'sp1');
if (document.getElementById(divid).style.display == 'none') {
document.getElementById(currentroot).className = "shrink";
document.getElementById(divid).style.display = 'block';
} else {
document.getElementById(currentroot).className = "expand";
document.getElementById(divid).style.display = 'none';
}
}
// close intially
function closeall() {
var $close;
//$close = document.getElementById;
// read all ul
var domp = document.getElementsByTagName("ul");
var noofuls;
for (var xul = 1; xul < domp.length; xul++) {
noofuls = xul;
//alert(noofuls);
if (domp[xul].style.className != 'root') {
domp[xul].style.display = 'none';
}
}
}
// ajax
// page loader starts
//var links = document.getElementsByTagName("span");
function getHTTPObject() {
var ajaxObject = false;
//doc.innerHTML += "<br/> getHTTPObject() fired ";
if (window.XMLHttpRequest) {
ajaxObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
ajaxObject = false;
}
}
}
return ajaxObject;
}
function grabFile(file) {
//divx parameter will target the div1 or div2 as sent as an argument.
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
parseResponse(request);
}
request.open("GET", file, true);
request.send(null);
}
}
function parseResponse(request) {
details = document.getElementById('sp1');
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
//alert(details);
details.innerHTML = request.responseText;
}
}
}
window.onload = function() {
//details = document.getElementById("sp1");
details;
grabFile(("home/Home.aspx"), "sp1");
closeall();
}
</script>
</head>
<body bgcolor="#999999">
<span class="sp1" id="sp1"> </span>
<div id="orgname"> Frontiersoft Inc.</div>
<div style="position: absolute; width: 898px; height: 44px; z-index: 1; left: 20px; top: 39px; background-image: url('http://manas6/aspnet.35/Expression_Toggle5/images/with_p26.jpg');"
id="div1">
</div>
<div class="div2" id="div2">
<img class="logoleft" id="Image1" src="http://manas6/aspnet.35/Expression_Toggle5/images/logo_1_1.gif" alt="topleft" />
</div>
<div id="div3" class="div3">
<img id="imgmid"
src="http://manas6/aspnet.35/Expression_Toggle5/images/code_p25.jpg" alt="middlebar"
style="height: 76px; width: 605px" />
</div>
<div id="div5">
<ul class="ulmain">
<li id="root0" class="expand" ><a href="#" onclick="toggleme('ul0', 'root0');" >Home: </a>
<ul id="ul0" >
<li id="li0.1" class="lig0"><a href="home/OurMission.aspx" onclick="grabFile((this.href), 'sp1'); return false;" >Home:Mission</a></li>
<li id="li0.2" class="lig0"><a href="home/What_WeDo.aspx" onclick="grabFile((this.href), 'sp1'); return false;" >Home:What we Do</a></li>
</ul>
</li>
<li id="root1" class="expand" ><a href="#" onmousedown="toggleme('ul1', 'root1');">Root: 1 Services</a>
<ul id="ul1" >
<li id="li1.1" class="lig0">Root 1.1 Operations</li>
<li id="li1.2" class="lig0"> Root 1.2 Our Projection</li>
<li id="li1.3" class="lig0"> Root 1.3 Traning Cores</li>
<li id="li1.4" class="lig0"> Root 1.4 Services Cores
<ul>
<li class="lig1"> Programming
<ul>
<li class="lig2">Ajax
<ul>
<li class="lig3">
<a href="services/ajax/ajax_libraries.aspx" onclick="grabFile((this.href), 'sp1'); return false;" >OverView</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="root">
<li class="lig1"> OS
<ul class="root">
<li class="lig3">
<img id="fid1"
src="http://manas6/aspnet.35/Expression_Toggle5/flagger1.gif" alt="flagger" /> os window 7</li>
<li class="lig3"><img id="Img1"
src="http://manas6/aspnet.35/Expression_Toggle5/flagger1.gif" alt="flagger" /> os Android</li>
</ul></li></ul>
</li>
<li id="li1.5"> Root 1.5 Application Cores</li>
<li id="li1.6"> Root 1.2 Testing Cores</li>
</ul>
</li>
<li id="root2" class="expand" onmousedown="toggleme('ul2', 'root2');">Root: 2 Kid's Place
<ul id="ul2" >
<li id="li2.1">2.1 Social Studies
<ul>
<li id="li2.1.1"> Root .2.1. Gandhi</li>
<li id="li2.1.2"> Root 1.2 Testing Cores</li>
</ul>
</li>
<li id="li12.2">2.1 Biology
<ul>
<li id="li2.2.1"> Root 2.2.1. Digestive System</li>
<li id="li2.2.2"> Root 2.2.2 History of Microsbes</li>
</ul>
</li>
<li id="li2.3">2.3</li>
</ul>
</li>
<li id="root3" class="expand" onmousedown="toggleme('ul3', 'root3');">Root: 3 Academic
<ul id="ul3" >
<li id="li3.1">3.1</li>
<li id="li3.2">3.2</li>
</ul>
</li>
<li id="root4" class="expand" onmousedown="toggleme('ul4', 'root4');">Root: 4 Academic
<ul id="ul4" >
<li id="li4.1">4.1</li>
<li id="li4.2">4.2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
code main.cs
/* this is div1 top images */
#div1
{
position: absolute; width: 848px; height: 44px; z-index: 1; left: 20px; top: 39px; background-image: url('http://manas6/aspnet.35/Expression_Toggle5/images/with_p26.jpg');
}
.div2
{
background-position: center center; position: absolute; width: 250px;
height: 100px; z-index: 2; left: 21px; top: 89px; background-color: #CCCCCC; background-repeat: no-repeat;
}
.div3
{
position: absolute; width: 622px;
height: 90px; z-index: 3; left: 288px;
top: 90px; background-color: #CCCCCC; padding-top:10px; padding-left:10px;
}
/* holds menu */
#div5
{
clear:both; padding-left:2px;
position: absolute; width: 248px;
height: 573px; z-index: 4; left: 21px; top: 200px; background-color: #CCCCCC; overflow:auto;
}
.logoleft
{
width:96px; height:90px;left:30px;
}
.sp1
{
position: absolute; width: 615px; height: 570px; z-index: 3; left: 287px;
top: 198px; background-color: #FFFFFF; padding-left:10px; padding-right:10px;
}
#orgname
{
position: absolute; width: 848px; height: 44px; z-index: 1; left: 20px; top: 10px; font-size:xx-large; color:White; text-align:center;
}
.root{
}
ul.ulmain
{
overflow:auto; margin-left:-5px; background-color:Transparent;
}
li.lig0
{
margin-left: -15px;
}
li.lig1
{
margin-left: -20px;
}
li.lig2
{
margin-left: -25px;
}
li.lig3
{
margin-left: -25px;
}
/* ul toggle images
background: url(plus.gif) no-repeat 1% 10%;
*/
.expand
{
background: url(plus.gif) no-repeat 1% 10%;
padding-left:10px;
}
.shrink
{
background: url(minus.gif) no-repeat ;background-color:White; padding-left:10px;
}
Step : Runtime views. tree only stretches up to 2nd level of embedding./branching, rest got hidden due to the static-codes in a "for loop".
