Notifikationer

Markér alle som læst Log ud

stig69 Nybegynder

03. maj 2007 - 13:39 Der er 12 kommentarer og
1 løsning

Tekst skal fade ind

Jeg har lidt tekst i en div, som skal fade ind i løbet af 3-4 sekunder.

Er der nogle der har et lille javascript, som virker både i Mozilla, firefox og ie?

- Stig

Synes godt om

stig69 Nybegynder

03. maj 2007 - 13:42 #1

Har det her script, men det virker kun i IE

<html>
<head>
<meta name="Generator" content="Stone's WebWriter 4" />
</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);
}

</script>

<body onLoad="java script:fadeIn(box, 40, 80, 1000);">
<div id="box" style="position: absolute; left:100px; top:100px; font-family: verdana; font-size:13px; text-transform:uppercase; filter: alpha(opacity=0); -moz-opacity:0; color:#666666;">Eksperten</div>
</body>
</html>

Synes godt om

roenving Novice

03. maj 2007 - 13:44 #2

Kig på eksemplet på http://roenving.users.whitehat.dk/WD5Opacity.html ...

-- og en modifikation i denne tråd: http://www.eksperten.dk/spm/535320 !-)

Synes godt om

stig69 Nybegynder

03. maj 2007 - 13:49 #3

--> Roenving. Har kigget på dit script. Vil det ikke være muligt at tilpasse "mit" eget?

Synes godt om

roenving Novice

03. maj 2007 - 13:57 #4

Som du måske kan se, er mit script nok lidt overkill, hvis det kun er et enkelt element, der skal fades på, til gengæld kan man så også bruge fade-tingen til andre ting, så umiddelbart vil jeg bare anbefale, at du bare tager scriptet !-)

Synes godt om

stig69 Nybegynder

03. maj 2007 - 14:00 #5

Er igang med at tilrette det... Er bare lidt doven idag :-)

Synes godt om

stig69 Nybegynder

03. maj 2007 - 14:05 #6

Jeg har fået tilrettet dit script, men det slår ikke igennem i mozilla:

<html>
<head>
<title>Fade in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF="style/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body{padding:10px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;line-height:1.5;overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1)
function startOpChange(elm,end,tim){
if (!ie && !moz)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 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 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;
}
}
</script>
</head>
<body onLoad="startOpChange(fisk,100,3);">
<div id="fisk" style="float:left;width:250px;height:250px;filter:alpha(opacity=0);-moz-opacity:0;">Denne tekst fader ind</div>

Synes godt om

roenving Novice

03. maj 2007 - 14:16 #7

Tag koden fra hjemmesiden, den dur også i en stribe andre browsere:

<script 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;
}
}
window.onload = function(){startOpChange(document.getElementById("fisk"),100,3);};
</script>

<body>
<div id="fisk" style="float:left;width:250px;height:250px;filter:alpha(opacity=0);-moz-opacity:0;">Denne tekst fader ind</div>

-- og grunden til, at det ikke virker i andre browsere end IE er, at din konstruktion kræver, at document.all findes, hvilket den altså kun gør i IE (og Opera !-)

Synes godt om

stig69 Nybegynder

03. maj 2007 - 14:24 #8

Jeg takker mange gange. Hvis du smider et svar er der point

Synes godt om

roenving Novice

03. maj 2007 - 14:29 #9

Velbekomme '-)

-- og med de nyere Operaer på vognen også, så skulle den være duelig i stort set alle moderne browsere !-)

Synes godt om

stig69 Nybegynder

03. maj 2007 - 14:34 #10

Synes godt om

roenving Novice

03. maj 2007 - 14:37 #11

Tak for point ;~}

Synes godt om

stig69 Nybegynder

03. maj 2007 - 15:27 #12

Så lidt

Kan man ændre begyndelses farven? Så teksten f.eks. fader fra cyan til magenta

Synes godt om

roenving Novice

03. maj 2007 - 15:31 #13

Nej, men man kan på lignende måde ændre color på elementet ...

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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