locked
Gadget style sheet and background image switching. RRS feed

  • Question

  • I've got a gadget that I would like the user to select options on the settings panel, and based on those choices change both the background image of the gadget (in some cases making it larger), as well as switching out the style sheets.  I've got the code set up for this, but the switching that I'm doing on the style sheets (stylesheet.disable = false or true) isn't working.

    Anyone do this yet?

    Friday, March 28, 2008 6:50 PM

Answers

  • Unfortunately, you can't change the gadget background or size through stylesheets.  You will have to set them manually.

    The way I've got around this in the past, is to use dummy CSS elements to hold the background and body sizes.  ie.

    Code Snippet

    <DIV id="divBodySize" class="size" style="display:none"></DIV>
    ...
    document.body.style.height = parseInt(divBodySize.currentStyle["height"]);
    document.body.style.width = parseInt(divBodySize.currentStyle["width"]);


    Monday, March 31, 2008 4:46 PM
  • "Gadgets are right justified on the Sidebar" - not exactly.  Gadgets are aligned from the top, left based on their width and height.
    Thursday, April 24, 2008 8:33 PM

All replies

  • Unfortunately, you can't change the gadget background or size through stylesheets.  You will have to set them manually.

    The way I've got around this in the past, is to use dummy CSS elements to hold the background and body sizes.  ie.

    Code Snippet

    <DIV id="divBodySize" class="size" style="display:none"></DIV>
    ...
    document.body.style.height = parseInt(divBodySize.currentStyle["height"]);
    document.body.style.width = parseInt(divBodySize.currentStyle["width"]);


    Monday, March 31, 2008 4:46 PM
  • Thanks for the answer!  It's what I figured I'd end up doing, but I was hoping for something else!

    So you dont have the image defined in the style sheet?

    I tried that to start out but ran into an issue when using a flyout.  When you click on the flyout button, and as the flyout is coming out, the gadget goes black until the flyout is done.  When the flyout is displayed, the gadget redraws itself.

    That's why my background image is in the style sheet.  Have you come across that?

    Wednesday, April 2, 2008 3:53 AM

  • So here's an update to what I've done.  I've removed the image out of the style sheet and put it back into the document.  I've created a div in the document now that has the image in that.  I can switch that out when I need to.  As for the style sheet, tha's being switched by changing the document's listed styles when I get that option selected.

    The image flashing thing, I cant seem to get that one yet.

    Also, the gadgets are right justified on the sidebar, correct?

    Tuesday, April 8, 2008 7:55 PM
  • "Gadgets are right justified on the Sidebar" - not exactly.  Gadgets are aligned from the top, left based on their width and height.
    Thursday, April 24, 2008 8:33 PM
  • You can also just set the background image with javascript and/or use a variable for changing the images.

     

    Code Snippet

    System.Gadget.document.body.style.background = "url('Images/Themes/" + Theme + "/BG-Main.png') no-repeat";

     

     

    Image flashing on the sidebar is sometimes due to loading the image (the sidebar is connected to IE).
    Tuesday, April 29, 2008 11:57 PM