Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 13th, 2004, 04:10 AM
Registered User
 
Join Date: Dec 2004
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Need help over code

I have code for treemenu using javascript, i need to add one more attribute to tree items(that are declared in an array) by adding change text on mouseover(innerHTML) parameter, pls help me where should i include the function code and pls help me with syntax(not HTML)


 
Old December 13th, 2004, 01:31 PM
Friend of Wrox
 
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Post the code you already have, and perhaps we can add to it as you wish.

-Snib - http://www.snibworks.com
Where will you be in 100 years?
 
Old December 14th, 2004, 02:08 AM
Registered User
 
Join Date: Dec 2004
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Snib,
Thanks for your quick reply.
The tree menu consists of four files.
1. index.html
2. tree.js
3. tree_items.js
4. tree_tpl.js

1. This is code for index.html
<html>
<head>
    <title>Tigra Tree Menu - Demo #2 (Win help style)</title>
    <meta name="description" content="Free Cross Browser Javascript DHTML Tree Menu Navigation">
    <meta name="keywords" content="JavaScript tree menu, DHTML tree menu, client side tree menu, table of contents, site map, web authoring, scripting, freeware, download, shareware, free software, DHTML, Free Tree Menu, site, navigation, html, web, netscape, explorer, IE, opera, DOM, control, cross browser, support, frames, target, download">
    <meta name="robots" content="index,follow">
<style>
    a, A:link, a:visited, a:active
        {color: #000000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
    A:hover
        {color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
    p, tr, td, ul, li
        {color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
    .header1, h1
        {color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
    .header2, h2
        {color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
    .intd
        {color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px; padding-right: 15px;}
</style>

    <script language="JavaScript" src="tree.js"></script>
    <script language="JavaScript" src="tree_items.js"></script>
    <script language="JavaScript" src="tree_tpl.js"></script>

</head>
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">




<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="19%"><tr><td>
<table cellpadding="0" cellspacing="1" width="57%" border="0">
<tr>
    <td valign="top" bgcolor="#FFFFFF">
    <table cellpadding="3" cellspacing="1" border="0" width="100%">
        <tr></tr-->
            </table>
    </td>
    <td valign="top" bgcolor="#FFFFFF" width="100%">
    <table cellpadding="0" cellspacing="5" border="0" width="100%">
    <tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
    <tr><td>
        <script language="JavaScript">
            new tree (TREE_ITEMS, TREE_TPL);
        </script>
    </td></tr>
    </table>
    </td>
</tr>
</table>
</td></tr></table>



</body>
</html>
2. This is code for tree.js

// Title: Tigra Tree
// Description: See the demo at url
// URL: http://www.softcomplex.com/products/tigra_menu_tree/
// Version: 1.1
// Date: 11-12-2002 (mm-dd-yyyy)
// Notes: This script is free. Visit official site for further details.

function tree (a_items, a_template) {

    this.a_tpl = a_template;
    this.a_config = a_items;
    this.o_root = this;
    this.a_index = [];
    this.o_selected = null;
    this.n_depth = -1;

    var o_icone = new Image(),
        o_iconl = new Image();
    o_icone.src = a_template['icon_e'];
    o_iconl.src = a_template['icon_l'];
    a_template['im_e'] = o_icone;
    a_template['im_l'] = o_iconl;
    for (var i = 0; i < 64; i++)
        if (a_template['icon_' + i]) {
            var o_icon = new Image();
            a_template['im_' + i] = o_icon;
            o_icon.src = a_template['icon_' + i];
        }

    this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };
    this.select = function (n_id) { return this.a_index[n_id].select(); };
    this.mout = function (n_id) { this.a_index[n_id].upstatus(true) };
    this.mover = function (n_id) { this.a_index[n_id].upstatus() };

    this.a_children = [];
    for (var i = 0; i < a_items.length; i++)
        new tree_item(this, i);

    this.n_id = trees.length;
    trees[this.n_id] = this;

    for (var i = 0; i < this.a_children.length; i++) {
        document.write(this.a_children[i].init());
        this.a_children[i].open();
    }
}
function tree_item (o_parent, n_order) {

    this.n_depth = o_parent.n_depth + 1;
    this.a_config = o_parent.a_config[n_order + (this.n_depth ? 2 : 0)];
    if (!this.a_config) return;

    this.o_root = o_parent.o_root;
    this.o_parent = o_parent;
    this.n_order = n_order;
    this.b_opened = !this.n_depth;

    this.n_id = this.o_root.a_index.length;
    this.o_root.a_index[this.n_id] = this;
    o_parent.a_children[n_order] = this;

    this.a_children = [];
    for (var i = 0; i < this.a_config.length - 2; i++)
        new tree_item(this, i);

    this.get_icon = item_get_icon;
    this.open = item_open;
    this.select = item_select;
    this.init = item_init;
    this.upstatus = item_upstatus;
    this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}

function item_open (b_close) {
    var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
    if (!o_idiv) return;

    if (!o_idiv.innerHTML) {
        var a_children = [];
        for (var i = 0; i < this.a_children.length; i++)
            a_children[i]= this.a_children[i].init();
        o_idiv.innerHTML = a_children.join('');
    }
    o_idiv.style.display = (b_close ? 'none' : 'block');

    this.b_opened = !b_close;
    var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
        o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
    if (o_jicon) o_jicon.src = this.get_icon(true);
    if (o_iicon) o_iicon.src = this.get_icon();
    this.upstatus();
}

function item_select (b_deselect) {
    if (!b_deselect) {
        var o_olditem = this.o_root.o_selected;
        this.o_root.o_selected = this;
        if (o_olditem) o_olditem.select(true);
    }
    var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
    if (o_iicon) o_iicon.src = this.get_icon();
    get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : 'bold';

    this.upstatus();
    return Boolean(this.a_config[1]);
}

function item_upstatus (b_clear) {
    window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}

function item_init () {
    var a_offset = [],
        o_current_item = this.o_parent;
    for (var i = this.n_depth; i > 1; i--) {
        a_offset[i] = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absbottom">';
        o_current_item = o_current_item.o_parent;
    }
    return '<table cellpadding="0" cellspacing="0" border="0"><tr><td wrap>' + (this.n_depth ? a_offset.join('') + (this.a_children.length
        ? '<a href="javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover=" trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absbottom" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>'
        : '<img src="' + this.get_icon(true) + '" border="0" align="absbottom">') : '')
        + '<a href="' + this.a_config[1] + '" target="' + this.o_root.a_tpl['target'] + '" onclick="return trees[' + this.o_root.n_id + '].select(' + this.n_id + ')" ondblclick="trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')" class="t' + this.o_root.n_id + 'i" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absbottom" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + '</a></td></tr></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}
function item_get_icon (b_junction) {
    return this.o_root.a_tpl['icon_' + ((this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}

var trees = [];
get_element = document.all ?
    function (s_id) { return document.all[s_id] } :
    function (s_id) { return document.getElementById(s_id) };

3. This is code for tree_items.js
/*
    the format of the tree definition file is simple,
    you can find specification in the Tigra Menu documentation at:

    http://www.softcomplex.com/products/...html#hierarchy
*/

var TREE_ITEMS = [
    ['Module', 0,
     ['Learning Units', 0,
['LU1','http://google.co.in/',],
['LU2'],

            ['Notes', 0,
                ['Description'],
                ['Lab', 0,

                    ['Exp1'],
                    ['Exp2'],
                    ['Exp3'],

                 ]
            ],

    
        ]
     ]
                 ];
4. This is code for tree_tpl.js
/*
    Feel free to use your custom icons for the tree. Make sure they are all of the same size.
    User icons collections are welcome, we'll publish them giving all regards.
*/

var TREE_TPL = {
    'target' : '_self', // name of the frame links will be opened in
                            // other possible values are: _blank, _parent, _search, _self and _top

    'icon_e' : 'icons/empty.gif', // empty image
    'icon_l' : 'icons/empty.gif', // vertical line

        'icon_32' : 'icons/base.gif', // root leaf icon normal
        'icon_36' : 'icons/base.gif', // root leaf icon selected

    'icon_48' : 'icons/folder.gif', // root icon normal
    'icon_52' : 'icons/foldersel.gif', // root icon selected
    'icon_56' : 'icons/folder.gif', // root icon opened
    'icon_60' : 'icons/foldersel.gif', // root icon selected

    'icon_16' : 'icons/folder.gif', // node icon normal
    'icon_20' : 'icons/foldersel.gif', // node icon selected
    'icon_24' : 'icons/folderopen.gif', // node icon opened
    'icon_28' : 'icons/foldersel.gif', // node icon selected opened

    'icon_0' : 'icons/page.gif', // leaf icon normal
    'icon_4' : 'icons/pagesel.gif', // leaf icon selected

    'icon_2' : 'icons/empty.gif', // junction for leaf
    'icon_3' : 'icons/empty.gif', // junction for last leaf
    'icon_18' : 'icons/plus.gif', // junction for closed node
    'icon_19' : 'icons/plus.gif', // junctioin for last closed node
    'icon_26' : 'icons/minus.gif',// junction for opened node
    'icon_27' : 'icons/minus.gif' // junctioin for last opended node
};

Waing for your quick reply and thanks in advance and pls give me detailed instructions to insert code for extra attribute as i mentioned in my previous post.
Regards,





Similar Threads
Thread Thread Starter Forum Replies Last Post
Urgent:hard disk serial code and vb code ivanlaw Pro VB 6 0 July 25th, 2007 04:05 AM
VB: .Exe file, serial code and activation code ivanlaw Pro VB 6 8 July 6th, 2007 05:44 AM
code clinic - Why wont example asp code work? jardbf Classic ASP Basics 3 April 27th, 2006 06:22 PM
Writing Client Side Script from Code-Behind code sajid_pk Classic ASP Databases 1 January 18th, 2005 12:53 AM
disable forum code within [code] blocks? nikolai Forum and Wrox.com Feedback 0 October 23rd, 2003 07:52 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.