DTree

Steps to follow to make dTree

1. Copy this CSS into style sheet(css file) and place it in same folder where html page is present.

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
|--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

2. Copy this javascript to js file and place it in same folder.

/*--------------------------------------------------|

| dTree 2.05 | www.destroydrop.com/javascript/tree/ |

|---------------------------------------------------|

| Copyright (c) 2002-2003 Geir Landrö |

| |

| This script can be used freely as long as all |

| copyright messages are intact. |

| |

| Updated: 17.04.2003 |

|--------------------------------------------------*/

// Node object

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

this.id = id;

this.pid = pid;

this.name = name;

this.url = url;

this.title = title;

this.target = target;

this.icon = icon;

this.iconOpen = iconOpen;

this._io = open || false;

this._is = false;

this._ls = false;

this._hc = false;

this._ai = 0;

this._p;

};

// Tree object

function dTree(objName) {

this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : false,

useLines : true,

useIcons : false,

useStatusText : false,

closeSameLevel : false,

inOrder : false

}

this.icon = {

root : 'img/globe.gif',

folder : 'img/folder.gif',

folderOpen : 'img/folderopen.gif',

node : 'img/page.gif',

empty : 'img/empty.gif',

line : 'img/line.gif',

join : 'img/join.gif',

joinBottom : 'img/joinbottom.gif',

plus : 'img/plus.gif',

plusBottom : 'img/plusbottom.gif',

minus : 'img/minus.gif',

minusBottom : 'img/minusbottom.gif',

nlPlus : 'img/nolines_plus.gif',

nlMinus : 'img/nolines_minus.gif'

};

this.obj = objName;

this.aNodes = [];

this.aIndent = [];

this.root = new Node(-1);

this.selectedNode = null;

this.selectedFound = false;

this.completed = false;

};

// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, 

iconOpen, open) {

this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, 

icon, iconOpen, open);

};

// Open/close all nodes

dTree.prototype.openAll = function() {

this.oAll(true);

};

dTree.prototype.closeAll = function() {

this.oAll(false);

};

// Outputs the tree to the page

dTree.prototype.toString = function() {

var str = '<div class="dtree">\n';

if (document.getElementById) {

if (this.config.useCookies) this.selectedNode = this.getSelected();

str += this.addNode(this.root);

} else str += 'Browser not supported.';

str += '</div>';

if (!this.selectedFound) this.selectedNode = null;

this.completed = true;

return str;

};

// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

var str = '';

var n=0;

if (this.config.inOrder) n = pNode._ai;

for (n; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == pNode.id) {

var cn = this.aNodes[n];

cn._p = pNode;

cn._ai = n;

this.setCS(cn);

if (!cn.target && this.config.target) cn.target = this.config.target;

if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

if (!this.config.folderLinks && cn._hc) cn.url = null;

if (this.config.useSelection && cn.id == this.selectedNode && 

!this.selectedFound) {

cn._is = true;

this.selectedNode = n;

this.selectedFound = true;

}

str += this.node(cn, n);

if (cn._ls) break;

}

}

return str;

};

// Creates the node icon, url and text

dTree.prototype.node = function(node, nodeId) {

var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

if (this.config.useIcons) {

if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : 

((node._hc) ? this.icon.folder : this.icon.node);

if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : 

this.icon.node;

if (this.root.id == node.pid) {

node.icon = this.icon.root;

node.iconOpen = this.icon.root;

}

str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? 

node.iconOpen : node.icon) + '" alt="" />';

}

if (node.url) {

str += '<a id="s' + this.obj + nodeId + '" class="' + 

((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" 

href="' + node.url + '"';

if (node.title) str += ' title="' + node.title + '"';

if (node.target) str += ' target="' + node.target + '"';

if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + 

node.name + '\';return true;" onmouseout="window.status=\'\'; return true;"';

if (this.config.useSelection && ((node._hc && this.config.folderLinks) || 

!node._hc))

str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');" 

onmousedown="javascript:checkClick(this);"';

str += '>';

}

else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != 

this.root.id)

str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" 

class="node">';

str += node.name;

if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += 

'</a>';

str += '</div>';

if (node._hc) {

str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + 

((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';

str += this.addNode(node);

str += '</div>';

}

this.aIndent.pop();

return str;

};

// Adds the empty and line icons

dTree.prototype.indent = function(node, nodeId) {

var str = '';

if (this.root.id != node.pid) {

for (var n=0; n<this.aIndent.length; n++)

str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? 

this.icon.line : this.icon.empty ) + '" alt="" />';

(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

if (node._hc) {

str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + 

this.obj + nodeId + '" src="';

if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : 

this.icon.nlPlus;

else str += ( (node._io) ? ((node._ls && this.config.useLines) ? 

this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? 

this.icon.plusBottom : this.icon.plus ) );

str += '" alt="" /></a>';

} else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? 

this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';

}

return str;

};

// Checks if a node has any children and if it is the last sibling

dTree.prototype.setCS = function(node) {

var lastId;

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.id) node._hc = true;

if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

}

if (lastId==node.id) node._ls = true;

};

// Returns the selected node

dTree.prototype.getSelected = function() {

var sn = this.getCookie('cs' + this.obj);

return (sn) ? sn : null;

};

// Highlights the selected node

dTree.prototype.s = function(id) {

if (!this.config.useSelection) return;

var cn = this.aNodes[id];

if (cn._hc && !this.config.folderLinks) return;

if (this.selectedNode != id) {

if (this.selectedNode || this.selectedNode==0) {

eOld = document.getElementById("s" + this.obj + this.selectedNode);

eOld.className = "node";

}

eNew = document.getElementById("s" + this.obj + id);

eNew.className = "nodeSel";

this.selectedNode = id;

if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);

}

};

// Toggle Open or close

dTree.prototype.o = function(id) {

var cn = this.aNodes[id];

this.nodeStatus(!cn._io, id, cn._ls);

cn._io = !cn._io;

hideCost();

if (this.config.closeSameLevel) this.closeLevel(cn);

if (this.config.useCookies) this.updateCookie();

};

// Open or close all nodes

dTree.prototype.oAll = function(status) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

this.nodeStatus(status, n, this.aNodes[n]._ls)

this.aNodes[n]._io = status;

}

}

if (this.config.useCookies) this.updateCookie();

};

// Opens the tree to a specific node

dTree.prototype.openTo = function(nId, bSelect, bFirst) {

if (!bFirst) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].id == nId) {

nId=n;

break;

}

}

}

var cn=this.aNodes[nId];

if (cn.pid==this.root.id || !cn._p) return;

cn._io = true;

cn._is = bSelect;

if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

if (this.completed && bSelect) this.s(cn._ai);

else if (bSelect) this._sn=cn._ai;

this.openTo(cn._p._ai, false, true);

};

// Closes all nodes on the same level as certain node

dTree.prototype.closeLevel = function(node) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && 

this.aNodes[n]._hc) {

this.nodeStatus(false, n, this.aNodes[n]._ls);

this.aNodes[n]._io = false;

this.closeAllChildren(this.aNodes[n]);

}

}

}

// Closes all children of a node

dTree.prototype.closeAllChildren = function(node) {

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

this.aNodes[n]._io = false;

this.closeAllChildren(this.aNodes[n]);

}

}

}

// Change the status of a node(open or closed)

dTree.prototype.nodeStatus = function(status, id, bottom) {

eDiv = document.getElementById('d' + this.obj + id);

eJoin = document.getElementById('j' + this.obj + id);

if (this.config.useIcons) {

eIcon = document.getElementById('i' + this.obj + id);

eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

}

eJoin.src = (this.config.useLines)?

((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

((status)?this.icon.nlMinus:this.icon.nlPlus);

eDiv.style.display = (status) ? 'block': 'none';

};

// [Cookie] Clears a cookie

dTree.prototype.clearCookie = function() {

var now = new Date();

var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

this.setCookie('co'+this.obj, 'cookieValue', yesterday);

this.setCookie('cs'+this.obj, 'cookieValue', yesterday);

};

// [Cookie] Sets value in a cookie

dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, 

domain, secure) {

document.cookie =

escape(cookieName) + '=' + escape(cookieValue)

+ (expires ? '; expires=' + expires.toGMTString() : '')

+ (path ? '; path=' + path : '')

+ (domain ? '; domain=' + domain : '')

+ (secure ? '; secure' : '');

};

// [Cookie] Gets a value from a cookie

dTree.prototype.getCookie = function(cookieName) {

var cookieValue = '';

var posName = document.cookie.indexOf(escape(cookieName) + '=');

if (posName != -1) {

var posValue = posName + (escape(cookieName) + '=').length;

var endPos = document.cookie.indexOf(';', posValue);

if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, 

endPos));

else cookieValue = unescape(document.cookie.substring(posValue));

}

return (cookieValue);

};

// [Cookie] Returns ids of open nodes as a string

dTree.prototype.updateCookie = function() {

var str = '';

for (var n=0; n<this.aNodes.length; n++) {

if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

if (str) str += '.';

str += this.aNodes[n].id;

}

}

this.setCookie('co' + this.obj, str);

};

// [Cookie] Checks if a node id is in a cookie

dTree.prototype.isOpen = function(id) {

var aOpen = this.getCookie('co' + this.obj).split('.');

for (var n=0; n<aOpen.length; n++)

if (aOpen[n] == id) return true;

return false;

};

// If Push and pop is not implemented by the browser

if (!Array.prototype.push) {

Array.prototype.push = function array_push() {

for(var i=0;i<arguments.length;i++)

this[this.length]=arguments[i];

return this.length;

}

};

if (!Array.prototype.pop) {

Array.prototype.pop = function array_pop() {

lastElement = this[this.length-1];

this.length = Math.max(this.length-1,0);

return lastElement;

}

};

function checkClick(arg)

{

if(event.button == 2)

{

divMenu.show('mEdit', arg, 75, 10);

event.returnValue=false;

return false;

}

return true;

}

3. Copy this code into html page withing header tag

<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>

You can also put the css and js file in js and css folder... you just need to mention the path in src

such as src="parentdirctory\dtree.js"

4. Copy this code into html body.

<script>

document.onmousedown= click;

</script>

<table height="100%" class="pt" border="0" cellpadding="0" cellspacing="0" 

style="border-collapse: collapse" bordercolor="#111111" width="100%">

<tr class="row_odd" valign="top">

<td width="100%" colspan="2">

<p><a href="javascript: d.openAll();" class="link">open all</a> | <a href="javascript: 

d.closeAll(); hideCost();" class="link">close all</a>

<script type="text/javascript">

d = new dTree('d');

d.add(0,-1,'Level 0');

d.add(1,0,'Level 1');

d.add(3,1,'Level 2');

d.add(4,1,'Level 2');

d.add(5,1,'Level 2');

d.add(2,0,'Level 1')

document.write(d);

</script>

</td>

</tr>

</table>

You should add the child nodes to parent node in the following format

d.add(childnode-id, parentnode-id, child-name)

6. Finally Copy these images below and place it in img folder

Click here to get complete code in zip format

Create Simple Div

Let us create a simple div popup. Lets put your name in the popup. It is very easy and simple to create div popup. What u need to do is just fallow the simple steps. Step 1: Create a div tag in html page and provide a id for that and don't forget to hide it we will play hide and seek with these div popup. Add style sheet to hide the div u can either use visibility or display. I suggest u to use display initially. <div id="myName" style="display:none">my name</div> Step 2: Now u have already created a div which is not visible in html page. Ur task is now to get it when u click some thing. lets put a link for that.. <a href="#" onclick="showDiv('myName')">show div</a> Step 3: U need to put javascript to show ur div. <script> function showDiv(hiddenDiv){ var displayDiv=document.getElementById(hiddenDiv); displayDiv.style.display=""; displayDiv.style.backgroundColor="ffeeee"; displayDiv.style.position="absolute"; } </script> Step 4: Finally ur html code should look like this. <html><script> function showDiv(hiddenDiv){ var displayDiv=document.getElementById(hiddenDiv); displayDiv.style.display=""; displayDiv.style.backgroundColor="ffeeee"; displayDiv.style.position="absolute"; } </script> <a href="#" onclick="showDiv('myName')">show div</a> <div id="myName" style="display:none">my name</div> </html> Step 5: I hope ur getting the same result as me. see example show div below.

show div my name

Scrollable table

Dear Friends,

I have created Complete Scrollable Table. This scrollable table is very simple to implement, it needs only CSS. It Works Fine in IE but may not work properly in other browsers.

The Scrollable table has fixed header, fixed footer, fixed right column, fixed left column and Scrollable Body. This has made it scrollable in 2 dimension or i can say Scrollable in x-y direction.

One more advantage of this Scrollable table is easy modification. You can configure it to one dimensional scrollable table, either scrollable in x-direction or scrollable in y-direction. You can also make top 2 row as fixed, bottom 2 row as fixed, left 2 column as fixed, right 2 column as fixed. I can say more than one row can be fixed and more than one column can be made fixed.

You can also fix the table width dynamically. You can also make your table width equal to screen width.

Style Sheet to implement Scrollable Table:

If you want to implement the scrollable table in your website just follow these simple steps.

1. Copy the below style script and paste it into either css file or put inside <script></script> tag in html page.

 DIV.tableHolder {

OVERFLOW: AUTO;
WIDTH: 600px;
 POSITION: relative;
HEIGHT: 200px;
}

thead td{
Z-INDEX: 20;
POSITION: relative;
 TOP: expression(this.offsetParent.scrollTop-2);
HEIGHT: 20px;
TEXT-ALIGN: center
 }

 tfoot td{
 Z-INDEX: 20;
 POSITION: relative;
TOP: expression(this.offsetParent.clientHeight - this.offsetParent.scrollHeight + this.offsetParent.scrollTop); HEIGHT: 20px;
 TEXT-ALIGN: left;
 text-wrap: suppress
 }

.fixedLeft {
 z-index: 20;
font-weight: bold;
border-right: 1px solid silver;
 LEFT: expression(this.offsetParent.scrollLeft-2);
POSITION: relative;
}

.fixedRight {
z-index: 20;
font-weight: bold;
border-left: 1px solid silver;
LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft); POSITION: relative;
} 

2. Enclose the table within <div></div>
tag. By doing this we will be able to specify exact width we need for our table.

3. Enclosing the header row within the thead tag will create header element. And
we can provide style script for the header to stay fixed.

    eg., <thead><tr><td>header</td></tr><thead> 

4. Now coming to footer.. If u have some information to be displayed on footer
then enclose the footer row within the footer tag

    eg., <tfoot><tr><td>footer</td></tr></tfoot> 

5. Now for fixing left column, you put class="fixedLeft" to first td of every
row..
eg., <tr>
           <td class="fixedLeft">first  </td> 
           <td>second   </td>
      <tr>

6. Now to make right most column as fixed you need to put class="fixedRight" to
right most row..
eg., <tr>
            <td >first      </td> 
            <td class="fixedRight">last       </td>
      <tr>

7. You need to repeat step 6 and 7 for each and every row.

8. Finally if you are not getting then copy this code and just alter as desired.

<div class="tableHolder">
    <table>
    <thead><tr>               
          <td class="fixedLeft">first column</td>               
          <td>second column</td>               
          <td class="fixedRight">Last column</td>
       </tr> </thead>

        <tbody>
        <tr>               
            <td class="fixedLeft"></td>               
            <td></td>               
            <td class="fixedRight"></td>
        </tr>
        </tbody>

        <tfoot><tr>
             <td class="fixedLeft"></td>
             <td></td>
             <td class="fixedRight"></td>
        </tr></tfoot>

    </table>
</div>

You can modify the given table by adding columns as many as needed for your application. Here First Green color code will give you fixed header. Where as the middle grey color code will give you scrollable body. You can add as many rows as possible. But that should be within the tbody end tag. The last Green color code will give you fixed footer. 

 

For Your understanding I have kept very simple code, this will give you an idea how to create it. But you need to add 4-5 columns and 4-5 rows(in tbody) to make it scrollable.