CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

robson Nybegynder

10. december 2007 - 12:03 Der er 12 kommentarer og
1 løsning

Cross browser - side fade

Hej

Jeg skal have lavet en fade funktion på et website :)

Hele min siden skal fades ind!

Jeg har fundet frem til at dette i IE kan gøres med

<meta http-equiv=Page-Enter content=blendTrans(duration=0.5)>

MEN det skal også fungere i Firefox, Safari og så mange andre browsere som muligt :)

Nogle der har en god ide??

Synes godt om

roenving Novice

10. december 2007 - 14:10 #1

Du kan fade alle elementer, så du kan sætte et element, der rummer alt andet på din side, og så benytte dig af teknikken her: http://roenving.users.whitehat.dk/WD5Opacity.html

Synes godt om

robson Nybegynder

10. december 2007 - 15:02 #2

Fed funktion :)
Men jeg kan ikke umiddelbart få det til at fungere på mit side indhold... Jeg har en div opbygget side og jeg har forsøgt at lægge startOpChange på både div taggen og body taggen - uden held :(
Burde funktionen fungere på min div tag??

Synes godt om

robson Nybegynder

10. december 2007 - 15:07 #3

...forresten så har jeg lagt funktions kaldet i body onload - se herunder

<body onload="initFade();">
<div id="test">
<div>test tekst</div>
<div>Div 1</div>
<div>Div 2</div>
<div><img src="images/etfoto.jpg" /></div>
</div>
</body>

function initFade() {
var oDiv = document.getElementById("test");
startOpChange(oDiv,50,2)
}

(din kode ligger naturligvis i head!!)

Synes godt om

roenving Novice

11. december 2007 - 00:09 #4

-- og du har selvfølgelig også funktionen i script-tags ?o]

-- får du fejl (og kan du lægge et link ?-)

Synes godt om

robson Nybegynder

11. december 2007 - 08:51 #5

Jeg har oprettet en test side - se http://eksperten.ft-test.dk/

Jeg kalder din funktion 3 gange - onload, mouseover på overordnet div, mouseover på image - jeg kan kun få det til at virke på image...

Synes godt om

roenving Novice

11. december 2007 - 17:04 #6

Det er fordi din div ikke 'har layout', et M$-begreb, som kræves opfyldt for at filtre virker, prøv f.eks. at sætte width:100%; på diven !-)

Synes godt om

robson Nybegynder

12. december 2007 - 08:43 #7

SUPER :) det var lige det der skulle til! Det er testet i IE 6.0, IE 7.0, Firefox 2.0, og Safari Mac. Den endelige kode bliver altså:

<html>
<head>

<script language="javascript" type="text/javascript">

var OpC = new Array();
var ie,moz,css3; function startOpChange(elm,end,tim){
ie = !!elm.filters;
moz = elm.style.MozOpacity != undefined;
css3 = elm.style.opacity != undefined;
if (!ie && !moz && !css3)return;
var idx = OpC.length;
for(var i=0;idx>i;i++){
if(OpC[i][0]==elm){
clearInterval(OpC[i][4]);
idx = i;
break;
}
OpC[idx] = new Array();
}
if(idx==0)OpC[idx] = new Array();

if(ie)actOp=elm.filters.alpha.opacity;
else if(css3)actOp=(elm.style.opacity*100);
else actOp=(elm.style.MozOpacity*100);
if (actOp!=end){
OpC[idx][0]=elm;
OpC[idx][1]=actOp;
OpC[idx][2]=end;
OpC[idx][3]=(end>actOp)?1:-1;
var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
}
}

function opChange(idx){
OpC[idx][1]+=OpC[idx][3];
if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
else if(css3)OpC[idx][0].style.opacity=Math.min(0.99,OpC[idx][1]/100);
else OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
return;
}
}

function initFade() {
var oDiv = document.getElementById("test");
startOpChange(oDiv,100,1);
}

</script>

</head>
<body onload="initFade();">
<div id="test" style="width:100%;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;" onmouseover="startOpChange(this,50,1);">
<div><h1>Fade test</h1></div>
<div><img src="http://www.eksperten.dk/img/elogo.png" onmouseover="startOpChange(this,100,1);" align="left" style="filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut lectus sit amet lorem consequat congue. Etiam vulputate fringilla erat. Nam ultrices erat vitae felis. Mauris porttitor. Donec ultrices velit ut neque. Curabitur commodo sem nec ligula. Suspendisse lobortis erat dictum lacus. Vivamus dapibus. Nulla sodales sapien sed mauris.</div>
</div>
</body>
</html>

Synes godt om

robson Nybegynder

12. december 2007 - 08:44 #8

Smid en svar roenving så jeg kan give dig nogle velfortjente points :) tak for hjælpen!

Synes godt om

robson Nybegynder

12. december 2007 - 11:45 #9

Lige et mindre spørgsmål... jeg kunne godt tænke mig at sætte hastigheden på faden op! Når jeg ændre funktionskaldet til startOpChange(oDiv,100,5) så sættes hastigheden ned, men så vidt jeg kan se kan jeg ikke benytte komma tal her - fx 0.5
Hvordan opnår jeg dette?

I Safari er faden ulidelig langsom... :(

Synes godt om

roenving Novice

13. december 2007 - 00:20 #10

-- det sidste problem kender jeg godt, men har ikke umiddelbart nogen løsningsmuligheder, jeg gætter på, at det er browserens native javascript-eksekveringshastighed på setTimeout/-Interval, der i hvert fald ikke kan komme længere ned end omkring 30 millisekunder i de tests, jeg har lavet ...

-- om der kan laves en tilpasning, der sætter opacity-ændringen op pr. interval, har jeg ikke haft tid til at teste !-)

-- els velbekomme '-)

Synes godt om

roenving Novice

13. december 2007 - 00:21 #11

-- hov, du skal også huske at bruge en gyldig doctype, så de fleste browsere fortolker så meget som muligt css ens:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...

Synes godt om

robson Nybegynder

13. december 2007 - 08:46 #12

ok - jeg prøver at teste lidt på hastigheden... :)

Tak for hjælpen roenving!!

Synes godt om

roenving Novice

13. december 2007 - 15:52 #13

-- og jeg takker for point ;~}

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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