behaviors

Status
Niet open voor verdere reacties.
S

steveww

Gebruiker
Lid geworden
19 sep 2009
Berichten
11
Hoi,
Ik gebruik een behavior op een image,
Het effect "fade" in van 0 tot 100% "onload"

Dit geeft een mooi effect bij het laden van de pagina, in FF of Chrome.
Maar in IE (7en8) laat de image eerst 100%, en verdwijnt vervolgens.
en daarna komt de fade in, dit ziet er niet goed uit.

Jammer dat ik nu waarschijnlijk dit effect niet ga gebruiken omdat
nog steeds het grootste deel van de bezoekers IE gebruikt.

Of heeft iemand hier misschien een oplossing voor?

Alvast bedankt, Stefan

ps,Na zondag middag zal ik pas kunnen reageren op eventuele geplaatste reacties.
 
Hoi Stefan,
Hoe doe je dat faden? Met een javascriptje? En: hoe ziet dat er uit? En wat is de bijbehorende css?
Oftewel: heb je een link naar een testpagina, zodat we het met eigen ogen kunnen zien?
  • Dan valt er waarschijnlijk wel iets op te verzinnen, want deze doet het ook in IE (6, 7, 8). :) Zie broncode.
Met vriendelijke groet,
CSShunter
 
csshunter zei:
Hoe doe je dat faden? Met een javascriptje? En: hoe ziet dat er uit? En wat is de bijbehorende css?,
CSShunter
Klik om te vergroten...

html:
<img src="/images/image.jpg" width="399" height="300" class="img" onload="MM_effectAppearFade(this, 2000, 0, 100, true)" />

CSS:
.img {
border: medium ridge #FFF;
margin-right: 30px;
margin-left: 30px;
}

JS:
Spry.Effect.js - version 0.38 - Spry Pre-Release 1.6.1
(copyright) Adobe Dreamweaver spryeffect
 
Ach zo: een Google'tje leert dat meer mensen trubbels hebben met IE en het Spry-fade script. Ofwel je moet dit script zien te corrigeren, ofwel het niet gebruiken.
Voor het laatste geval, probeer deze eens:
Code: 
#img-1 {
	margin-left: -9999px; // nodig om IE niet voortijdig het img te laten showen
	}
In de <head>:
HTML: 
<script type="text/javascript" src="scripts/css-popup-fading.js"></script>
<script type="text/javascript">
window.onload = function(){
	setTimeout("fadeIn('img-1')", 500); // wait 500 millisec before fade-in
}
</script>
En verder in de <body>:
HTML: 
<p class="center"><img id="img-1" src="images/big4.jpg" width="550" height="412" alt=""></p>
Met vriendelijke groet,
CSShunter
 
Bedankt voor de tip en de uitleg.
Dit script werk id in IE ook goed, TOP

Jammer dat het script van Dreamweaver niet goed werkt in IE

gr Stefan
 
Ik heb alleen wel wat problemen met het script bij gebruik van meerdere afbeeldingen.

Als eerste moest ik de onload in de body verwijderen om het werkend te krijgen.

Maar waar ik nu tegenaan loop is het effect toepassen op een 2e afbeelding op dezelfde pagina.
Ik heb geprobeerd van id #img-1 een class .img te maken maar dit werkt niet.
Code: 
.img {
	margin-left: -9999px; /* nodig om IE niet voortijdig het img te laten showen*/
}

Ik heb geprobeerd met een 2e en 3e id #img-2 #img-3
Code: 
#img-1{
	margin-left: -9999px; /* nodig om IE niet voortijdig het img te laten showen*/
}
#img-2{
	margin-left: -9799px; /* nodig om IE niet voortijdig het img te laten showen*/
}
#img-3{
	margin-left: -9599px; /* nodig om IE niet voortijdig het img te laten showen*/
}
HTML: 
<img id="img-1" src="assets/images/image..jpg" width="334" height="250" class="img"/> 
<img id="img-2" src="assets/images/image2.JPG" width="188" height="250" class="img"/>
maar ook dan wordt het effect alleen op id img-1 toegepast.

Ziet u zo wat ik fout doe?
 
Ja, je bent er bijna. Bij het aanroepen van het script moet ook nog opgegeven worden dat #img-2 en #img-3 moeten infaden, anders doen ze het niet.
Als eerste moest ik de onload in de body verwijderen om het werkend te krijgen.
Klik om te vergroten...
Dat klopt, want een onload="..." in de <body> tag speelt een potje overrulen met de onload-functie in het script.
  • Als je nog iets anders aan functies hebt die onload gepresenteerd moeten worden, dan kan je dat doen door deze functie(s) op te nemen in het rijtje van de window.onload = function(){ ... }.
Verder had ik nog een foutje gemaakt bij het toepassen van het script: zonder javascript deed ie het niet (helemaal geen img te zien). Uit de css moet de margin-left van -9999px weggehaald worden (die schuift 'm buiten beeld, ook als javascript uit staat), en dit moet opgenomen worden in het aanroep-script.
Zo wordt het:
HTML: 
<script type="text/javascript">
window.onload = function(){
	document.getElementById('img-1').style.marginLeft = '-9999px' ;
	document.getElementById('img-2').style.marginLeft = '-9999px' ;
	document.getElementById('img-3').style.marginLeft = '-9999px' ;
	setTimeout("fadeIn('img-1')", 400);  // wait  400 millisec before fade-in
	setTimeout("fadeIn('img-2')", 1000); // wait 1000 millisec before fade-in
	setTimeout("fadeIn('img-3')", 2000); // wait 2000 millisec before fade-in
}
</script>
De 3 images kunnen desgewenst dus ook op een verschillend moment beginnen met infaden. :)
Met ook eigen posities voor de extra images:
HTML: 
<p class="center"><img id="img-1" src="images/big2.jpg" width="330" alt=""></p>
<p class="floatLeft"><img id="img-2" src="images/big3.jpg" width="180" alt=""></p>
<p class="floatRight"><img id="img-3" src="images/big4.jpg" width="180" alt=""></p>
Succes!
CSShunter
 
Laatst bewerkt:
csshunter zei:
margin-left van -9999px (die schuift 'm buiten beeld als javascript uit staat)
Klik om te vergroten...

Dit was mij ook al opgevallen maar deze oplossing had ik zelf niet kunnen bedenken.
Bedankt!

Kan ik de snelheid voor IE nog aanpassen? :D
In chrome gaat het effect sneller
 
Laatst bewerkt:
Kan ik de snelheid voor IE nog aanpassen?
Klik om te vergroten...
Ai, dat zal lastig zijn, want ik denk dat de verschillende in omloop zijnde IE's (IE6, IE7, IE8) er verschillende snelheden op na houden. En het zou wellicht ook nog eens kunnen afhangen van de Windows-variant, de snelheid van de processor, en de belasting van de pc door op dat moment openstaande andere programma's...
  • In principe zou je het kunnen aanpakken met een "conditional comment" (eventueel 3 stuks, voor de verschillende IE's), waarin een script dat regelt hoeveel sneller IE het moet doen dan de rest.
  • Het zou ook nog kunnen door het hele script voor IE te vergeten (via een "inverse conditional comment" alleen toedienen aan de rest), en voor IE de overgang regelen met het IE-only "BlendTrans" filter (al dan niet voor de verschillende IE-versies in verschillend tempo).
Met vriendelijke groet,
CSShunter
 
Ok,..iets Te ingewikkeld voor mij. :)
Maar bedankt voor de uitleg en hulp!!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan