Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

IEpngfix.htc file causes all javascript to not respond

Posted on 2008-06-17
6
Medium Priority
?
1,830 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

705 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