Notifikationer

Markér alle som læst Log ud

da_darkside Nybegynder

10. august 2003 - 00:28 Der er 8 kommentarer og
1 løsning

How to move a div

Hvordan får jeg eks en <div>test</div> til at flytte sig fra en bestem position til en anden når man eks loader siden, og derefter forsvinde efter eks 10 sec.

Synes godt om

mm12010 Nybegynder

10. august 2003 - 11:44 #1

prøv at kigge her:
http://slws1.bau-verm.uni-karlsruhe.de/module/internet/DHtml/dhtml_examples/layers.htm

Synes godt om

torstenhagemann Nybegynder

11. august 2003 - 00:08 #2

du skal lige have sat tiden, brug <body onLoad="..." onUnload="...">.

Synes godt om

roenving Novice

11. august 2003 - 01:02 #3

Her er der en, du skal huske at sætte flyt-intervallet, sådan at den faktisk begynder at bevæge sig -- her skal den flytte sig 200 px, så den må oftest flytte sig 10/200 sekund = 50 millisekunder ...

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
var d = null;
var startX = 153;
var startY = 200;
var slutX = 353;
var slutY = 400;
var tid = 10000;
var mov = 50;
var stop = 0;
function moveDiv(){
var sl = tid/mov;
tid -=mov;
if(0>=tid){
clearInterval(stop);
d.style.display="none";
return;
}
startX += Math.floor((slutX-startX)/sl);
startY += Math.floor((slutY-startY)/sl);
d.style.top = startY;
d.style.left = startX;
}
function initMove(){
d = document.getElementById('minDiv');
stop = setInterval('moveDiv()',mov);
}
</script>
</head>
<body onload="initMove()">
<div id="minDiv" style="position:absolute;top=153px;left=200px;height:100;width:100;background:#26a;">En div-tekst</div>
</body>
</html>

Synes godt om

roenving Novice

11. august 2003 - 01:36 #4

Fandt lige på en anden algoritme, så den bevæger sig uanset hvilke værdier man bruger:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
var d = null;
var startX = 153;
var startY = 200;
var slutX = 353;
var slutY = 400;
var stop = deltaTid = 0;
var tid = 10000;
var mov = 25;
function moveDiv(){
deltaTid += mov;
if(deltaTid>=tid){
clearInterval(stop);
d.style.display="none";
return;
}
d.style.top = startY - ((startY-slutY)*deltaTid/tid);
d.style.left = startX - ((startX-slutX)*deltaTid/tid);
}
function initMove(){
d = document.getElementById('minDiv');
stop = setInterval('moveDiv()',mov);
}
</script>
</head>
<body onload="initMove()">
<div id="minDiv" style="position:absolute;top=153px;left=200px;height:100px;width:100px;background:#6ae;font-family:sans-serif;font-weight:800;font-size:15px;text-align:center;color:#60187A">En div-tekst</div>
</body>
</html>

Synes godt om

da_darkside Nybegynder

16. august 2003 - 19:01 #5

roenving > ganske godt, men en ting - jeg vil gerne have boxen bliver stående der hvor den slutter, og ikke forsvinder helt :-/

Synes godt om

roenving Novice

17. august 2003 - 10:38 #6

Du havde da ellers skrevet at den skulle forsvinde efter 10 sekunder ?-)

-- så du må lige fortælle hvad du vil have den til !-)

Skal den blive stående 10 sek. ekstra, når den er nået på plads, eller ...

Synes godt om

da_darkside Nybegynder

17. august 2003 - 11:17 #7

roenving > lige nøjagtigt :)

Synes godt om

roenving Novice

17. august 2003 - 12:38 #8

Sådan !-)

if(deltaTid>=tid){
clearInterval(stop);
setTimeout('d.style.display="none"',10000);
return;
}

-- du skal bare skifte den stump ud med det som ellers står '-)

Synes godt om

roenving Novice

21. august 2003 - 15:54 #9

-- og tak for points ;~}

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