[JS] Behaviour verdwijnt

[Koeniepoenie]

Heej allemaal,

Ik heb een probleem met de behaviour zoals deze hier te vinden is. Deze zorgt er dus voor dat de tranparency in IE op png plaatjes werkt. Nu werkt deze opzich naar behoren, maar ontstaat er een probleem wanneer ik de innerHTML van een parent waar een png-plaatje in staat verander.

Ik vervang namelijk enkele woorden met een linkje, maar nu krijg ik IE de error dat 'realSrc' leeg of geen object is. Tijdens het debuggen heb ik de functie vertraagd laten uitvoeren en dan zie je duidelijk dat eerst het plaatje wel goed wordt weergegeven en zodra de functie wordt uitgevoerd de behaviour ook nog een keer wordt uitgevoerd, en daarmee de error veroorzaakt die op zijn beurt weer het plaatje laat verdwijnen.

Op verschillende manieren heb ik geprobeerd om dit probleem heen te werken door te proberen de functie fixImage() niet nog een keer uit te laten voeren wanneer de functie wordt uitgevoerd. Echter, ik vrees dat deze wel nog een keer moet worden uitgevoerd, omdat anders de fix niet meer van kracht is op het plaatje.

De functie zelf is niet erg interessant, in weze wordt het probleem al veroorzaakt bij een verandering van de innerHTML.

Heeft iemand een idee hoe dit te voorkomen is? Of een manier om hier omheen te werken?

[Tacow]

ik zie dat er op die pagina gebruik wordt gemaakt van een blank.gif

gebruik je die ook en bestaat die ook?

[Koeniepoenie]

BuRningFire schreef op maandag 06 maart 2006 @ 21:16:
ik zie dat er op die pagina gebruik wordt gemaakt van een blank.gif

gebruik je die ook en bestaat die ook?

Ja dat is het probleem niet, zonder m'n scriptje werkt het gewoon goed.

[Koeniepoenie]

Even een subtiel schopje, heeft iemand anders nog een idee mbt dit probleem?

[BasieP]

waarschijnlijk komt het door innerHTML.
deze zorgt dat je hele tree (of iig tot het element waarvan je de inhoud veranderd) opnieuw geparsed word (ook niet in alle browsers dacht ik)

anyway, probeer het eens op de nette manier
document.createElement(), en node.appendChild() enzo

trouwens is een code voorbeeldje wel handig in een geval als dit

[ Voor 11% gewijzigd door BasieP op 08-03-2006 18:26 ]

[Koeniepoenie]

BasieP schreef op woensdag 08 maart 2006 @ 18:25:
waarschijnlijk komt het door innerHTML.
deze zorgt dat je hele tree (of iig tot het element waarvan je de inhoud veranderd) opnieuw geparsed word (ook niet in alle browsers dacht ik)

anyway, probeer het eens op de nette manier
document.createElement(), en node.appendChild() enzo

trouwens is een code voorbeeldje wel handig in een geval als dit

Ja, door het wijzigen van de innerHTML wordt die functie van de png-fix opnieuw getriggerd, maar daar treed dan een error in op, deze probeer ik te omzeilen, maar is me nog niet gelukt.

Goed, ik had dus eerst zelf een functie geschreven om de woorden te vervangen met een linkje:

JavaScript:

function replaceWoorden() {
    if (woorden && woorden.length > 0) {
        context = document.getElementById('content').innerHTML;
        for(var i=0, j=woorden.length; i<j; i++) {
            context = context.replace(new RegExp(woorden[i], 'ig'), '<a href="./?woord='+woorden[i]+'">'+woorden[i]+'</a>');
        }
        document.getElementById('content').innerHTML = context;
    }
}

De array woorden ziet er gewoon zo uit:

code:

var woorden = ['blaat', 'woei'];

In mijn zoektocht naar een oplossing kwam ik langs een betere (?) methode om de woorden te vervangen:

JavaScript:

function replaceWoorden() {
    regexp = /<[^<>]*>/ig;
    obj = document.getElementById('content');
    htmlArray = obj.innerHTML.match(regexp);
    htmlStripped = obj.innerHTML.replace(regexp, "$!$");
    
    for(var i=0, j=woorden.length; i<j; i++) {
        htmlStripped = htmlStripped.replace(new RegExp(woorden[i], 'ig'), '<a href="./?woord='+woorden[i]+'">'+woorden[i]+'</a>');
    }
    
    for (var i=0; htmlStripped.indexOf("$!$") > -1; i++) {
        htmlStripped = htmlStripped.replace("$!$", htmlArray[i]);
    }
    
    obj.innerHTML = htmlStripped;

}

Deze houdt namelijk ook rekening met de html tags die er eventueel in staan en ontwijkt deze dus bij het replacen. Het heeft echter niet veel geholpen, aangezien innerHTML op dezelfde manier wordt aangepast en dus de error veroorzaakt.

Iets meer over de error dan, hij geeft aan dat de variabele 'realSrc' leeg is (undefined). Als je de code van de htc nog eens bekijkt:

JavaScript:

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>

Kun je opmaken dat realSrc wordt gebruikt om het pad naar het echte plaatje in op te slaan. Nu tast ik echt volledig in het duister waarom deze leeg is bij de tweede trigger van deze functie. Ik heb op verschillende manier geprobeerd te voorkomen dat realSrc leeg is, maar het mocht allemaal niet baten. Soms kreeg ik de error wel weg, maar verdween het plaatje alsnog..

Ow, en tsjah, ik zou best de nette DOM-functies willen gebruiken, maar ik zou niet weten hoe ik zo'n dynamisch gecreeerde tag op de juiste plaats in de tekst zet. appendChild pleurt hem gewoon achteraan, en insertBefore gaat niet werken omdat het midden in tekst moet..

[ Voor 17% gewijzigd door Koeniepoenie op 08-03-2006 19:48 . Reden: DOM-functies ]

[crisp]

Ow, en tsjah, ik zou best de nette DOM-functies willen gebruiken, maar ik zou niet weten hoe ik zo'n dynamisch gecreeerde tag op de juiste plaats in de tekst zet. appendChild pleurt hem gewoon achteraan, en insertBefore gaat niet werken omdat het midden in tekst moet..

Met splitText(); ik heb ooit eens een javascript highlighter gemaakt die iets soortgelijks deed als jij nu probeert te doen

[Koeniepoenie]

Ja, ik kon me die creatie van jou wel herrineren, maar kon hem niet meer vinden.

Tevens heb ik dat splitText nog nooit gezien, maar zo leer je nog eens wat

Ik heb dus jouw functie gebruikt, en deze werkt perfect, blijkbaar wordt bij deze functie de png-fix niet getriggerd, en dat was wat ik nodig had. Ik heb hem een klein beetje aangepast naar de situatie, maar dat was meer het weghalen van het geregel met die instellingen e.d., het lijkt me dus niet bijzonder de moeite waard om mijn brouwsel nog eens te posten.

In ieder geval, bedankt voor jullie hulp, crisp in bijzonder met z'n hippe highlighterding