Toon posts:

[CSS] Cross-browser transparantie

Pagina: 1

Acties:

40 views sinds 30-01-2008
Reageer

maandag 21 oktober 2002 13:18

Acties:

Mini-me

Topicstarter

Aangezien een witte achtergrond in een div boven een plaatje heel lelijk is, wil ik die div gedeeltelijk transparant maken (50% oid). Ik heb wat voorbeelden gevonden en daaruit dit script gebouwd:

code:

<div class="introtekst">
<script type="text/javascript">
  if (is_ie && (browserVer >= 2)){
    this.style.filters.alpha.opacity = 0.5;
  }
  else if(is_ns || is_mozilla){
    this.style.MozOpacity = 0.5;
  }
</script>
blablabla <-- moet dus gedeeltelijk transparant gaan worden
</div>

Dit werkt echter niet, noch onder internet explorer noch onder netscape/mozilla.

Iemand een oplossing?

maandag 21 oktober 2002 13:20

Acties:

Verwijderd

Bedenk eens waarnaar this verwijst

Geef gewoon je div een id mee en benader hem vervolgens met document.GetElementById(id)

maandag 21 oktober 2002 13:21

Acties:

Verwijderd

ik heb ooit ook iets gedaan met die filter, misschien heb je er iets aan
style="filter:alpha(opacity=30)"

<style type="text/css">

#s2 { width: 990px;
position: absolute;
height: 345px;
top: 145px;
left: 15px;
visibility : hidden;
z-index: 50
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="s2" style="filter:alpha(opacity=30); visibility: visible">
<table bgcolor="006699">
<td>
blblbjf;ladfjdas'
fsad;ofjas;lf
<br>
ijsjf;ldsfa;dfjalksdjf<br>
dshf;fdja;sdhfa;kdf
</td>
</table>
</div>

heb et ff geprobeerd en hier werkt het!!!

maandag 21 oktober 2002 13:26

Acties:

Mini-me

Topicstarter

Verwijderd schreef op 21 oktober 2002 @ 13:20:
Bedenk eens waarnaar this verwijst
Geef gewoon je div een id mee en benader hem vervolgens met document.GetElementById(id)

Thx. Helaas is dit niet voldoende om de <div> transparant te krijgen. Zit er dan ergens anders nog een fout?

Verwijderd schreef op 21 oktober 2002 @ 13:21:
ik heb ooit ook iets gedaan met die filter, misschien heb je er iets aan
style="filter:alpha(opacity=30)"

Nee, want ik moet de style via javascript aanpassen: anders werk je IE-only en ik wil juist voor alle browsers een goede transparantie hebben.

Dit is de javascript variant ervan:
document.GetElementById(tekst).style.filters.alpha.opacity = 50;

Dit heb ik nu:

code:

<div class="introtekst" id="tekst">
      <script type="text/javascript">
        if (is_ie && (browserVer >= 2)){
          document.GetElementById(tekst).style.filters.alpha.opacity = 50;
        }
        else if(is_ns || is_mozilla){
          document.GetElementById(tekst).style.MozOpacity = 0.5;
        }
      </script>
     blabalbabla
      </div>

maandag 21 oktober 2002 13:34

Acties:

Verwijderd

je moet percentages opgeven. Verder weet ik niet zo zeker of die verwijzing style.filters.alpha.opacity klopt.

maandag 21 oktober 2002 13:48

Acties:

Verwijderd

Maak een stijlblock:

code:

div.introtekst{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
}

Zou moeten werken

maandag 21 oktober 2002 13:56

Acties:

Verwijderd

zoeiets dacht ik ook, heb nog ff zitten zoeken, maar kon niks vinden.
Het kan toch gewoon in de style geregeld worden!!!
Maar wat bedoel je met style aanpassen via javascript?
wat wil je daarmee bereiken??

maandag 21 oktober 2002 14:49

Acties:

Hangloozz

{ @$%&# }

de oplossing van martijn22 is IMO erg netjes en zou moeten werken.
Soms lijkt die opacity wel eens te conflicteren met wat andere elementen dus zou je eens kunnen proberen om alles behalve het element waar die opacity op toegepast wordt, te commenten.
Daarna langzaam elementen uncommenten om het document weer in het gareel te krijgen

www.jurgroessen.nl

dinsdag 22 oktober 2002 01:57

Acties:

Mini-me

Topicstarter

Verwijderd schreef op 21 oktober 2002 @ 13:48:
Maak een stijlblock:
code:
1
2
3
4
div.introtekst{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
}
Zou moeten werken

Gaan browsers (die een van beide functies niet ondersteunen) hier niet van over hun nek? Heb het op deze manier nog niet geprobeerd omdat ik het niet echt netjes vond..

dinsdag 22 oktober 2002 02:02

Acties:

Mini-me

Topicstarter

Verwijderd schreef op 21 oktober 2002 @ 13:56:
zoeiets dacht ik ook, heb nog ff zitten zoeken, maar kon niks vinden.
Het kan toch gewoon in de style geregeld worden!!!
Maar wat bedoel je met style aanpassen via javascript?
wat wil je daarmee bereiken??

Je kunt op twee manieren je stylesheet linken: de style="....." tag en via de javascript variant, die (niet noodzakelijk) anders is.
Voorbeeld:
style="background-color: #FFFFFF" komt overeen met document.<styleobject>.style.backgroundcolor = '#FFFFFF' (zo uit de losse pols, kan zijn dat het iets anders is)
Zoals je ziet, gebruik je in het ene geval 'background-color' (met streepje) en in het andere geval 'backgroundcolor' (zonder streepje).

Wanneer je de javascript methode gebruikt, kun je de stijl dynamisch veranderen. Dit lukt niet als je de stijl in de style tag vastlegt.

dinsdag 22 oktober 2002 08:33

Acties:

Limhes

Mini-me schreef op 22 oktober 2002 @ 02:02:
Zoals je ziet, gebruik je in het ene geval 'background-color' (met streepje) en in het andere geval 'backgroundcolor' (zonder streepje).

ff voor de compleetheid: bij javascript laat je het streepje weg en maak je van de letter na het streepje een hoofdletter. Dus:
background-color tegenover backgroundColor

dinsdag 22 oktober 2002 08:49

Acties:

crisp

Devver

Pixelated

Mini-me schreef op 22 oktober 2002 @ 01:57:
[...]

Gaan browsers (die een van beide functies niet ondersteunen) hier niet van over hun nek? Heb het op deze manier nog niet geprobeerd omdat ik het niet echt netjes vond..

Hooguit NS4, de rest van de browsers gaan hier prima mee om en negeren gewoon datgene wat ze niet kennen.

Intentionally left blank

dinsdag 22 oktober 2002 09:39

Acties:

Hangloozz

{ @$%&# }

Mini-me schreef op 22 oktober 2002 @ 01:57:
[...]

Gaan browsers (die een van beide functies niet ondersteunen) hier niet van over hun nek? Heb het op deze manier nog niet geprobeerd omdat ik het niet echt netjes vond..

De getoonde code bestaat niet uit functies maar uit style-kenmerken.
Het is dus geen functie die je aanroept maar een opmaakvoorstel dat de browser uitvoert naar gelang het ondersteund wordt of niet.
Wordt het niet ondersteund dan wordt er gewoon overheen gelezen.. nix aan het handje dus

www.jurgroessen.nl

dinsdag 22 oktober 2002 11:07

Acties:

Mini-me

Topicstarter

Hehe, ik kon ff niet op de juiste benaming komen. Vandaar mijn foute bewoording

Ik heb Martijn22 zijn oplossing gebruikt en dat werkt prima. Bedankt!

Pagina: 1

Reageer