Hi, I am creating a gadget that will have a height that can very, (it will contain a list, and the length of the list dictates the height of the gadget) and I would like to know how i can achieve a drop shadow for the gadget.
I can add a dropshadow to the png file that is used for the background of the body, this would work if it was a fixed size. Since I need the height to grow, this won't work. So I have tried setting the background image to a transparent png file and added a table to the html that has a top png, middle png and bottom png as backgrounds in the table cells, these pngs have transparent dropshadows.
When it renders, what should be transparent on the pngs in the table, it shows up pink.
Any help/info/advice would be greatly appreciated.
Thanks
drop shadow?
aa807
Thanks Palaroid it works fine, only the size is a problem.
//resize it
bodyImageSurroundBlur.width=document.body.style.width; // document.body.style.width = ""
bodyImageSurroundBlur.height=document.body.style.height; // document.body.style.height = ""
document.body.style.width and document.body.style.height are empty strings
EWGoforth
Amazon Sidebar Tool uses a similar method, inspired by Jonathan Abbott's Polaroid. I discovered the same problem you're having but, setting the width and height in an onload event allows you to collect them again later.
Andy
CTDATA
Using this method, you might run into the bug that causes the gadget to look glitchy and odd when you're moving it around. Ensure that nothing is placed on top of any semi-transparent area of the g:background - as the g:background shows through whilst the gadget is being moved.
Andy
Philippe Cand
The method I used was:
1. Create a <g:background> that's size is 100% width/height
2. Add a solid black image to it via addImageObject
3. Resize that image to match the body size
4. Add a softEdge blur to it
You'll need two images, one that's 100% transparent another that's 100% solid black. If you download Polariod, you can copy blank.png and border.png
The code looks something like:
gadget.html:
<g:background id="bodyBackground" src="blank.png" style="width:100%; height:100%" />
The code to set the dropshadow:
var blurBorder = 10; //Size of the dropshadow
//clear the g:background
bodyBackground.removeObjects();
//add the black image
bodyImageSurroundBlur = bodyBackground.addImageObject("border.png", 0, 0);
//resize it
bodyImageSurroundBlur.width=document.body.style.width;
bodyImageSurroundBlur.height=document.body.style.height;
//add the blur to get the dropshadow effect
bodyImageSurroundBlur.softEdge=blurBorder*1.1;
Vijay R
The problem primarily occurs when the Gadget loses focus.
FassaBortolo
Yeah, I was thinking that might be the approach.
Too bad they didn't just fully support png... :(
Thanks for the response!
-Zeb