Resizing Gadgets using the Larger Size/Smaller Size Button

[mcheek]

I'm wanting to resize my gadget I developed with the Larger Size/Smaller button. Currently, I have two separate main gadget html files. The only difference between them is the background image, size, and the orientation of the icons.

I noticed other built-in gadgets like Weather and CPU meter have this option, but I do not know how to adapt that to my gadget

I attached screen shots of my gadget (both have the flyout showing) so you can see the size difference.

 

[Airbot]

Referring to the docked and floating states?

This might give you some idea to start with.

System.Gadget.onDock Event (Windows)
System.Gadget.onUndock Event (Windows)
System.Gadget Object (Windows)

 

[mcheek]

$(document).ready(function(){
 System.Gadget.onUndock = checkState;
 System.Gadget.onDock = checkState;
 checkState();
});

I have this in my js file to execute when the gadget opens, but I'm not sure this is working.

function checkState(){
 if (!System.Gadget.docked){ 
 
  with (document.body.style)
 {
  width = "200px";
  height = "255px";
 }
 background.style.width = "200px";
 background.style.height = "255px";
 background.src = "url(img/iMonBackground200.png.png)";
 }
 
 else if(System.Gadget.docked){
  with (document.body.style)
 {
  width = "130px";
  height = "166px";
 }
 background.style.width = "130px";
 background.style.height = "166px";
 background.src = "url(img/iMonBG.png)";
 }
}

This is the rest of the code in my js file. What do I need to do in my HTML file? Do I need to get rid of the background path and let the js file assign it?


EDIT: It is working now, I had the line

System.Gadget.visibilityChanged = checkVisibility;

but no function associated with it. Got rid of the line, and it works!