I am currently trying to get a new gadget working but there is still one problem left.
In my gadget I am using a transparent png-file as the gadget's background. In the content area I placed a <div> also using a png-file with transparency. In those parts of the gadget where the two transparent areas are overlapping, I get a pink border.
Is there any solution for this issue
Thanks for your help!
Problems with two transparent background-images
Alessandro Camargo
Hi Jonathan, thanks for your quick reply.
The problem is the dynamic height of the <div> container.
The user can select which content should be displayed and thats why the whole gadget works with dynamic height.
Is there no way to use background-images with transparency in <div> containers within a gadget
Chris Fraelic
I am having the same problem and although changing the dimension of the gadget might help you would still see some pink/purple pixels if you have rounded cornes on you background image.
In my case I have 3 images for background a top image, a middle image and a bottom image. Top and bottom are fixed size, but the middle one is an image that I want to repeat so it fills all the space in the middle of the gadge to make it resizable.
One thing I tried was using multiple <g:background> tags with different z-indexes, but this only partially worked for me (might actually work for you).
AllisonH
Not sure if this will help you but I have been reworking a Digital Clock and
I wanted some of the themes for it to be transparent, layering the images
into one g:background canvas worked but then the numbers needed to update
and after a bit of looking I came upon g:background.removeObjects();
Code looks like this:
main gadget code
<body onLoad="init()">
<g:background id="clockSkin" src="images/skins/blank.png" style="position:absolute;top:0;left:0;z-index:-999" />
</body>
Seperate JS file with following code
// addImageObject( imageFile, x, y )
function loadImages(h,m,s)
{
clockBg = skinPath + "bg.png";
clockSkin.addImageObject(clockBg, 0, 0);
nLeftX = PosX[skinNo];
nTopY = PosY[skinNo];
cb = skinPath + "b.png";
ch = skinPath + h + ".png";
clockSkin.addImageObject(cb, nLeftX, nTopY);
clockSkin.addImageObject(ch, (nLeftX+19), nTopY);
clockColon = skinPath + "cn.png";
clockSkin.addImageObject(clockColon, (nLeftX+38), (nTopY+2));
cz = skinPath + "0.png";
cm = skinPath + m + ".png";
clockSkin.addImageObject(cz, (nLeftX+49), nTopY);
clockSkin.addImageObject(cm, (nLeftX+67), nTopY);
clockGloss = skinPath + "gloss.png";
clockSkin.addImageObject(clockGloss, 0, 0);
}
function init()
{
clockSkin.removeObjects();
setSettings();
loadImages(hours,minutes,seconds)
setTimeout("init()",1000)
}
Each time the setTimeout loop runs the first thing that happens is the images are removed from the
canvas except the initial one you specify which for me is a completely transparent png, then the
images are loaded according to whatever checks you have in place, mine are 1st if the theme
has been changed, 2nd if any of the digits need to updated to a new time. The update of the
graphics is seemless. ie you don't see it happening but no pink fringes :)
Possibly something similar checks could be done for resizing
Umair-Shahzad
<head>
function init() {
...
<body onload="init()">
davidw
Just change the size of the Gadget via:
gback.height = x;
gback.width = x;
If you post the code, I'll recode it for you.