www.webdeveloper.com
Results 1 to 4 of 4

Thread: I need my .png fix for IE6 to work with my "smooth scroller"

Hybrid View

  1. #1
    Join Date
    May 2009
    Location
    FLA
    Posts
    2

    Question I need my .png fix for IE6 to work with my "smooth scroller"

    Hello,

    This is my first time here--if I break any rules, I apologize.

    I have a site, http://www.camaraphotography.com that renders correctly in every browser except IE6 (shocking, right?).

    I have it almost working correctly in IE6, but have run into a few problems and I think it has to do with the the 2 different .js files. I do not code javascript, but can usually troubleshoot the scripts I find. This one has me stumped.

    Background:

    I have 2 .js files. One for a smooth horizontal scroll with arrows (anchor links), instead of just "jumping" to the link or using the bottom scroller. (js/thw.js)

    The other is for a .png hack so the images are transparent in IE6. (js/pngfix.js)

    IE6 Issues:

    If you view the site in IE6, you will see that the 2 arrows at the end of the navigation are not transparent, and the navigation is not working--it jumps to the section instead of smoothly scrolling to it.

    The background in the "About Dave" section is also not transparent.

    If I remove the line for the png hack:

    Code:
    <!--[if lt IE 7.]>
    <script defer type="text/javascript" src="js/pngfix.js"></script>
    <![endif]-->
    I have no transparency, but the page smoothly scrolls and the arrows work. Take a look in IE6: http://camaraphotography.com/index-no-png.html

    I'd really like to have it all in IE6, since there are still people using this browser. Is there a solution to my problem?

    I can attach files, and/or copy and paste the code here if that is preferable.

    Any assistance is greatly appreciated.

    Melissa

  2. #2
    Join Date
    May 2009
    Location
    FLA
    Posts
    2
    Oh man, is it that tough, or did I post my inquiry incorrectly? If there is anyone out there with some advice I'd really appreciate it.

    Thanks!

    Melissa

  3. #3
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726

    Eureka??? Maybe??

    I think the problem you are having with the pngfix.js not working may be that it works on the document.images collection, which is correct, but the images you are trying to support you have set as background images for the 'a' tags via css. This means they are not included in the document.images collection, as they are merely background images. So the pngfix will never see them, unless you make them actually html img's. (I don't know if there is any way to support png's as background, don't think so..). As for the navigation not working, not sure about that yet. I'd suggest trying getting the pngfix to work first, see if nav works then, if not - come back here and we'll have another look at the nav script. (The posted links are sufficient, you won't need to post the nav script, unless you want to)

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    Actually, in the case that you still have any problems, or even if you do get it to work, try the following version of the pngfix script. I re-wrote it somewhat, as I noted a few things I did not like in it (mainly crappy syntax, but a few procedural things also), and figured that they may have possibly caused problems with the nav perhaps, as the pngfix may have had errors causing other scripts to go 'haywire' so to speak. So, try the following out also (replacement for the pngfix.js file):

    Code:
    /*
     
    Correctly handle PNG transparency in Win IE 5.5 & 6.
    http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
    
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    
    */
    
    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 (/PNG$/.test(imgName)) {
             var imgID = (img.id) ? 'id="' + img.id + '" ' : '';
             var imgClass = (img.className) ? 'class="' + img.className + '" ' : '';
             var imgTitle = (img.title) ? 'title="' + img.title + '" ' : '';
             var imgStyle = 'display:inline-block;' + img.style.cssText;
             if (img.align) {
                 imgStyle = 'float:' + img.align + ';' + imgStyle;
             }
             if (img.parentElement.href) {
                 imgStyle = 'cursor:hand;' + imgStyle;
             }
             var strNewHTML = '<span ' + imgID + imgClass + imgTitle;
             strNewHTML += ' style="width:' + img.width + 'px; height:' + img.height + 'px;' + imgStyle;
             strNewHTML += '; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'';
             strNewHTML += img.src + '\', sizingMethod=\'scale\');"><\/span>'; 
             img.outerHTML = strNewHTML;
             i = i-1;
          }
       }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles