How to change CSS of desktop gadget on docked and undocked

Question

Making desktop gadget and want to change the css file on docked and undocked. In fact, I am changing it in ondock and undock function, but it's not reflecting.

Answer 1

It's common practice to have two stylesheets, one for docked and one for undocked, and have only one of them enabled. The simplest solution is to attach to the onDock and onUndock events.

System.Gadget.onDock = System.Gadget.onUndock = function () {
    document.styleSheets["docked"].disabled   = !System.Gadget.docked;
    document.styleSheets["undocked"].disabled = System.Gadget.docked;
}

Note that if a rule applies height or width to the body element (and thusly, the gadget itself), that style isn't applied when the stylesheet is switched - you have to set body width and height separately.