[JS] Opacity soms wel, soms niet werkend - Softwareontwikkeling

zondag 12 mei 2002 16:21

Acties:

Verwijderd

Topicstarter

Oke, misschien beetje vage titel maar dit leek me het meest de lading te dekken. Ik zit wat te testen met het doorzichtig maken van een layer en het laten infaden ervan. De volgende code staat in de head van m'n html-bestandje:

code:

<style type="text/css">
#mijnlayer {
    position: absolute;
    top: 300px;
    left: 30px;
    background-color: orange;
       filter: alpha(opacity=50);
       -moz-opacity: 0.5;
}
</style>

<script language="JavaScript">
//definitie constanten:
tijdsduurFadeIn=1; //in seconden
alphaSprong=5; //in procenten

//definitie functies:

function zetPositieLaag( laag, x, y ) {
    if( document.getElementById ) {
        obj = document.getElementById( laag )
        obj.style.left = x;
        obj.style.top = y;
    } else if( document.all ) {
        document.all[laag].style.left = x;
        document.all[laag].style.top = y;
    } else {
        document[laag].left = x;
        document[laag].top = y;
    }
}

function zetAlphaLaag(laag,alfa) {
    if ( document.getElementById ) {
        document.getElementById(laag).style.mozOpacity=alfa/100;
    } else if ( document.all ) {    
        document.all[laag].filters.alpha.opacity = alfa;
    }
}

function fadeInLaag( laag ) {
    alpha=0;
    helpFadeInLaag(laag);
}

function helpFadeInLaag( laag) {
    alpha+=alphaSprong;
    document.all[laag].filters.alpha.opacity = alpha;   
    cmd="helpFadeInLaag('"+laag+"')";
    setTimeout(cmd,(1000*tijdsduurFadeIn)/(100/alphaSprong));
}

Nu werken de fcts. fadeInLaag en zetPositieLaag perfect, alleen zetAlphaLaag wil het niet doen... Ik gebruik gewoon

code:

<a href="javascript:zetAlphaLaag('mijnlayer',0)">klik hier!</a>

<div id="mijnlayer">
Deze tekst staat in een layer.
</div>

Iemand een idee wat ik over het hoofd zie??

edit: heb inmiddels een manier gevonden om dit te omzeilen, nl. door de if-else constructie te vervangen door slechts if-jes. Maar 'k blijf me afvragen wat hier aan de hand is.

zondag 12 mei 2002 19:33

Acties:

Annie

amateur megalomaan

De reden is heel sim-pel

. In IE evalueert document.getElementById naar true en door de if-else zal je natuurlijk nooit in de else komen. De mozOpacity property is echter niet bekend, waardoor de functie niet doet wat je wil in IE.
Door de if-if wordt in IE ook het tweede statement uitgevoerd.

Je kan ook de condities omdraaien (eerst document.all) en dan zal het ook werken.

Today's subliminal thought is:

zondag 12 mei 2002 19:55

Acties:

crisp

Devver

Pixelated

of ervan maken:

code:

1	if (!document.all && document.getElementById)

Maar misschien kan je beter de useragent string checken op mozilla o.i.d. Het blijft in elk geval een ranzige manier...
De volgende code ziet er trouwens wel mooi uit in IE (als je een achtergrond instelt), maar vind ik niet mooi in Mozilla; de achtergrond wordt dan niet echt doorzichtig, en de tekst in de span overerft toch de opacity terwijl het een relatief geplaatste layer is:

code:

<html>
<body style="background-image: url(../pictures/background.jpg)">
<table>
  <tr>
    <td style="background: #f0f0f0; filter: alpha(opacity=40); -moz-opacity: 0.4">
    <span style="position: relative; z-index: 2">
      <h1>Mijn text</h1>
    </span>
    </td>
  </tr>
</table>
</body>
</html>

Intentionally left blank