[jQuery] PNG fade-in en IE....

[Verwijderd]

Ik heb het idee dat wat ik wil gewoon niet echt kan, maar mischien dat iemand hier een oplossing weet Ik heb een div met een wit half transpartent png als achtergrond en wil die met een fade-in te voorschijn laten komen.

Het veel voorkomende verhaal is dat het in FF natuurlijk wel foutloos gaat en in IE niet echt. Het werkt wel, maar het word eerste grijs voordat het weer terugschiet naar transparant wit wat natuurlijk niet echt zo heel mooi is.

De reden dat het een wit transparente png is, kom doordat er nogal erg veel verschilde achtergrond plaatjes zijn waar dat witte kader overheen zou moeten. En dit "leek" me een makkelijke en snelle oplossing, totdat ik zag dat in IE niet goed ging.

Weet iemand een manier om dat toch ook in IE te laten gaan, zonder dat het eerste grijs word? Of zit er niks anders op dat ik voor elke pagina een apart achtergrond plaatje moet gaan maken.

http://tijmensmit.com/dev/jquery.html

[BasieP]

* BasieP ziet flash functionaliteit

je kan dit vast ook wel met JS doen, maar dan zou ik niet voor de png fade-in gaan.
Je kunt 1 versies maken (deze die je nu hebt en eentje voor IE met activeX zut)
In de IE versie kun je transparantie gebruiken van activeX ipv transparante png's.

[Verwijderd]

Flash was inderdaad ook wel een oplossing geweest, al was het niet dat de site al helemaal in elkaar staat. En de klant nu opeens hier mee komt...

Maar wat bedoel je precies met transparantie door gebruikt te maken van activeX? Ik heb er even op gezocht bij Google op activeX transparantie, ik zal er wel overheen kijken maar vind niet echt iets waar ik wat aan heb.

[Patriot]

Je kunt toch de div een witteachtergrondkleur geven, die een opacity van x? Je moet dan wel de tekst in een andere div zetten en die zo positioneren dat hij boven de div komt maar dat moet geen probleem zijn. Zo heb ik het altijd gedaan.

[Bozozo]

Inderdaad, waarom gebruik je hier een PNG?

[Kiphaas7]

Je kan het ook aanpakken zonder png achtergrond, en dat je toch non-transparante letters krijgt.

HTML:

<div id="container">
  <div id="fade"></div>
  <div id ="text"></div>
</div>

Je container gebruik je om de content op de juiste plaats te krijgen. #fade geef je de opacity waarde die je wil en positioneer je absolute, vervolgens positioneer je #text ook absolute, en wel zodat deze over #fade heen gaat.

Werkt eigenlijk precies zoals alle imageviewers dat doen, zoals bijvoorbeeld degene op tweakers.

EDIT: Ok, anders lees ik even de 2 laatste reacties....

[ Voor 5% gewijzigd door Kiphaas7 op 14-09-2008 13:43 ]

[Verwijderd]

Had even niet aan opacity gedacht, maar ook dat werkt met die fade in van jQuery, of welke andere libary niet echt helemaal lekker, ipv grijs krijg ik nu een geheel wit vlak in IE.. wat in FF wel goed gaat. Daar is het gewoon half transparant nadat de fade-in klaar is.

Het transparant maken is niet zo'n probleem, het is die fade-in die het verpest... Of kan ik maar beter vergeten om een met een transparant vlak een fade in te maken die crossbrowser werkt?

http://tijmensmit.com/dev/fade2.html

[WeeJeWel]

1) Zet opacity op 0 in jQuery

JavaScript:

$('#whatever').css('opacity',0.0);

2) Gebruik jQuery om opacity naar 1 te faden

?

[ Voor 33% gewijzigd door WeeJeWel op 14-09-2008 18:49 ]

[Verwijderd]

opacity werkt zelf wel goed in Firefox, maar voor IE heb je dit nodig -> filter: 'alpha(opacity=50)'

Heb het nu zo opgeschreven

JavaScript:

$(document).ready(function(){

    $('#roadmap').css('opacity',0.0);
    $('#roadmap').css('filter','alpha(opacity=0)');
    $('#roadmap').animate({ 
        opacity: 0.5,
        filter: 'alpha(opacity=50)'
    }, 1500 );

});

Maar ook daarbij krijg ik hetzelfde effect, werkt goed in FF. Maar in IE eerste een wit vlak en daarna pas transparant

[WeeJeWel]

vergeet die filter, jquery doet dat wel als je opacity gebruikt.

[Dark Blue]

Je kunt trouwens je PNG ook nog na het opslaan door een PNG-tooltje halen, ik meen dat het 'TweakPNG' heet (hoe toepasselijk ) ... maar daarin kun je de achtergrondkleur in RGB-waarde aanpassen. Normaliter is deze 128,128,128 (grijs) maar je kunt hem dus op wit zetten. Het tast je PNG niet aan, het kan alleen dat tussentijds grijze vlak vervangen door 'n witte.

[Bosmonster]

WeeJeWel schreef op zondag 14 september 2008 @ 18:48:
1) Zet opacity op 0 in jQuery

JavaScript:

$('#whatever').css('opacity',0.0);

2) Gebruik jQuery om opacity naar 1 te faden

?

Is overigens niet nodig om hem eerst naar 0 te zetten. Als je fadeIn gebruikt begint ie standaard op opacity 0.

Opacity en transparante PNG gaat echter niet lekker in IE7, dus daar simpelweg iets anders op vinden.

Of als het uitkomt met de achtergrondkleur teakpng idd, maar meestal gebruik je transparante PNG's juist als de achtergrond geen egale kleur is, anders kun je net zo goed een gifje pakken. In dit geval dan ook geen oplossing, want dan springt ie dus naar egaal wit voordat ie gaat faden.

Hier gewoon een witte achtergrond kleur gebruiken. De tekst kun je in een losse laag zetten, zodat die niet ook transparant wordt.

code:

<div id="fadelaagje">
   <div class="achtergrond"></div>
   <div class="inhoud"></div>
</div>

Fadelaagje op position relative/absolute en die twee erin position absolute. Dan fadelaagje faden.

[ Voor 40% gewijzigd door Bosmonster op 15-09-2008 09:33 ]

[Kiphaas7]

Bosmonster schreef op maandag 15 september 2008 @ 09:26:
[...]

Hier gewoon een witte achtergrond kleur gebruiken. De tekst kun je in een losse laag zetten, zodat die niet ook transparant wordt.

code:

<div id="fadelaagje">
   <div class="achtergrond"></div>
   <div class="inhoud"></div>
</div>

Fadelaagje op position relative/absolute en die twee erin position absolute. Dan fadelaagje faden.

Kiphaas7 schreef op zondag 14 september 2008 @ 13:43:
Je kan het ook aanpakken zonder png achtergrond, en dat je toch non-transparante letters krijgt.

HTML:

<div id="container">
  <div id="fade"></div>
  <div id ="text"></div>
</div>

Je container gebruik je om de content op de juiste plaats te krijgen. #fade geef je de opacity waarde die je wil en positioneer je absolute, vervolgens positioneer je #text ook absolute, en wel zodat deze over #fade heen gaat.

Werkt eigenlijk precies zoals alle imageviewers dat doen, zoals bijvoorbeeld degene op tweakers.

EDIT: Ok, anders lees ik even de 2 laatste reacties....

En ik was al te laat.

[Bosmonster]

Kiphaas7 schreef op maandag 15 september 2008 @ 15:27:

En ik was al te laat.

ow

[R2D2]

Patriot schreef op zondag 14 september 2008 @ 13:28:
Je kunt toch de div een witteachtergrondkleur geven, die een opacity van x?

Vind safari vaak niet zo leuk waardoor je een opacity over je gehele pagina krijgt. Ik heb zelf ook last van dat probleem op mijn website waarbij een opacity in een script gebruikt word voor het faden van images. Na het inladen van de pagina zie je dat zodra de fade gestart word de gehele pagina iets van een opacity krijgt.

Kun je niet gewoon via een conditional comment IE6 uitsluiten van het script en die een geheel witte achtergrond geven?

[wietse.cc]

Het is wel degelijk om met een kleine 'hack' PNG transparency te laten werken onder IE6. Dit kan via CSS, met een HTC script en een 'blank.gif' file van 1x1 pixel.

Zie http://www.wietse.com in IE6, allemaal trans. PNG met vallende schaduw.

Wat je nodig hebt:

In je CSS (style aan de <img> toekennen

code:

.png {
    behavior: url(iepngfix.htc);
}

Het bestand IEPNGFIX.htc: hier

Het gif-plaatje: hier

Succes!

[Bosmonster]

wietse.cc schreef op woensdag 17 september 2008 @ 12:01:
Het is wel degelijk om met een kleine 'hack' PNG transparency te laten werken onder IE6. Dit kan via CSS, met een HTC script en een 'blank.gif' file van 1x1 pixel.

Zie http://www.wietse.com in IE6, allemaal trans. PNG met vallende schaduw.

Wat je nodig hebt:

In je CSS (style aan de <img> toekennen

code:

.png {
    behavior: url(iepngfix.htc);
}

Het bestand IEPNGFIX.htc: hier

Het gif-plaatje: hier

Succes!

Dit heeft alleen niks met het topic te maken

[wietse.cc]

Bosmonster schreef op woensdag 17 september 2008 @ 13:23:
[...]


Dit heeft alleen niks met het topic te maken

Hehe, dat is stom; ik heb een de reactie op een verkeerd (zelfs ander forum) gegeven

Negeer mijn post maar