Avatar billede fbisen Nybegynder
15. juli 2008 - 13:33 Der er 19 kommentarer og
2 løsninger

pngfix og manglende elementer i IE6

Velkommen Eksperter til endnu en udfordring :)

Jeg har en hjemmeside (http://nybyggerne.users.whitehat.dk/) som ser fint ud i Firefox, Opera, Safari(næsten), IE7 mens at IE6 halter langt bagefter.

Jeg bruger .png billeder på siden, og flere kender nok problematikken med at .png billeders gennemsigtighed ikke er supported i IE6 per default. Derfor bruger jeg scriptet pngfix.js på min side. Så er der gennemsigtighed på .png præcis som det ønskes.

Jamen det hele lyder jo dejligt, men ved brugen af pngfix.js kan IE6 nogle gange ikke hente alle billederne på siden (der mangler x antal elementer). Det giver et nyt problem, nemlig at onLoad scripts ikke bliver udført.

Så nu efterspørger jeg et fix på en fix til den dejlige browser Internet Explorer.

Jeg har fået hjælp, men det har ikke helt virket her på Eksperten, så ekstra baggrundsstof kan forefindes her:
http://www.eksperten.dk/spm/838155

Javascriptet kan findes på:
http://nybyggerne.users.whitehat.dk/includes/pngfix.js

Jeg giver 200 points da jeg ikke har kunnet finde noget der virker på Google, og fordi der er endel at sætte sig ind i (tror jeg da)

Er der nogen der har en idé til hvad man kan gøre? Jeg er ved at være desperat!
Avatar billede umle-keera Nybegynder
15. juli 2008 - 14:06 #1
Du kan lave et html/css hack til IE6. Dette forudsætter at du benytter css baggrundsbilleder i stedet for IMG tags i html.

Du starter med at lave en IE6.css fil som du inkluderer på din hjemmeside i Conditional Comments (http://www.quirksmode.org/css/condcom.html).

I den css fil laver du så en selector for hver af dine billeder hvor du overskriver baggrunden til none og benytter AlphaImageLoader (http://msdn.microsoft.com/en-us/library/ms532969.aspx).

Ovenstående forudsætter også at dit billede kan tåle at bliver strukket til containerens dimensioner.

Benytter du ovenstående løsning er du sluppet af med javascript afhængigheden og eventuelle forsinkelser/fejl som det bringer med sig.
Avatar billede olebole Juniormester
15. juli 2008 - 14:13 #2
<ole>

umle-keera >> Hvad er det for eventuelle fejl, JavaScript bringer med sig?

/mvh
</bole>
Avatar billede umle-keera Nybegynder
15. juli 2008 - 14:30 #3
Dem fbisen nævner. Og derudover naturligvis at et javascriptafhængigt layout fejler groft når brugere uden javascript ser siden.
Avatar billede olebole Juniormester
15. juli 2008 - 14:37 #4
Hvad har de problemer, spørgeren nævner, med JavaScript at gøre? Hvad er det præcist, der fejler?
Avatar billede umle-keera Nybegynder
15. juli 2008 - 15:17 #5
De gange hvor IE6 tilsyneladende ikke henter alle billederne og dermed ikke trigger et onload event, hvormed javascript fixet til alpha channel png'erne ikke bliver brugt.

Dropper man javascript afhængigheden, sker det ikke.

I praksis er min løsning bare en hardcoded version af pngfix.js, som også netop benytter AlphaImageLoader. Forskellen er blot at det sker hurtigere og uanset om der er eksterne reesourcer som timer ud før onload eventet sker.
Avatar billede fbisen Nybegynder
15. juli 2008 - 16:29 #6
Jeg vil helst benytte en måde hvorpå jeg ikke hele tiden skal opdatere en css fil for hver gang jeg tilføjer et nyt billede. Desuden vil jeg ikke blive bundet af at SKULLE bruge baggrundsbilleder i stedet for <img> tags.

I princippet har jeg intet imod at slippe af med javascriptet, da det jo netop skaber nogle problemer. Jeg tror bare ikke det er javascript der gør det, men lige præcis den måde pngfix.js virker på - Er der en fejl i det script?

Mit problem grunder i, at pngfix.js på en eller anden måde (jeg er ikke inde i JS) får IE til at tro den ikke har hentet alle billeder, og derfor kører IE ikke onLoad eventet.

Er det virkelig umuligt? :(
Avatar billede umle-keera Nybegynder
15. juli 2008 - 16:56 #7
I så fald ville jeg skrive scriptet om til ikke at være afhængigt af onload eventet.
Bare smid scriptet i bunden af siden i stedet.
Avatar billede fbisen Nybegynder
15. juli 2008 - 16:59 #8
Nu ved jeg ikke om vi snakker om det samme?

MoveShit() er en funktion der skal køres når billeder er loadet, da breden jo må være forskellig alt efter om billeder er der, eller ikke er der. Derfor kan jeg ikke bare køre den når billederne ikke er loadet endnu. Har jeg ikke ret?

pngfix.js er ikke indsat som onLoad. Den bliver kørt på... en eller anden måde? :P
Avatar billede zips Juniormester
15. juli 2008 - 20:36 #9
Hej fbisen

Jeg har fundet dette script som ser ud til at løse dit problem
http://www.gawra.ovh.org/ jeg ved du har noget ekstra i dit script, men har prøvet at sætte det ind og testet det på min test side her http://prebendahl.dk/test-sider/nybyggerne/ og der virker det.
Avatar billede fbisen Nybegynder
15. juli 2008 - 20:59 #10
zips -> Det er jo for nice! Det virker helt perfekt med hensyn til at den altid loader filerne. Det eneste der er lidt træls ved det, er at den skal hente hele siden før at .png billederne bliver gennemsigtige, men det er noget jeg må leve med, hvis du ikke lige ved hvordan det kunne gøres.

Den rigtige side findes foresten på www.nybyggerne.dk

zips -> Nu du er så sej, så skal du smide et svar, men måske du også kunne svare mig på, hvorfor du har en "skygge" til skabet ude i venstre side på din side, men at jeg ikke har? Hvad gør jeg forkert der?
Avatar billede zips Juniormester
15. juli 2008 - 21:15 #11
Hej fbisen

Godt det kom til at virke ;-) som sagt ved jeg ikke nok om JS, så desværre kan jeg ikke hjælpe mere.

Du mangler TRS, RS, BRS, BS, BLS billederne i mappen images/skab
http://nybyggerne.dk/images/Skab/TRS.png virker ikke men linket ser sådan her ud <td width="15" style="background:url(images/Skab/TRS.png)"></td>

Samt et svar ;-)
Avatar billede fbisen Nybegynder
15. juli 2008 - 21:20 #12
FORVIRET!
Jeg henter linket du skriver med FF -> Det virker jo fint
Selvsamme link i IE -> Det virker ikke

Hvorfor virker det så på din host?
Se også:
http://nybyggerne.dk/images/Skab/

Filen ligger der?
Avatar billede zips Juniormester
15. juli 2008 - 21:29 #13
Hehe ja det driller stadig...
Sådan ser det jo ud hos mig http://prebendahl.dk/test-sider/nybyggerne/images/Skab/TRS.png fint billede
Avatar billede fbisen Nybegynder
15. juli 2008 - 21:35 #14
http://nybyggerne.dk/images/Skab/TRS.png
Virker dette link i IE6 hos dig?
Det underlige er, at hvis jeg går derind, så ser jeg intet. Men jeg kan godt markere billedet og se "boksen" som den fylder. Gemmer jeg billedet, så det fint ud.
Avatar billede zips Juniormester
15. juli 2008 - 21:39 #15
Nej det virker ikke.... hos mig
Avatar billede zips Juniormester
15. juli 2008 - 22:00 #16
Jeg tror der er en fejl i dine billeder, TRS fylder 956 byte mit TRS fylder 3.15kb
Her er et billede, mit er det øverste, dit det andet http://prebendahl.dk/test-sider/nybyggerne/images/trs.jpg
Avatar billede fbisen Nybegynder
15. juli 2008 - 22:01 #17
Jeg siger mange mange tak for hjælpen.

Det PNGFIX som zips kom med er følgende, til dem som kunne være interesseret:


var bgsleight    = function() {
   
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
   
    function fnLoadPngs() {
        var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
        for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
            if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
                fnFixPng(obj);
                obj.attachEvent("onpropertychange", fnPropertyChanged);
            }
        }
    }

    function fnPropertyChanged() {
        if (window.event.propertyName == "style.backgroundImage") {
            var el = window.event.srcElement;
            if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
                var bg    = el.currentStyle.backgroundImage;
                var src = bg.substring(5,bg.length-2);
                el.filters.item(0).src = src;
                el.style.backgroundImage = "url(x.gif)";
            }
        }
    }

    function fnFixPng(obj) {
        var bg    = obj.currentStyle.backgroundImage;
        var src = bg.substring(5,bg.length-2);
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        obj.style.backgroundImage = "url(x.gif)";
    }
   
   
   
   
    return {
       
        init: function() {
           
            if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
                addLoadEvent(fnLoadPngs);
            }
           
        }
    }
   
}();

bgsleight.init();
/*

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]–>

*/

/*
http://maxtoroq.wordpress.com

The code has been modified to ensure compatibility when using side by side with swfobject.js

- Main code moved inside an object to avoid global variables.
- Using window.onload event, you should remove the defer keyword from the script tag.

Thanks to zipz on www.eksperten.dk for the help in making this script work propperly!
*/

window.addLoadEvent = function(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
      window.onload = func;
  } else {
      window.onload = function() {
        if (oldonload) {
            oldonload();
        }
        func();
      }
  }
}

var pngfix = {

  main : function() {

      if ((parseFloat(navigator.appVersion.split("MSIE")[1]) >= 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.addLoadEvent(function() { pngfix.main(); });
Avatar billede fbisen Nybegynder
15. juli 2008 - 22:07 #18
zips -> Jeg må have lavet noget med billederne, eller haft et ftp problem af en slags... eller noget ?!
Jeg har i hvert fald taget dine billeder, og lagt dem op :) Det virker.
Mange, MANGE tak for hjælpen zips!!!

Det er jeg sq glad for! Nu har du jo fikset hele siden ;) :P
Så mangler placeringen af Nåle i FF og placering af bøger og låger i Safari :P

TAK FOR HJÆLPEN!
Avatar billede zips Juniormester
15. juli 2008 - 22:11 #19
Tak for point ;-) og godt det kom til at virke.
Avatar billede zips Juniormester
15. juli 2008 - 23:02 #20
Jeg kom til at tænke på om ikke du kunne lave noget alla dette

if(navigator.userAgent.indexOf("MSIE") != -1)
    {
blaa blaa
}
else if ((navigator.appName.indexOf("Netscape") != -1) ||
            (navigator.appName.indexOf("Opera") != -1))

i dit script til at sætte dine pins efter hvilken browser de bruger
Avatar billede fbisen Nybegynder
15. juli 2008 - 23:05 #21
Tak for ideen. Det kunne man i hvert fald godt. Jeg har lavet hjemmesiden sammen med en anden - dette er hans afdeling :)
Du er en skat zips. Hvis karma eksisteret, så var du fløjet langt ud over skalaen! :)
Jeg er virkelig taknemmelig for din ihærdighed og hjælp!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester