Is it possible to manually change background color of a specific twostatebutton when the button is in on-state?
I mean instead of default.
Hello
How many buttons in the group you have and what skin do you use?
What state do you mean? Pressed?
Hi,
Sorry to have been unprecise.
The skin is:
Wiht ‘on’ I meant ‘pressed’.
At startup, that is ‘off-state’ or ‘unpressed’:
KARTAtoolbar1.addButtonTwoState(“mode-”, 10, “TITTA” + " " + " " + " " + " ", “eye.png”, “eye.png”);
KARTAtoolbar1.setItemToolTip(“mode-”, “Byt editormode”);
KARTAtoolbar1.disableItem(“mode-”);
item = KARTAtoolbar1.objPull[KARTAtoolbar1.idPrefix + “mode-”].obj;
item.style.backgroundColor = “#b4eeb4”;
When the button is pressed or ‘on-state’ (onoff = true ):
if (!onoff) { // titta
myKARTA.KARTAtoolbar1.setItemImage(“mode-”, “eye.png”);
myKARTA.KARTAtoolbar1.setItemText(“mode-”, “TITTA” + " " + " " + " " + " ");
item.style.color = “#000000”;
} else { // edit
myKARTA.KARTAtoolbar1.setItemImage(“mode-”, “pencil.png”);
myKARTA.KARTAtoolbar1.setItemText(“mode-”, “EDITERA”);
item.style.color = “#ff0000”;
}
This is as far as I have come but I am not comfortable with the outcome. I want the text and background color to change when in ‘on-state’ or ‘pressed’ mode, not color.
To set BackgroundColor like Color ( as above ) does not work.
I want to override the css in ‘pressed’ mode, but only for this item.
I am not clear what you mean by group. The toolbar consists of a number of different items, of which ‘mode-’ is one.
/BJDA
Thanks for your answer, but it did not solve my issue.
The issue is the background color in pressed state which I wish to control.
What I would like to do is this:
myToolbar.addButtonTwoState("mode-", 10, "TITTA" + " " + " " + " " + " ", "_green.gif", "_green.gif");
myToolbar.setItemToolTip("mode-", "Byt editormode");
// myToolbar.disableItem(“mode-”);
item = myToolbar.objPull[myToolbar.idPrefix + “mode-”].obj;
item.style.backgroundColor = “#b4eeb4”;
myToolbar.attachEvent("onBeforeStateChange", function(id, state){
if(id=="mode-"){
if (state==true) { // titta
myToolbar.setItemText("mode-", "TITTA" + " " + " " + " " + " ");
item.style.backgroundColor = "#b4eeb4";
} else { // edit
myToolbar.setItemText("mode-", "EDITERA");
item.style.backgroundColor = "#ff0000";
}
}
return true;
});
That is change text and backgroundColor according to state. BackgroundColor can be set in unpressed state but not in pressed state.
My original solution to this was to change color instead of backgroundColor because color can be set in pressed state.
It is no major problem but in this case change of backgroundColor would be a nicer solution.
/BJDA
Hi
please provide exact image for pressed button? (released button I suggest in native colors?)
Hi,
I believed this to be a pretty straightforward issue.
Declaration of TwoStateButton ‘-mode’:
KARTAtoolbar1.attachEvent(“onClick”, this.KARTAtoolbar1Event);
KARTAtoolbar1.attachEvent(“onStateChange”, this.KARTAtoolbar1Event);
KARTAtoolbar1.addButtonTwoState(“mode-”, 10, “TITTA” + " " + " " + " " + " ", “eye.png”, “eye.png”);
item = KARTAtoolbar1.objPull[KARTAtoolbar1.idPrefix + “mode-”].obj;
item.style.backgroundColor = “#b4eeb4”;
After ‘onStateChanged’ in function xx.KARTAtoolbar1Event ( as how it works now ):
if (!onoff) { // titta ( not pressed )
myKARTA.KARTAtoolbar1.setItemImage("mode-", "eye.png");
myKARTA.KARTAtoolbar1.setItemText("mode-", "TITTA" + " " + " " + " " + " ");
item.style.color = "#000000";
} else { // editeta ( pressed )
myKARTA.KARTAtoolbar1.setItemImage("mode-", "pencil.png");
myKARTA.KARTAtoolbar1.setItemText("mode-", "EDITERA");
item.style.color = "#ff0000";
}
The button is shown in ‘not-pressed state’ is in file dhtmlx1.gif, and in ‘pressed state’ in dhtmlx2.gif.
What I would like but cannot achieve is the button in ‘pressed’ state like in dhtmlx3.gif, and item.style.backgroundColor instead of item.style.color in the code snippet above.
BackgroundColor does not work in ‘pressed’ state.
/BJDA
Hi
sorry for long response.
please try attached demo. you need to change paths to dhtmlx.js/css in section. I know, it looks like a small ‘hack’ but no needs to add custom events, just css and real ids. make sure, ids are unique.
1.zip (871 Bytes)