Solved

IEpngfix.htc file causes all javascript to not respond

Posted on 2008-06-17
6
1,819 Views
Last Modified: 2010-04-21
I been working on this bug for days and finally narrowed the issue down to the iehtcpngfix.htc file. I noticed it when I first loaded browser tried to login in IE version 6 the png file didnt load then all my javascript started working magically again but after the png files where loaded properly javascript doesnt respond.

css code
##########################

img, div { behavior: url(design/js/iepngfix.htc); }

.search-wrapper .right { behavior:url(/design/js/iepngfix.htc); }
0
Comment
Question by:spotcher
  • 3
  • 2
6 Comments
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21801440
What is the javascript that isn't running properly?

Is this other functions aside from the PNGFix? there may be functions in the other javascript that's causing a conflict.

Can you add a link so I can dug test this?

Thanks
0
 
LVL 16

Expert Comment

by:hankknight
ID: 21802298
I had this trouble last year myself so I know exactly what you are talking about.

The problem is caused by a htc script that is used to make Ping images have an alpha transparency in Internet Explorer 5.5 and 6.  It is NOT needed on any other browsers.

I solved the problem by:
   1.  Replacing the htc code with in-line css code
   2.  Using a conditional statement so the special css code was only called by IE 5.5 and IE 6.
0
 
LVL 16

Expert Comment

by:hankknight
ID: 21802353
Add this code before you close your </head>

                  <!--[if IE 6]><style type="text/css" media="screen">@import "pngFix.css";</style><![endif]-->
                  <!--[if IE 5]><style type="text/css" media="screen">@import "pngFix.css";</style><![endif]-->

Create a css file called pngFix.css and add this:

                  .search-wrapper .right { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/image.png'); }

Make sure that the image path is absolute and begins with http:// because CSS and JS handle relative paths differently.
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:spotcher
ID: 21805875
the issue Im having is not getting the htc file to load its getting it not to crash all javascript. Once htc fix loaded javascript on site doesnt work, I wish I could provide a link to show but I signed a NDA so I cant. It also has nothing to do with browser detection because it doesnt crash in other browsers. Im still looking for the solution. I already know all different ways to load file and make it have browser detection but. Why this is such a big issue and Ill explain code a little more. I have a login box that popsup on a div tag and screen fades dims out the login box has a transparency and screen fade out has transparency this works great in all browsers who have png transparency. Once i try to load png transparency .htc file fix transparency issue, the java script to x out of the box doesnt respond and the input fields dont respond. I have ex code... but cant post link..

html div
####################################
<div class="dimming" name="windowcontent" id="windowcontent" style="position: absolute; top:20%; left:40%; display:none;">
            <form method="post" style="margin: 0px;" action="login.php" name="loginform" id="loginFormId">
                  <input name="act[login]" id="act[login]" value="Login" type="hidden">
                  <table align="center">
                  <tr>
                        <td align="left"><span class="blue_txt">LOG IN</span></td><td colspan="2" align="left"><span class="message_error" id="errorSpan" style="display: none;text-align: left;">Login error - wrong user name</span></td>
                        <td align="right" colspan="2"><span class="blue_txt"><a href="" onclick="hideDiv('windowcontent');return false;"><b>x</b></a> </span></td>
                  </tr>
                  <tr style="padding: 10px;">
                        <td><span class="blue_txt">USERNAME:</span></td>
                        <td>
                        <input style="padding: 6px 0px 0px 10px; background: url(design/pic/uname.jpg) center center no-repeat; height: 19px; width: 187px;" id="login1" name="login" value="" class="input" type="text"></td>
                        <td rowspan="2" style="padding: 6px 6px 5px 20px; background: url('design/pic/login_cell_bg.jpg') no-repeat right;">
                              <a onclick="tryLogin();return false;" onmouseout="changeImageMy('login_button','design/pic/login.jpg');return true;" onmouseover="changeImageMy('login_button','design/pic/login_over.jpg');return true;" href="#">
                                 <img id="login_button" name="act[login]" src="design/pic/login.jpg" alt="login">
                              </a>
                        </td>
                        
                  </tr>
                  <tr style="padding: 10px;">
                        <td><span class="blue_txt">PASSWORD:</span></td>
                        <td><input id="login2" name="pass" value="" class="input" style="padding: 6px 0px 0px 10px; background: url(design/pic/uname.jpg) center center no-repeat; height: 19px; width: 187px;" type="password"></td>
                  </tr>
                  </table>
            </form>
          <div style="display:none; vertical-align: middle; margin: 10px;" id="formhide2" align="center">                      
                <table class="pbar3" cellpadding="0" cellspacing="0" style="vertical-align: middle;">
                <tr>
                <td>
                      <span id="progress1">&nbsp; &nbsp;</span>
                      <span id="progress2">&nbsp; &nbsp;</span>
                      <span id="progress3">&nbsp; &nbsp;</span>
                      <span id="progress4">&nbsp; &nbsp;</span>
                      <span id="progress5">&nbsp; &nbsp;</span>
                      <span id="progress6">&nbsp; &nbsp;</span>
                      <span id="progress7">&nbsp; &nbsp;</span>
                      <span id="progress8">&nbsp; &nbsp;</span>
                      <span id="progress9">&nbsp; &nbsp;</span>
                </td>
                </tr>
                </table>      
                {literal}<script type="text/javascript">do_prog(9,200);</script>{/literal}
          </div>
</div>





 javascript
######################################################
                  function buildDimmerDiv()
                  {
                      document.write('<div id=\"dimmer\" name=\"dimmer\" class=\"dimmer\" style=\"width:'+ window.screen.width + 'px; height:' + window.screen.height +'px; display:none;\"><\/div>');
                  }
                  
                  
                  function hideDiv(id){                  
                        document.getElementById(id).style.display = "none";
                        document.getElementById('dimmer').style.visibility = "hidden";
                        document.getElementById('dimmer').style.display = "none";
                  }
                function displayWindow()
                {
                   var divId="windowcontent";
                   document.getElementById('dimmer').style.visibility = "visible";
                   document.getElementById('dimmer').style.display = "";
                   document.getElementById(divId).className = 'dimming';
                     document.getElementById(divId).style.visibility = "visible";
                     document.getElementById(divId).style.display = "";
                }
                function displayLocationWindow()
                {
                   var divId="changeLocatinWindow";
                   document.getElementById('changeLocatinWindow').style.visibility = "visible";
                   document.getElementById('changeLocatinWindow').style.display = "";
                   document.getElementById(divId).className = 'changeLocatinWindow';
                     document.getElementById(divId).style.visibility = "visible";
                     document.getElementById(divId).style.display = "";
                }
                  function hideLocationWindow(){                  
                        document.getElementById('changeLocatinWindow').style.display = "none";
                        document.getElementById('changeLocatinWindow').style.visibility = "hidden";
                        document.getElementById('changeLocatinWindow').style.display = "none";
                  }                
                function changeImageMy(imgId,imagePath){                
                      document.getElementById(imgId).src=imagePath;
                }                
      

external css file reference
###############################################################

img, div { behavior: url(design/js/iepngfix.htc); }

.search-wrapper .right { behavior:url(/design/js/iepngfix.htc); }
0
 
LVL 16

Accepted Solution

by:
hankknight earned 500 total points
ID: 21814685
Is the iepngfix.htc file the same one that can be downloaded here?
http://www.twinhelix.com/css/iepngfix/

If so there is a known conflict between certain versions of Windows and that code.
If you do a Windows update and get Service Pack 3 this problem should go away.  The better solution would be to eliminate the use of iepngfix.htc and replace its functionality  with filter:progid:DXImageTransform.Microsoft.AlphaImageLoader as outlined in my comment above.

0
 

Author Closing Comment

by:spotcher
ID: 31467888
Thanks, lots of help
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to init a part of Javascript based on PHP value for Datatables & Yadcf 8 48
div to fit another div 8 22
css selector 1 16
How can i  prevent default  Submision? 6 26
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question