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
Hello,
the issue wasn’t reproduced locally. Does it reproduced in the standard samples, for example dhtmlx.com/docs/products/dht … ation.html ?
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 :
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.
Hello,
please check attached sample. Unnecessary images aren’t shown after toolbar is displayed.
layout_toolbar.zip (88 KB)
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
sample.zip (94.7 KB)
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”);
…
function init(){
…
setToolbar(‘false’);
dhxAccord.openItem(“a1”);
}
Thanks! That did solve the problem for me.