Notifikationer

Markér alle som læst Log ud

zuiq Nybegynder

20. januar 2003 - 17:51 Der er 14 kommentarer og
1 løsning

Fadeout på DIV-layer.

Hey,
Jeg skal bruge et javascript der kan få et div layer til at "fade ud" (med opasity i ved). Jeg skal kunne kalde scriptet som funktion sådan her :

hide('*det layer der skal fade ud*',*den tid der skal gå, før at layeret fader ud. en WAITTIME*)

fx. hvis layeret hedder "hej" og dens waittime skal være 1000:

hide('hej',1000);

Det var det :D..

På fårhånd tak,
Mads

Synes godt om

nozio Nybegynder

20. januar 2003 - 17:59 #1

Har denne liggende:

<script language="JavaScript1.1" type="text/javascript">
var a=0
function fade(){
if(document.all)
tekst.filters.alpha.opacity=100 - a*3
a++
setTimeout("fade()",80)
}
</script>

Synes godt om

nozio Nybegynder

20. januar 2003 - 18:10 #2

du skal måske have denne med:

<div id="tekst" style="position: absolute; left:23px; top:77px; z-index : -10; filter:alpha(opacity=0)">
.... et eller andet ......
</div>

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 18:46 #3

Her en lille omskrivning, som er lidt mere konfigurerbar - derudover så stopper den også med at fade - hvorimod nozio's eksempel ikke vil stoppe med at sætte layerets opacity til 0 når den når derned (der er ingen stop-condition) (hvilket jeg mener er en meget graverende fejl - på et tidspunkt løber a nemlig over [Overflow])

Her kan man sætte, hvormange steps man ønsker at fade med -- jo flere steps - jo blødere fading -- og derudover kan man også sætte delay for fadingen - jo mindre delay - jo hurtigere fading :

her er koden :
<script>
var s=0;
var fadeDelta = 0;
var tFader;
function fadeout(obj, steps, delay) {
fadeDelta = (100/steps)+1;
obj.filters.alpha.opacity = 100 - (s*fadeDelta);
if(s<steps+1) {
s++;
var f = function fFade() { fadeout(obj, steps); }
tFader = setTimeout(f,delay);
}
}
function fadeIt(id, steps, delay) {
fadeout(document.getElementById(id), steps, delay);
}
</script>

<body>
<div onClick="fadeIt('box', 40, 80);"> HER! </div>
<div id="box" style="position: absolute; left:100px; top:100px; background-color:#0000ff; filter: alpha(opacity=100); color:#ffffff;">
Fading box
</div>
</body>

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 18:51 #4

Og hvis du gerne vil have den til at fade efter f.eks. 5 sekunder, så bruger du følgende funktion :

function hide( id, steps, delay, pause) {
var obj = document.getElementById(id);
var f = function fFadeIt() { fadeout( obj, steps, delay ); }
this.setTimeout(f, pause);
}

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 19:12 #5

Jeg har lige lavet nogle små-rettelser og forbedringer, så her er lige hele koden igen... Her fader den, hvis man trykker på "HER !" - og ellers så fader den 5 sekunder efter siden har loadet...

<html>
<head>
</head>

<script>
var s=0;
var fadeDelta = 0;
var tFader;
function fadeout(obj, steps, delay) {
fadeDelta = (100/steps)+1;
obj.filters.alpha.opacity = 100 - (s*fadeDelta);
if(s<steps+1) {
s++;
var f = function fFade() { fadeout(obj, steps, delay); }
tFader = setTimeout(f,delay);
} else {
obj.display = "none";
}
}
function fade(obj, steps, delay, pause) {
var f = function fFadeout() { fadeout( obj, steps, delay ); }
this.setTimeout(f, pause);
}
</script>

<body onLoad="java script:fade(box, 40, 80, 5000);">
<div onClick="java script:fade(box, 40, 80, 0);"> HER! </div>
<div id="box" style="position: absolute; left:100px; top:100px; background-color:#0000ff; filter: alpha(opacity=100); color:#ffffff;">
Hejsa
</div>
</body>
</html>

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 20:12 #6

Og her er så den STORE pakke... foranlediget af dit spm har jeg optimeret koden og lavet det sådan at man både kan fade in _og_ ud ...

Her er koden
<html>
<head>
</head>

<script>
var fadeFrame = 0;
var tFader;
function fadeIt(obj, steps, delay, delta) {
if(delta>0) {obj.display = "block";}
if(delta<0 && obj.filters.alpha.opacity==0) {obj.display="none";}

obj.filters.alpha.opacity = obj.filters.alpha.opacity + delta;

if(fadeFrame<steps+1) {
++fadeFrame;
var fFadeIt = function a() { fadeIt(obj, steps, delay, delta); };
tFader = setTimeout(fFadeIt,delay);
}
}
function fadeIn (obj, steps, delay, pause ) {
clearTimeout(tFader);
fadeFrame=0;
var fadeDelta = (((100-(obj.filters.alpha.opacity))/steps)+1);
var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
this.setTimeout(fade, pause);
}
function fadeOut(obj, steps, delay, pause ) {
clearTimeout(tFader);
fadeFrame=0;
var fadeDelta = -((obj.filters.alpha.opacity/steps)+1);
var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
this.setTimeout(fade, pause);
}
</script>

<body onLoad="java script:fadeOut(box, 40, 80, 6000);">
<div onClick="java script:fadeIn(box, 40, 80, 0);"> IN </div>
<div onClick="java script:fadeOut(box, 40, 80, 0);"> OUT </div>
<div id="box" style="position: absolute; left:100px; top:100px; background-color:#0000ff; filter: alpha(opacity=100); color:#ffffff;">
Hejsa
</div>
</body>
</html>

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 20:26 #7

BRUGSVEJLEDNING:
fadeIn( obj, steps, delay, pause);
fadeOut( obj, steps, delay, pause);
de forskellige parametre
obj - det element du vil fade...
steps - antal steps/frames, du vil have fadingen til at foregå over.. [1..100]
delay - antal millisekunder mellem hver frame
pause - antal millisekunders pause, inden fadingen begynder

Synes godt om

zuiq Nybegynder

20. januar 2003 - 20:59 #8

Kan du ikke også lave sådan at når opasityen på layeret er 0%, så bliver layeret gemt (document.all.object.style.visibility = 'hidden';).

På forhånd tak,
Mads

Synes godt om

bearhugx Nybegynder

20. januar 2003 - 21:21 #9

faktisk er det det, som sker i linien
if(delta<0 && obj.filters.alpha.opacity==0) {obj.display="none";}

hvis
delta < 0 (vi fader ud)
og
obj.filters.alpha.opacity==0 (synligheden er nået nul)

så
obj.display="none"; (sæt display="none" == layeret bliver gemt)

Det kan evt være at display="none" kun er en IE ting, men har lige slået op - og object.display er en CSS level 2, så det er altså standard (omend jeg ved mange netscape-minded-kodere bruger style.visiblity = hidden)

ellers så kan du jo bare udskifte med
if(delta<0 && obj.filters.alpha.opacity==0) {obj.style.visibility="hidden";}

/Søren ;-)

Synes godt om

zuiq Nybegynder

21. januar 2003 - 14:51 #10

Bearhugx, du er bare for cool *G*..
Tusind tak for hjælpen.

Mvh.
Mads / ZuiQ

Synes godt om

zuiq Nybegynder

21. januar 2003 - 15:36 #11

Jeg ved godt at spørgs målet er lukket, men har lige et spg. omkring dit script. Hvis jeg gerne vil kalde fadeout funktionen og har en streng der hedder "hej" som indeholder "1", hvordan gør jeg så?.
Normalt ville jeg gøre sådan her:

fadeOut('box'+1,40,40,0);

Hvorfor virker det ik?

Mvh.
Mads, ZuiQ

Synes godt om

zuiq Nybegynder

21. januar 2003 - 15:40 #12

ups.. jeg mente :

fadeOut('box'+hej,40,40,0);

Synes godt om

bearhugx Nybegynder

21. januar 2003 - 16:56 #13

Det er helt ok at spørge uddybende... :-) (jeg bidder ikke)

hvis du f.eks. har følgende :
<div id="hej" style="...bla bla bla..."> 1 </div>

så bruger du fadeOut(hej, 40, 40, 0);

dvs. at du ikke skal kalde alt for "box" -- det var kun den i mit eksempel :-)

Got it ? -- ellers så spørg igen :-)

/Søren Munk Skrøder

PS: til visibility="hidden" vs. display="none" - debatten
Jeg har lige læst dokumentationen fra W3C igennem - og kan konstatere at der er forskel på de to metoder (det følgende er lidt langhåret - evt. spring til konklusion i bunden)...

ALTSÅ,
hvis man bruger visi="hidden", så kommer div'et stadigvæk med i formateringsmodellen - men med 100% gennemsigtighed (usynlig) - hvis det nu ikke var et layer (abs. positionering), men en sektion i body, så ville der stadigvæk være et gabende "hul", der hvor sektionen er --
Derimod gør display="none" at div'et ikke kommer med i formatieringsmodellen - det vil sige, at det ikke bare er usynligt/gemt - det er der slet ikke :-) -- så hvis vi (igen) siger at div'et var en sektion i body, så ville der ikke være noget hul (da div'et ikke optræder i formateringsmodellen)

KONKLUSION :
Om du bruger visi="hidden" eller display="none" i dette tilfælde er lige meget - effekten i forbindelse med absolut positionerede layers er ens - ingen af dem ses.
Hvis du dog har brug for at skjule noget i body'et, så bør du dog bruge display="none";

Jeg har lavet et eksempel på, hvad jeg mener ...
tag følgende HTML-kode - gem det i en fil og se forskellen :-)

<html>
<body>
<table style="width:300px; background-color:#aaddff;">
<tr>
<td>
<p>
<img src="http://www.eksperten.dk/img/eksperten_logo_new.gif" align="left">
NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL NORMAL
<hr/>

<img src="http://www.eksperten.dk/img/eksperten_logo_new.gif" align="left"
style="visibility:hidden;">
Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility Visbility
<hr/>

<img src="http://www.eksperten.dk/img/eksperten_logo_new.gif" align="left"
style="display:none;">
Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display Display
</p>
</td>
</tr>
</table>
</body>
</html>

Synes godt om

zuiq Nybegynder

21. januar 2003 - 17:14 #14

Nej det jeg mente var:

Jeg har et div layer:
<div id="box1" style="...bla bla bla...">blahblah</div>

Og så har jeg en streng:
<script>
...blahblah...
nummer = '1';
...blahblah...
</script>

Og så jeg vil gerne kalde fadeout funktionen:

Hvor boxen hedder box1, altså box + indeholdet af nummer.
Det ville jeg normalt gøre sådan her:

fadeOut('box'+nummer,40,40,0);

Men det virker ik?
Hvordan gør jeg det.

Mvh.
Mads

Synes godt om

crapman Nybegynder

12. november 2003 - 10:05 #15

Jeg har leget lidt med scriptet her, og ville da egentligt godt lige vide hvordan man får boksen til at være gemt når scriptet loades.....!?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS