Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Dries on Nov 22, 2009 03:22
open dhtmlx forum
toolbar image still visible after hiding button

Hello,

In IE7 I have a problem, when I hide a button on the toolbar, the button is not visible anymore, but the button image is still visible.
So when I hide a lot of buttons, you have a lot of single images on the toolbar with space in between.
When you go over the image with your mouse, the image disappears as well. In Firefox it works just fine.

Could there be any reason why the image does not hide?

Thanks,
Dries
Answer posted by Alex (support) on Nov 23, 2009 02:05

Hello, 

the issue wasn't reproduced locally. Does it reproduced in the standard samples, for example http://www.dhtmlx.com/docs/products/dhtmlxToolbar/samples/03_button/02_manipulation.html ?

Answer posted by Dries on Nov 24, 2009 12:20

Hello Alex,

I'm sorry, maybe I should have given you some more information. The problem does not occure in the standard sample. Also when I open this html file localy, the problem does not occure.
I'm using the toolbar, attached to a layout.

I have an index page in php where I create the layout. then I attach the toolbar to the right window. Here's the code.

var dhxLayout;
var dhxBar;
var dhxAccord;
  
function init() {
   //create the interface
        dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
   //create the left window where the menus will be shown
       dhxLayout.cells("a").setText("Menu");
       dhxLayout.cells("a").setWidth(245);
   //create the accordion menu and attach the menus
      dhxAccord = dhxLayout.cells("a").attachAccordion();
      dhxAccord.setIconsPath("../images/icons/16/");
      dhxAccord.addItem("a1", "Web CMS");
      dhxAccord.cells("a1").setIcon("web_pages.gif");
      dhxAccord.cells("a1").attachURL("menu_trees/tree_siteface.php");
      dhxAccord.addItem("a2", "File Manager");
      dhxAccord.cells("a2").setIcon("folder.gif");
      dhxAccord.cells("a2").attachURL("menu_trees/tree_filemanager.php");
   //create the right window
      dhxLayout.cells("b").setText("Web Content Management System");
         dhxLayout.cells("b").attachObject("frmWindow");  //this is an iframe
   //create the toolbar with all the buttons and attach it to the right window
       dhxBar = dhxLayout.cells("b").attachToolbar();
       dhxBar.setIconsPath("../images/icons/16/");
       dhxBar.addButton(1, 1, "<?php echo $G_LANG["add"];?>", "add.gif", ""); 
       dhxBar.addButton(2, 2, "<?php echo $G_LANG["change"];?>", "save.gif", ""); 
       dhxBar.addButton(3, 3, "<?php echo $G_LANG["addrow"];?>", "ins_row_below.gif", ""); 
       dhxBar.addButton(4, 4, "<?php echo $G_LANG["upload"];?>", "upload.gif", ""); 
       dhxBar.addButton(5, 5, "<?php echo $G_LANG["send"];?>", "mail.gif", ""); 
       dhxBar.addButton(6, 6, "<?php echo $G_LANG["print"];?>", "printer.gif", ""); 
       dhxBar.addButton(7, 7, "<?php echo $G_LANG["checkall"];?>", "check_all.gif", ""); 
       dhxBar.addButton(8, 8, "<?php echo $G_LANG["uncheckall"];?>", "uncheck_all.gif", ""); 
       dhxBar.addButton(9, 9, "<?php echo $G_LANG["delete"];?>", "remove.gif", ""); 
       dhxBar.addButton(10, 10, "<?php echo $G_LANG["search"];?>", "search.gif", ""); 
       dhxBar.addButton(11, 11, "<?php echo $G_LANG["removesearch"];?>", "search_remove.gif", ""); 
       dhxBar.addButton(12, 12, "<?php echo $G_LANG["cancel"];?>", "back.gif", ""); 
   //open the general cms menu in the accordion
      dhxAccord.openItem("a1"); 
        
}

Then I have two functions to show or hide the required buttons and a function to hide the complete toolbar.

function hideButtons(){
   dhxBar.forEachItem(function(itemId){
    dhxBar.hideItem(itemId);
   });
}
  
function showButton(id){
   dhxBar.showItem(id);
}

function setToolbar(tbVisible){
   if (tbVisible == 'true')
   {
    dhxLayout.cells("b").showToolbar();
   }else{
    dhxLayout.cells("b").hideToolbar();
   }
 }

When this page is opened, I call two functions to create the whole layout, to hide the toolbar.
<body onLoad="init();setToolbar('false');>

In the accordion, I have a separate menu (tree-view). When you click on one of the menus, the page will be opened in iframe frmWindow, which is in the right window of the layout.
The page that opens, will tell the layout if the toolbar must be shown and which buttons will be visible.

For example in the menu is clicked on "new page", then in the iframe page "new_page.php" will be opened. In the header section of this page I have next function :

function setMenu(){
 //this makes the toolbar visible in the index page.
 parent.setToolbar('true');
 //first hide all the buttons and then show only the required buttons
 parent.hideButtons();
 parent.showButton(2);
 parent.showButton(12);
}

In the body section, this function is called :
<body onLoad="setMenu();">

This works great. The buttons are hided and only the required buttons are vissible. BUT, unfortunately the images of all the hidden buttons are still visible in IE, not in firefox.
When you go over the images, they disappear.

Answer posted by Alex (support) on Nov 25, 2009 02:23

Hello,

please check attached sample. Unnecessary images aren't shown after toolbar is displayed.

Attachments (1)
layout_toolbar.zip90.15 Kb
Answer posted by Dries on Dec 03, 2009 14:19

Hello Alex,

Thanks, that sample works just fine. Also when I copy the sample and modify little things, the sample still works.
But after the accordion has been attached to one of the layouts, the problem appears. I'm not sure of the problem is directly linked to the accordion, but attached you can find an example with the problem.

The toolbar has 4 buttons. When you click on "show toolbar", button 1, 3 and 4 should be hidden and buton 2 should only be shown.
You will see that the text from button 1, 3 and 4 is hided, but the icons are still visible. Also you will see under the icon from button 2 the icon from button 1.
When you hover over the icons from button 3 and 4, they disappear.

Best regards,
Dries

Attachments (1)
sample.zip96.93 Kb
Answer posted by Alex (support) on Dec 04, 2009 02:42

Hello,

we have managed to recreate the issue. But we can't get the reason for it.

The possible solution is to move setToolbar('false') call from body onload to the init() function. The function should be called before dhxAccord.openItem("a1"); 

<body onLoad="init();">...

function init(){

  ...

  setToolbar('false');

  dhxAccord.openItem("a1"); 

}

Answer posted by Dries on Dec 04, 2009 07:24
Thanks! That did solve the problem for me.