Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Transparent PNGTransparent PNG
Previous
 
Next
New Post
6/20/2006 9:22 PM
 

I received and HTML design that I'm converting to a skin.  The background color changes often and told the designer that I would have liked a transparent image but gif never seem to work.  They told me a transparent PNG was the answer but had a limitation of not being compatible with IE < v7.  No worries, they had a Javascript that fixed the problem for IE.  The only problem is that I don't know where to put it.  I've seen a couple options...

1) Default.aspx - I don't want to crash my other site testing this and don't really have a good test environment.

2) Page Header Tags - Inserted the following goofed it up so bad that I had a severe Java error and had to delete it from the table because I could get the Settings to respond (that's why I'm afaid to put it in Default...)

3) Portal.ascx - I've seen reference to putting javascript here, but I don't seem to have this in my portal directory. 

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }   
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Any clue if this will work with DNN and if so where?

By the way, there are probably some other options to post this but I really think the transparent png can benefit a lot of skin designers and the typical responders here are awesome!

Thanks, Paul

 
New Post
6/21/2006 1:20 AM
 

I've been using a script written by, I think, nokiko on the old forum for a couple of years now. I put the following line in my default.aspx where the dnncore javascript files are loaded... <script language="javascript" src="<%= Page.ResolveUrl("dnnsleight.js") %>"></script>.

You'll also need a file called trans.gif which is a 1x1 pixel transparent gif. Both transparent.gif and dnnsleight.js are kept in the root directory of DNN. The code for dnnsleight.js is the following:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {

document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');

window.attachEvent("onload", fnLoadPngs);

}

function fnLoadPngs() {

var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');

var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {

if (itsAllGood && img.src.match(/\.png$/i) != null) {

fnFixPng(img);

img.attachEvent("onpropertychange", fnPropertyChanged);

}

img.style.visibility = "visible";

}

var nl = document.getElementsByTagName("INPUT");

for (var i = nl.length - 1, e = null; (e = nl[i]); i--) {

if (e.className && e.className.match(/\bimage\b/i) != null) {

if (e.src.match(/\.png$/i) != null) {

fnFixPng(e);

e.attachEvent("onpropertychange", fnPropertyChanged);

}

e.style.visibility = "visible";

}

}

}

function fnPropertyChanged() {

if (window.event.propertyName == "src") {

var el = window.event.srcElement;

if (!el.src.match(/x\.gif$/i)) {

el.filters.item(0).src = el.src;

el.src = "http://www.gmss.org/trans.gif";

}

}

}

function dbg(o) {

var s = "";

var i = 0;

for (var p in o) {

s += p + ": " + o[p] + "\n";

if (++i % 10 == 0) {

alert(s);

s = "";

}

}

alert(s);

}

function fnFixPng(img) {

var src = img.src;

img.style.width = img.width + "px";

img.style.height = img.height + "px";

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"

img.src = http://www.gmss.org/trans.gif;

}


 
New Post
6/27/2006 12:44 AM
 

Paul,

I'm using the exact same script you posted, quite successfully.  I've placed it into the js folder in the installation root, with the other javascripts, and I call it as an include in skins which use .png files:

<!--[if lt IE 7]><script src="/js/pngfix.js" type="text/javascript"></script><![endif]-->



Shane Miller
Call Centers 24x7
 
New Post
7/3/2006 2:51 PM
 

That was the missing piece.  I didn't know where or how.  Thanks!

 
New Post
7/19/2006 12:03 AM
 
I am having some trouble setting this up in my test environment. I know nothing about Java, but i know i need PNGs to work in ie.

I have pasted the code form the original post into a JS file and added that to my JS folder. I have pasted the call from this post into my html file and after i apply the skin and try to click the home menu item I get an error stating that the resource cannot be found.

Any help PLEASE! I am in the middle of developing this skin and need this working ASAP. What am I missing? Can someone post thier JS file so i can see if that is the issue?

This is the URL i get when I see the error:

http://localhost/dotnetnuke/Default.aspx?tabid=36&error=The+Controls+collection+cannot+be+modified+because+the+control+contains+code+blocks+(i.e.+%3c%25+...+%25%3e).&content=0

Thanks.
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Transparent PNGTransparent PNG


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out