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

botha1 Nybegynder

16. august 2004 - 15:59 Der er 10 kommentarer og
1 løsning

fold ud ved tryk

hvordan laver DR dette?

http://www.dr.dk/nav/programoversigt/w3c/epg.asp?media=TV&venstre=true

Jeg tænker på at TVprogrammets beskrivelse "folder" sig ud ved tryk på et TV program.

Synes godt om

fennec Nybegynder

16. august 2004 - 16:05 #1

De har en masse DIV's, som har display:'none' som style.

Der er så en onclick action på programteksten, som ændrer display:'block' eller tilbage til display:'none'.

Vil du gerne have et simpel eks på hvordan det gøres???

Synes godt om

botha1 Nybegynder

16. august 2004 - 16:11 #2

jotak :-)

Synes godt om

fennec Nybegynder

16. august 2004 - 16:25 #3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Foldud Test</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<a href="#" onclick="showHideDiv('enGemtDiv1')">Tryk Her</a><br>
<div id="enGemtDiv1" style="display:'none'">
Her står en tekst
</div><br>

<a href="#" onclick="showHideDiv('enGemtDiv2')">Tryk Her</a><br>
<div id="enGemtDiv2" style="display:'none'">
Her står noget mere tekst
</div><br>

</body>
</html>

Siden består af en JavaScript funktion, som undersøger om div'en bliver vist (block) eller er skjult (none), også sætter den til det modsatte.

Div'erne er pr default skjult (style="display:'none'"), og ved tryk på linket kaldes funktionen, med den div's id, som skal ændre status.

Du kan lave lige så mange div's og tilhørende link som du vil. Der skal bare være et unikt id på alle div'erne.

Synes godt om

botha1 Nybegynder

16. august 2004 - 23:11 #4

undskyld jeg bliver ved, men dets er meget fint ud, men hvorfor kan dette så ikke virke, kan du overskue det?
Hvis du bare kan se hvor det går galt, kan jeg forhåbentlig selv rette det til (undskyld det ser lidt rodet ud, men det er et udtræk fra en database)

--

<html>

<head>
<title></title>
<base target="kurv">
</head>

<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<h2 align="center"><font color="#454F6A" face="Verdana" >Køler P4  </font></h2>

<form NAME="bestil" method="POST" action="varekurv.asp?kode=bestil">

<div align="center">
<center>

<table border='1' width='550' height='75' bordercolor='#454F6A' style="border-collapse: collapse" cellpadding="0" cellspacing="0">

<tr><td width='500' colspan='3' bgcolor='#454F6A'><left><b><font color='#FFFFFF' size='2' face='Verdana'>  Køler P4 Viking, Støjsvag 21dB</font></font><font size='2' color="#FFFFFF"><font face="Verdana">
- KR. 139</font><font size='2'><font face="Verdana"></b></center></td></tr></font><tr>
<td width='15%'><font face="Verdana" font size="2"><a href="varebeskrivelse.asp?kode=2412" target="external" onclick="window.open('', 'external', 'width=500,height=500')"><img border="0" src="../varefoto/KØL-VIKING4.jpg" width="75" alt="[ se foto i stort format ]" ></a>
</font></font>

<td>
<font size='2' face="Verdana">
Varenummer : KØL-VIKING4<br>Køler P4 Viking, Støjsvag 21dB<br><font size='3'><b><font size='2'>pr. stk. kr. 139 </b><a target="_self" href="#" onclick="showHideDiv('KØL-VIKING4')"><font color="#000000">[
yderligere info ]</a></font></b></font></td>
<td width="15%" align="center"><font face="Verdana"><input TYPE="value" NAME="antal" VALUE="1" SIZE="3"><font size='2'>
Stk.<br>
</font>
<font size='5'>

<input type="hidden" name="telefonnummer" size="20" value="97321010">
<input type="hidden" name="varenummer" size="20" value="KØL-VIKING4">
<input type="hidden" name="varetekst" size="20" value="Køler P4 Viking, Støjsvag 21dB">
<input type="hidden" name="apris" size="20" value="139">

<input TYPE="submit" NAME="bestil" VALUE="Bestil"><font size='2'>

</font>
</td>
</tr>
</font>
<div id="KØL-VIKING4" style="display:'none'">
<font size='2'><tr>
<td width='100%' colspan="3">dette er lidt ekstra tekst</tr>
</div>

</table>

</center>
</div>
</form>
</font>
</font>

<font size='2' color="#FFFFFF">

<p></p>
</font>

</body>
</html>

Synes godt om

botha1 Nybegynder

16. august 2004 - 23:45 #5

ok jeg har fundet en løsning, det var tabellen der drillede

Synes godt om

botha1 Nybegynder

16. august 2004 - 23:45 #6

svar venligst og få dine velfortjente point

Synes godt om

fennec Nybegynder

17. august 2004 - 08:10 #7

Du har nok siddet længe oppe i går :o)
Det var da godt du fik det til at virke. Som en lille detalje, behøver du ikke nødvendigvis at bruge div's. Alle HTML elementer vil modtage "display" attributten (kan ikke komme på nogen, som ikke vil). Du kan f.eks også bruge tabeller. Du kan endag bruge TD eller TR. Der skal bare angives et id på elementet.

Synes godt om

botha1 Nybegynder

17. august 2004 - 16:07 #8

tak for hjælpen

lige en hurtig +'er hvis du kan hjælpe med også forhøjer jeg til 100 point
Hvis jeg har en liste der er meeeget lang, og vil trykke på "yderligere info" så åbner den også som den skal, men samtidig bliver man smidt op foroven på siden. Så man skal rulle ned for at se det man har foldet ud.
Jeg håber du forstår hvad jeg mener.

Synes godt om

fennec Nybegynder

17. august 2004 - 16:38 #9

Det gør jeg.
Du kan lave noget der hedder "anchor". Det er en måde at springe til et bestemt sted på en side, ved hjælp af link. Det gøres på denne måde:

<a href="#AncenGemtDiv1" onclick="showHideDiv('enGemtDiv1')">Tryk Her</a><br>
<a name="AncenGemtDiv1"></a>
<div id="enGemtDiv1" style="display:'none'">

Der er kommet en ekstra <a href=""> ind. Det er ankeret. Det skal igen være unikt, så jeg har valgt det samme som div id'et med anc foran. Når man vil hoppe til et ankeret bruges <a href="#AnkerNavn"> Derfor er navnet blevet sat ind i det link du trykker på for at åbne/lukke div'en.

Ellers kan du lave linket om til en div eller span også. Her har jeg brugt span. Forskellen på div og span er, at div er et block element hvor span er et inline element. For dig betyder det, at der automatisk bliver lavet et linjeskift efter div. Det kan du prøve at rode lidt med en anden gang.

<span onclick="showHideDiv('enGemtDiv1')">Tryk Her</span>
<div id="enGemtDiv1" style="display:'none'">

Så fremgår det dog ikke af musen at man kan trykke på teksten, men det kan heldigvis også løses, ved at sætte en style på.

<span onclick="showHideDiv('enGemtDiv1')" style="corsor:hand;">Tryk Her</span>

Det var noget af en artikkel jeg der fik skrevet :o)

Synes godt om

botha1 Nybegynder

17. august 2004 - 21:41 #10

jamen jamen jamen

Bortset fra en lille stavefejl (corsor) var det den mest perfekte artikkel jeg har set til dato.

Den sidste med "span" virkede PERFEKT som jeg ønsker det.

1000000 tak for hjælpen, jeg forhøjer lige til 200 point istedet, det er vildt velfortjente point.

Tak endnu engang

Synes godt om

roenving Novice

17. august 2004 - 22:08 #11

-- og så skal man huske, at cursor:hand; er opfundet af M$ på et tidspunkt, hvor der ikke var en standard, det er der nu, selv IE6 kender den, og den hedder cursor:pointer; så hvis både dem med ældre IE'er og alle andre browsere skal bruge det, er det begge, som skal angives:

cursor:hand;cursor:pointer;

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
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
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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