Notifikationer

Markér alle som læst Log ud

fixbabe Nybegynder

28. februar 2008 - 15:47 Der er 20 kommentarer og
1 løsning

Drop down box

Jeg har en liste af filer hvor meningen er at når man klikker på filens titel så "kører en kasse ned med info om filen" altså en form for drop down box med info.

Synes godt om

w13 Novice

28. februar 2008 - 18:00 #1

Skal det være animeret, altså med bevægelse?

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 19:41 #2

ja meget gerne

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 19:44 #3

Jeg havde tænkt mig noget lign http://fex.dk/eks.gif

Synes godt om

w13 Novice

28. februar 2008 - 20:01 #4

Og hvornår skal kassen forsvinde igen?

Synes godt om

w13 Novice

28. februar 2008 - 20:16 #5

Noget i denne stil?
------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript" language="javascript">
var StatusWait=false;
function StatusBox(o){
if(StatusWait)return;
StatusWait=true;
if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);
else hideStatusBox(o);
}

function appearStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=0;
if(iHeight<120){
elm.style.display="block";
elm.style.height=iHeight+"px";
if(iHeight<70)iHeight+=3;
else if(iHeight<100)iHeight+=2;
else iHeight++;
window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",40)
}else{
elm.style.overflow="auto";
StatusWait=false
}
}

function hideStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=elm.offsetHeight;
if(iHeight>1){
elm.style.overflow="hidden";
elm.style.height=iHeight+"px";
if(iHeight>50)iHeight-=3;
else if(iHeight>30)iHeight-=2;
else iHeight--;
window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",40)
}else{
elm.style.display="none";
StatusWait=false
}
}
</script>

<a href="java script:StatusBox('info1');void(0)">Hej for dig</a>

<div id="info1" style="display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px">
<div style="margin:0;padding:2px;background-color:#ccc;font-weight:bold;font-size:14px">Overskrift</div>
Andet tekst her!<br>
Og her!
</div>

<br><br>

<a href="java script:StatusBox('info2');void(0)">Hej for dig</a>

<div id="info2" style="display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px">
<div style="margin:0;padding:2px;background-color:#ccc;font-weight:bold;font-size:14px">Overskrift</div>
Andet tekst her!<br>
Og her!
</div>

</body>
</html>

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 20:18 #6

Næsten som jeg havde tænkt mig :) bare hvor man trykker på "overskrift" den må gerne gå lidt hurtigere ned

Synes godt om

w13 Novice

28. februar 2008 - 20:20 #7

JavaScriptet kan du komprimere til:

<script type="text/javascript" language="javascript">
var StatusWait=false;function StatusBox(o){if(StatusWait)return;StatusWait=true;if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);else hideStatusBox(o)}
function appearStatusBox(o,iHeight){var elm=document.getElementById(o);if(!iHeight)iHeight=0;if(iHeight<120){elm.style.display="block";elm.style.height=iHeight+"px";if(iHeight<70)iHeight+=3;else if(iHeight<100)iHeight+=2;else iHeight++;window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",40)}else{elm.style.overflow="auto";StatusWait=false}}
function hideStatusBox(o,iHeight){var elm=document.getElementById(o);if(!iHeight)iHeight=elm.offsetHeight;if(iHeight>1){elm.style.overflow="hidden";elm.style.height=iHeight+"px";if(iHeight>50)iHeight-=3;else if(iHeight>30)iHeight-=2;else iHeight--;window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",40)}else{elm.style.display="none";StatusWait=false]}
</script>

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 20:30 #8

hmm så virker det ikke :S

Synes godt om

w13 Novice

28. februar 2008 - 20:31 #9

Nå ok, så mangler der et tegn et sted. Jeg retter lige til.

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 20:35 #10

Kunne du lave sådan at det var "overskiften" man trykkede på og sådan at boxen kørte lidt hurtigere ned?

Synes godt om

g0t Nybegynder

28. februar 2008 - 20:35 #11

har lavet sådan en jeg bruger ofte. Værsgo..

<a href="java script:;" onmousedown="if(document.getElementById('728').style.display == 'none'){ document.getElementById('728').style.display = 'block'; }else{ document.getElementById('728').style.display = 'none'; }">Filens navn</a>
<div id='728' style='display:none;border-top:1px #AAAAAA dotted;padding:4px;'>
<b>Størrelse:</b> 700kb<br />
<b>Type:</b> Billede, Jpeg<br />
</div>

Synes godt om

w13 Novice

28. februar 2008 - 20:37 #12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.statusheadline{width:250px;cursor:pointer;background-color:#ccc;border:1px solid #ccc;font-size:14px:font-weight:bold}
.statustext{display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px}
</style>
</head>
<body>

<script type="text/javascript" language="javascript">
var StatusWait=false;
function StatusBox(o){
if(StatusWait)return;
StatusWait=true;
if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);
else hideStatusBox(o);
}

function appearStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=0;
if(iHeight<120){
elm.style.display="block";
elm.style.height=iHeight+"px";
if(iHeight<70)iHeight+=3;
else if(iHeight<100)iHeight+=2;
else iHeight++;
window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",10)
}else{
elm.style.overflow="auto";
StatusWait=false
}
}

function hideStatusBox(o,iHeight){
var elm=document.getElementById(o);
if(!iHeight)iHeight=elm.offsetHeight;
if(iHeight>1){
elm.style.overflow="hidden";
elm.style.height=iHeight+"px";
if(iHeight>50)iHeight-=3;
else if(iHeight>30)iHeight-=2;
else iHeight--;
window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",10)
}else{
elm.style.display="none";
StatusWait=false
}
}
</script>

<div class="statusheadline" onclick="StatusBox('info1')">Overskrift</div>
<div id="info1" class="statustext">
Andet tekst her!<br>
Og her!
</div>

<div class="statusheadline" onclick="StatusBox('info2')">Overskrift</div>
<div id="info2" class="statustext">
Andet tekst her!<br>
Og her!
</div>

</body>
</html>

Synes godt om

w13 Novice

28. februar 2008 - 20:40 #13

Og komprimeret, der er testet:
------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">.statusheadline{width:250px;cursor:pointer;background-color:#ccc;border:1px solid #ccc;font-size:14px:font-weight:bold}.statustext{display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px}</style>
</head>
<body>

<script type="text/javascript" language="javascript">var StatusWait=false;function StatusBox(o){if(StatusWait)return;StatusWait=true;if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);else hideStatusBox(o)}function appearStatusBox(o,iHeight){var elm=document.getElementById(o);if(!iHeight)iHeight=0;if(iHeight<120){elm.style.display="block";elm.style.height=iHeight+"px";if(iHeight<70)iHeight+=3;else if(iHeight<100)iHeight+=2;else iHeight++;window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",10)}else{elm.style.overflow="auto";StatusWait=false}}function hideStatusBox(o,iHeight){var elm=document.getElementById(o);if(!iHeight)iHeight=elm.offsetHeight;if(iHeight>1){elm.style.overflow="hidden";elm.style.height=iHeight+"px";if(iHeight>50)iHeight-=3;else if(iHeight>30)iHeight-=2;else iHeight--;window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",10)}else{elm.style.display="none";StatusWait=false}}</script>

<div class="statusheadline" onclick="StatusBox('info1')">Overskrift</div>
<div id="info1" class="statustext">
Andet tekst her!
</div>

<div class="statusheadline" onclick="StatusBox('info2')">Overskrift</div>
<div id="info2" class="statustext">
Andet tekst her!
</div>

</body>
</html>

Synes godt om

w13 Novice

28. februar 2008 - 20:41 #14

Den virker selvfølgelig i samtlige browsere. ;)

Synes godt om

g0t Nybegynder

28. februar 2008 - 20:43 #15

Har lavet den så den ser ud som du vil ha den :)
http://www.g0t.dk/idropdown.htm

Bare højreklik og kopier kildekoden/sourcekoden

Mvh
Troels

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 20:45 #16

Perfekt :) jeg takker mange mange gange

Synes godt om

w13 Novice

28. februar 2008 - 20:45 #17

Den mangler bare at være animeret, q0t. ;)
Jeg var i tvivl, om fixbabe ønskede det, men det fremgår af 28/02-2008 19:41:57.

Synes godt om

w13 Novice

28. februar 2008 - 20:45 #18

Så lidt. =) Og tak for point!

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 21:00 #19

kan man lave "flydende" højde på kassen? sådan at den tilpasser sig indholdet ?

Synes godt om

g0t Nybegynder

28. februar 2008 - 21:35 #20

Ah havde jeg ikke set :) men ellers nemt alternativ, og koden er ikke stor :)

Synes godt om

fixbabe Nybegynder

28. februar 2008 - 21:45 #21

Tak til jer begge for jeres forslag :)

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	4	27/04/202620:09	I går 22:36
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