Start Building Professional
Web Apps Today

Toolbar Image Buttons visibility.

Hello. I have a problem when creating a toolbar and hiding some buttons.

goto the string marked !!!!!!!!!!!!!!!!!!!!!!!!!!!!!++++++ the explanation is over there.
I also can send you a full usecase exmple if you can give me a email, where I can sent to.
Thank You.

My js file looks like.
zen_toolbar.js
=============================

var mainToolBar;
var signupToolBar;

// ==== Constants =======
var DEFAULT_TOOLBAR_HEIGHT = '30px';

//menu's ids
var FILEBOX = 'filebox';
var TOOLBOX = 'toolbox';
var SQUAWKBOX = 'squawkbox';
var SANDBOX = 'sandbox';
var FILES = 'files';
var RESOURCES = 'resources';
var MY_PROFILE = 'my_profile';
var GROUPS = 'groups';
var PORTAL = 'portal';
var FRIENDS = 'friends';
var HELP = 'help';
var SIGN_OUT = 'sign_out';

/**
* Basic toolbar creation method.
*/
function createToolbar(userName) {
mainToolBar = new dhtmlXToolbarObject(document.getElementById('toolbar_zone'), '100%', DEFAULT_TOOLBAR_HEIGHT, "User Name(in sen._toolbar.js)");
mainToolBar.setOnClickHandler(onButtonClick);
mainToolBar.loadXML("init_xmls/basetoolbar.xml")
mainToolBar.setTitleText(userName)
mainToolBar.showBar();

signupToolBar = new dhtmlXToolbarObject(document.getElementById('sign_up_zone'), '100%', DEFAULT_TOOLBAR_HEIGHT, "");
signupToolBar.setOnClickHandler(onButtonClick);
signupToolBar.loadXML("init_xmls/signintoolbar.xml")
signupToolBar.showBar();

initFileBoxButtons(); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!++++++ Here I'm calling the method that should make some buttons invisible
// but these buttons stay visible in FF and Opera for some reason(in IE everythig forks fine). But when I run the debug mode in FF everuthing works fine.

}

/**
* Function that catches the events whe button clicked.
*/
function onButtonClick(itemId, itemValue) {
switch (itemId)
{
case FILEBOX:
initFileBoxButtons();
break;
case TOOLBOX:
initToolBoxButtons();
break;
case SQUAWKBOX:
initSquawkBoxButtons();
break;
case SANDBOX:
initSandBoxButtons();
break;
case FILES:
alert(FILES);
break;
case RESOURCES:
alert(RESOURCES);
break;
case MY_PROFILE:
alert(MY_PROFILE);
break;
case GROUPS:
alert(GROUPS);
break;
case PORTAL:
alert(PORTAL);
break;
case FRIENDS:
alert(FRIENDS);
break;
case HELP:
alert('Help is comming soon');
break;
case SIGN_OUT:
document.location = "login.do?method=logout";
break;
default:
alert('Nothing was found');
}
}

/**
* Leaves visible only buttons that correspond to filebox
*/
function initFileBoxButtons() {
mainToolBar.showItem(FILES);
mainToolBar.showItem(RESOURCES);
mainToolBar.hideItem(MY_PROFILE);
mainToolBar.hideItem(GROUPS);
mainToolBar.hideItem(PORTAL);
mainToolBar.hideItem(FRIENDS);
}

/**
* Leaves visible only buttons that correspond to toolbox
*/
function initToolBoxButtons() {
mainToolBar.hideItem(FILES);
mainToolBar.hideItem(RESOURCES);
mainToolBar.showItem(MY_PROFILE);
mainToolBar.showItem(GROUPS);
mainToolBar.showItem(PORTAL);
mainToolBar.hideItem(FRIENDS);
}

/**
* Leaves visible only buttons that correspond to squawkbox
*/
function initSquawkBoxButtons() {
mainToolBar.hideItem(FILES);
mainToolBar.hideItem(RESOURCES);
mainToolBar.hideItem(MY_PROFILE);
mainToolBar.hideItem(GROUPS);
mainToolBar.hideItem(PORTAL);
mainToolBar.showItem(FRIENDS);
}

/**
* Leaves visible only buttons that correspond to sandbox
*/
function initSandBoxButtons() {
mainToolBar.hideItem(FILES);
mainToolBar.hideItem(RESOURCES);
mainToolBar.hideItem(MY_PROFILE);
mainToolBar.hideItem(GROUPS);
mainToolBar.hideItem(PORTAL);
mainToolBar.hideItem(FRIENDS);
}


init_xmls/basetoolbar.xml
=======================================

<?xml version='1.0' encoding='iso-8859-1'?>
<toolbar name="User Name" width="100%" height="100%" disableType="image" absolutePosition="auto" toolbarAlign="left">
<ImageButton src="img/tools/toolbar/filebox.gif" height="30" width="30" id="filebox" tooltip="FileBox"/>
<ImageButton src="img/tools/toolbar/toolbox.gif" height="30" width="30" id="toolbox" tooltip="ToolBox"/>
<ImageButton src="img/tools/toolbar/squawkbox.gif" height="30" width="30" id="squawkbox" tooltip="SquawkBox"/>
<ImageButton src="img/tools/toolbar/sandbox.gif" height="30" width="30" id="sandbox" tooltip="SandBox" hidden="true"/>
<divider id="div_1"/>
<ImageButton src="img/tools/toolbar/files.gif" height="30" width="30" id="files" tooltip="Files"/>
<ImageButton src="img/tools/toolbar/resources.gif" height="30" width="30" id="resources" tooltip="Resources"/>
<ImageButton src="img/tools/toolbar/myprofile.gif" height="30" width="30" id="my_profile" tooltip="My Profile"/>
<ImageButton src="img/tools/toolbar/groups.gif" height="30" width="30" id="groups" tooltip="Groups"/>
<ImageButton src="img/tools/toolbar/portal.gif" height="30" width="30" id="portal" tooltip="Portal"/>
<ImageButton src="img/tools/toolbar/friends.gif" height="30" width="30" id="friends" tooltip="Friends"/>
</toolbar>


text.html

===============================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/dhtmlxtoolbar.css"/>
<script src="js/dhtmlxcommon.js"></script>    
<script src="js/dhtmlxprotobar.js"></script>
<script src="js/dhtmlxtoolbar.js"></script>
<script src="js/zen_toolbar.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; border-collapse:collapse;">
<tr>
<td style="height: 20px; width:100%;" class="rootmenu" colspan="2">
<table cellspacing="0" cellpadding="0" border="0" class="rootmenuitem">
<tr height="30px">
<td>
<div id="toolbar_zone" style="width:100%; border :1px solid Silver; float:left"/>
</td>
<td>
<div id="sign_up_zone" style="width:80px; border :1px solid Silver; float:right"/>
</td>
</tr>
</table>
<script>createToolbar('Some Name');</script>
</body>
<html>

Data loading is async, in your case code executed when XML with configuration not loaded yet. 
To resolve issue rewrite your code as 

signupToolBar.loadXML("init_xmls/signintoolbar.xml",function(){
         //code here will be called only after xml loading
         initFileBoxButtons();
}) ;
signupToolBar.showBar();