Internet Explorer 6 jQuery PNG fix on the fly

[ZpAz]

Hallo,

Ik heb een website voor iemand gemaakt, waar het menu on the fly wordt vervangen (dmv jquery) voor een plaatje met een bepaald font wat met php GD gerenderd wordt.

Dit:

code:

<li><a href="#">Blaat</a></li>

Wordt dan via javascript omgezet naar

code:

<li><a href="#"><img src="renderPic?tekst=Blaat" /></a></li>

Iets wat prima werkt in de browsers opera, safari, firefox, internet explorer 7 en internet explorer 6, ware het niet dat IE6 niet met transparante png bestanden kan omgaan.

Nu zijn er diverse 'fixen' voor in de omloop, mijn idee is gebasseerd op pngfix.

Het idee daarvan is de <img> tag te vervangen voor een span met de juiste hoogte en breedte, en deze via de AlphaImageLoader als achtergrond de juiste png te geven. Dit werkt prima wanneer de objecten niet 'on the fly' gemaakt worden.

Daarom heb ik hem wat aangepast voor mezelf, zodat ik wanneer IE6 gebruikt wordt zelf de objecten vervang.

Dit werkt ook, maar, hij doet alleen maar het eerste object, de tweede objecten doet hij niet, ik heb een vermoeden dat dat komt door de dubbele semicolon ( die hij achter elke AlphaImageLoader, dit doet hij voor het eerste object niet, maar voor elk opvolgend object wel? (Waarom geen idee, er staat niets over in mij code.)

Afijn, mischien licht het ergens anders aan, deze vraag leg ik bij jullie neer.

De code om de plaatjes te vervangen door een span met de juiste achtergrond is trouwens deze.

JavaScript:

 $(document).ready(function(){
    size = $("#menu ul li a").css("fontSize");
    $("#menu ul li a").gdText();
 
    if(doIEFIX) { //Crappy IE6 browser used, fix it
        jQuery("#menu ul li a").IE6FIX();
        alert(jQuery("#menu ul").html());
    }
    
 });

JavaScript:

 jQuery.fn.IE6FIX = function() {

    return this.each(function() {
        
        var newString = '';
        for(i = 0; i<this.childNodes.length; i++) {
            newString += '<span style="display: inline-block; width: ' + this.childNodes[i].width + 'px; height:' + this.childNodes[i].height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.childNodes[i].src + '\');"></span>';
        }
        
        alert(newString);
        jQuery(this).attr("onmouseover","return false;");
        jQuery(this).attr("onmouseout","return false;");
        jQuery(this).html(newString);
    });

}

Die alerten heb ik om te testen of alles wel goed gaat. Maar zoals je ziet bij de alert van de html van de complete ul zet hij er bij de 2e en opvolgende li elementen in de span een dubbele semicolon neer.

Ik hoop dat iemand me kan helpen.

Een plaatje van de 'final' alert.

http://localhostr.com/files/c8b705/Picture+1.png

En voor ik het vergeet, een url naar de betreffende site.
http://igo2.nl/67f17a

[Bosmonster]

Ik ben zelf niet zo'n fan van PNGfix, omdat het teveel invloed heeft op je layout (gebeuren soms vage dingen mee).

Aangezien ik toch eigenlijk alleen user-generated images wil vervangen (de rest vervang ik voor GIF-alternatieven in een alternatieve stylesheet), heb ik hiervoor de volgende snippet geschreven voor jQuery:

JavaScript:

// Replace img PNG's in IE6
if ($.browser.msie && $.browser.version < 7) {
    $('img[src$=.png]').each(function(){
        $(this).css({
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')"
        });
        this.src = '/images/blank.gif';
    });
}

Dit zou je na het vervangen uit kunnen voeren voor die img.

Edit: Dat gedoe met die spans en shizzle is dus helemaal niet nodig. Hierdoor blijven styles die je op je img hebt ook gewoon bestaan, zoals margins, borders, etc.

[ Voor 15% gewijzigd door Bosmonster op 01-10-2008 17:06 ]

[ZpAz]

Oe nice, jou idee is geniaal

Ik zal er eens naar kijken. You're my new hero

[Bosmonster]

Nog even aangepast voor je naar plugin-variant:

JavaScript:

;(function($){
$.fn.pngfix = function () { 
    if ($.browser.msie && $.browser.version < 7) {
        return this.each (function () {
            $(this).css({
                filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')"
            });
            this.src = 'blank.gif';
        });
    } else {
        return this;
    }
};
})(jQuery);

// Aan te roepen nu gewoon via:
$('img#mijnimageid').pngfix();

blank.gif is gewoon een 1x1 transparant pixel gifje overigens, maar dat had je vast al door. Moet je er alleen ff zelf bijzetten en locatie aanpassen.

[ Voor 24% gewijzigd door Bosmonster op 01-10-2008 17:26 ]

[NiteSpeed]

Misschien ben ik een mierenneuker, maar ik vind het nogal lelijk dat je een tekst gaat vervangen door een plaatje. Visueel zal het wel aantrekelijk zijn, maar qua code kan het netter. Is het niet mogelijk dat je je scriptje zo aanpast dat je de text indent op -9999px en vervolgens een achtergrondplaatje maakt met die tekst?

[Verwijderd]

NiteSpeed schreef op woensdag 01 oktober 2008 @ 20:27:
Misschien ben ik een mierenneuker, maar ik vind het nogal lelijk dat je een tekst gaat vervangen door een plaatje.

Waarom? Lijkt me niet zoveel mis mee.

[Bosmonster]

NiteSpeed schreef op woensdag 01 oktober 2008 @ 20:27:
Misschien ben ik een mierenneuker, maar ik vind het nogal lelijk dat je een tekst gaat vervangen door een plaatje. Visueel zal het wel aantrekelijk zijn, maar qua code kan het netter. Is het niet mogelijk dat je je scriptje zo aanpast dat je de text indent op -9999px en vervolgens een achtergrondplaatje maakt met die tekst?

Achtergrondplaatjes printen niet, dus zo mooi is jouw oplossing niet

De javascript is unobtrusive, dus dat lijkt me een veel nettere oplossing dan trucjes met -9999px text-indent en achtergrondplaatjes.

[NiteSpeed]

Verwijderd schreef op woensdag 01 oktober 2008 @ 20:47:
[...]

Waarom? Lijkt me niet zoveel mis mee.

Omdat searchengines het niet zo leuk vinden als linkjes die normaal gesproken opgemaakt zijn in LI's opeens harde images zijn... maar ik ging net even de site doorkijken en ik zag dat de HTML-code in principe gewoon goed is. No problems dus eigenlijk .

[NiteSpeed]

Bosmonster schreef op woensdag 01 oktober 2008 @ 21:22:
[...]


Achtergrondplaatjes printen niet, dus zo mooi is jouw oplossing niet

De javascript is unobtrusive, dus dat lijkt me een veel nettere oplossing dan trucjes met -9999px text-indent en achtergrondplaatjes.

Printers hebben dan ook een eigen stylesheet nodig, zoals gewoonlijk.

Maar als het inderdaad ubobstrusive werkt, heb ik niets gezegd en is de gegeven oplossing inderdaad gewoon goed te gebruiken. Ik ging er even vanuit dat de HTML code werd verneukt voor robots/screenreaders.

[Puck]

Wel netjes het ALT attribuut gebruiken natuurlijk

Of als je perse tekst wilt: Sifr (Flash) of Facelift (Javascript) text replacement

[ZpAz]

NiteSpeed schreef op woensdag 01 oktober 2008 @ 20:27:
Misschien ben ik een mierenneuker, maar ik vind het nogal lelijk dat je een tekst gaat vervangen door een plaatje. Visueel zal het wel aantrekelijk zijn, maar qua code kan het netter. Is het niet mogelijk dat je je scriptje zo aanpast dat je de text indent op -9999px en vervolgens een achtergrondplaatje maakt met die tekst?

Mja, mocht javascript niet aanstaan bijvoorbeeld, dan krijgt de persoon gewoon een lijst te zien met gewone tekst, het menu blijft dus functioneel. Ook kan google dus makkelijk door het menu komen.

Puck schreef op woensdag 01 oktober 2008 @ 22:05:
Wel netjes het ALT attribuut gebruiken natuurlijk

Of als je perse tekst wilt: Sifr (Flash) of Facelift (Javascript) text replacement

Sifr heeft zoals je zegt flash nodig, en ondersteund geen 'hovers' (dat je tekst van kleur veranderd op een mouseover bv). Mijn oplossing wel. (Het plaatje wordt via php GD gerenderd met het juiste font.).

Facelift is idd hetzelfde idee als ik deed.

[TimDJ]

of je doet een javascript png fix? als in png ondersteunen: http://www.twinhelix.com/css/iepngfix/

lezen...

[ Voor 8% gewijzigd door TimDJ op 01-10-2008 23:17 ]

[Bosmonster]

ZpAz schreef op woensdag 01 oktober 2008 @ 23:15:
[...]

Sifr heeft zoals je zegt flash nodig, en ondersteund geen 'hovers' (dat je tekst van kleur veranderd op een mouseover bv). Mijn oplossing wel. (Het plaatje wordt via php GD gerenderd met het juiste font.).

Facelift is idd hetzelfde idee als ik deed.

Niet dat ik een fan ben van sIFR, integendeel, maar die ondersteunt wel degelijk hover-states.