New Media Fun

Having fun in an online world

Archive for the ‘HTML’ Category

PNG Transparency Fix

Posted by admin under HTML, Internet

For those web developers who have the unfortunate task of designing with IE 6 in mind. Designs we encounter might make use of PNG files with transparency.

Internet Explorer 6 on its own doesn’t support PNG files with transparency. In order to make the transparencies work, you need to implement a fix that will allow the transparencies to work properly.

This is easily said than done.

A recent web design I was coding into HTML required the body of the content had to be transparent and allow the website background to show through. My challenges were that all the navigational images had to be transparent and the repeating background of the content box was semi-transparent and added a shadow around the content box.

I am a big fan of jQuery and naturally I try to find existing plug-ins that can be an effective solution to solve my problem. My search for jQuery PNG fix lead me to two possibilities:

  1. DD_belatedPNG
  2. PNG-Transparency for Windows IE 5.5 & 6

These plug-ins are great and work well for simple PNG fixes of individual images. However, I consistently encountered issues with repeating background images. This dilemma lead me to TwinHelix.

TwinHelix’s PNG solution is unique in that it uses the CSS to call an htc file. The file iepngfix.htc is referenced in the CSS:

.pngIMG{
 behavior: url(js/iepngfix.htc);
}

In my CSS, I reference to “pngIMG” class which will apply the fix to any image that requires the fix. Most importantly, this method allow me to have repeating background images displayed properly. Definitely, my first choice for fixing PNG issues.

NOTE: If you are repeating a background image, the smaller the image, the more intense the fix is on the browser. Thus a slower fix result. My solution to that is to have a broader background PNG to repeat a lot faster.

Just a quick tip for those in ActionScript 3 who need to convert a color stored as a uint variable.

Today, I was working with a variable that was storing a Hexadecimal color in a uint format. That is great for applying color throughout flash. But I wanted to apply the color to a TextField that was being styled by CSS. CSS needs to read a string in Hexadecimal format.

The color is:

var myColor:uint = 14540253;

To convert to a HEX String value:

var myHEXColor:String = "#" + myColor.toString(16);
//myHEXColor = #dddddd

Pretty easy eh! Now you can plug that right into a CSS TextField.

The students at NorQuest College are getting free email this September. They will have their accounts hosted by Google and by default, their birthdays are the passwords to initially access the Gmail accounts.

Now, I for one find it confusing which birthday format to use; is it “MMDDYY”, “DDMMYY” or “YYMMDD”. It really could be endless.

So this is where jQuery steps in. My task was to create a simple AJAX application that will let the user select their birthday from drop down menus and the password will be dynamically generated for the user to copy and paste for Gmail access.

To use the code create a DIV that will hold the password generator:

<div id="passDate">Password Generator Here</div>

Use jQuery to run the code:

$(document).ready(function(){
   $('#passDate').datePassword();
});

The end result is like this:
Birthday Password Generator

Birthday Password Generator

Birthday Password Generator 3

Birthday Password Generator 4

You can see a working version of this at My NorQuest

The Date Password plug in can be downloaded here

jQuery datePassword plug in

Any comments or suggestions for the datePassword plug-in, I would love to hear from you. :)

The other day I was working on a jQuery browser app that builds a glossary from an XML file. This particular app requires running off a hard drive or a CD in Internet Explorer 6 (Ya, I know. The facility has computer limitations in place).

Everything was going fine until I realized that the XML wasn’t being parsed properly in Internet Explorer (all versions) off of the hard drive. There was no problems when working via a network connection.

Here is the code I was using to parse the XML before I realized the problem:

1
2
3
$.get('xml/myXML.xml', {}, function(xml){
 // parse the XML
}

After some investigation, I discovered there is some security settings in IE that prevents data being parsed directly off of the hard drive. So I had to re-work how I parsed the XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
 url: 'xml/myXML.xml',
 dataType: ($.browser.msie) ? "text" : "xml",
 timeout: 1000,
 error: function(data){
  alert('Error occurred loading the XML');
 },
 success: function(data){
  var xml;
  if (typeof data == "string") {
   xml = new ActiveXObject("Microsoft.XMLDOM");
   xml.async = false;
   xml.loadXML(data);
  } else {
   xml = data;
  }
 // parse the xml
});

What happens is that the XML gets loaded into IE as a text object, then gets converted into usable XML data. Any other browsers get the XML data directly.

So many small little things that you have to go through because of the browser wars. I wish Internet Explorer would just disappear sometimes.