Vista Sidebar Gadget, Transparent Backgrounds, and Font Color

by filip 9. May 2008 09:30

gadgetssWe've had a request from a client to build a Windows Vista Sidebar Gadget.  The background on the gadget is to be somewhat see-through.  So I've played around with gadgets, and noticed that when I make a semi-transparent background on the gadget, the font color gets all messed up.  For example, I wanted white text on a blue background with 50% opacity, and the font appeared blueish, even though it was supposed to be white.  If I turn off the opacity on the background, the font becomes white, but as long as there's opacity, the font is messed up.

Well, after doing some research, it appears there is a way to display the proper font color on transparent backgrounds, although I didn't find this anywhere on the Microsoft site.  The trick is to use JavaScript and the addTextObject() method.  Here's an example of some code, and the resulting gadget:

 

 1: <html> 
 2:   <head> 
 3:     <title>Sample Gadget</title> 
 4:     <style> 
 5:       body { width: 120px; height: 200px; font-size: 12px; margin: 0; font-family: Verdana; color: #FFFFFF; } 
 6:       .gadget { margin: 3px; } 
 7:     </style> 
 8:   </head> 
 9:   <body> 
 10:     <div class="gadget"> 
 11:       <div>This text is not white.</div> 
 12:     </div> 
 13:     <g:background id="background" src="images\bgblue.png" style="width:100%;height:100%;z-index: -1; position: absolute; top: 0; left: 0;" opacity="50"></g:background> 
 14:     <script language="javascript" type="text/javascript">
 1: document.getElementById("background").addTextObject("This text is white.", "Verdana", 12, "white", 3, 50);
</script> 
 15:   </body> 
 16: </html>

Tags: ,

Windows Development

'AjaxControlToolkit' is undefined (javascript)

by filip 8. May 2008 13:14

I got this annoying error recently in a website I've been working on.  It worked perfectly fine locally, it worked fine after uploading to the web server on my machine and other machines in the lab (various browsers).  Then, it turns out, it doesn't work on (one of) the client's machines.  Of course, I'm unable to replicate the error locally.

I looked around and it seems the first solution was to clear the cache.  A lot of people said that Ctrl+F5 works, others said they needed to manually clear the cache and then restart the browser.  Well, neither of those worked.

Fortunatelly, the solution turned out to be pretty easy:  Set the "CombineScripts" property of the ToolkitScriptManager to false.

 <ajaxToolkit:ToolkitScriptManager runat="server" ID="ajaxScriptManager" EnablePartialRendering="true" CombineScripts="false" />

Tags: , ,

Web Development | Web Development

Bloodforge Band

Looking for the Bloodforge band site? Click here.

About Filip Stanek

Death Note Pic I'm a developer at ACG in Cincinnati, OH. I like ASP.NET, Flash, and other web technologies, & enjoy playing chess, video games, etc.

Currently playing:

Disqus

Month List