Notifikationer

Markér alle som læst Log ud

vat69 Nybegynder

07. juni 2006 - 12:29 Der er 11 kommentarer og
1 løsning

skjult Div "bevæger sig" når den åbnes

Hej jeg har et skjult <div> der ved klik på et billede kommer frem.
Jeg kunne godt tænke mig den ikke bare kom frem når man klikkede men ligesom åbnede sig i en "slide" bevægelse (håber i forstår).

Her er min kode:

CSS:

#div1 {position:absolute; top: 16px; left: 10px; text-align: left; visibility:hidden; font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF;}

#outer{
position:relative;
margin:auto;
text-align:left;
}

java script:

function hideAll() {
for (var i = 1; i <= 1; ++i)
document.getElementById('div' + i).style.visible = 'hidden';
}

function showfade(el_id) {
hideAll();
document.getElementById(el_id).style.visibility = 'visible'; }

HTML:
<div id="outer">
<div id="div1" style="visibility:hidden;">
<table width="100" height="100" bgcolor="#00CCFF"cellpadding="0">
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</div>

Synes godt om

vat69 Nybegynder

07. juni 2006 - 12:31 #1

og billedet man klikker på er her (for en god ordens skyld) :)

<img onClick="showfade('div1');" cursor:pointer;" src="MITBILLEDE.gif" />

Synes godt om

thesurfer Nybegynder

07. juni 2006 - 12:57 #2

Ved hideAll skal alle bokse skjules og sættes til 0 i højden.
Når den skal vises, skal den vises og derefter øges i højden, via en timer.

Synes godt om

vat69 Nybegynder

07. juni 2006 - 13:43 #3

Har du et eksembel :)

Synes godt om

vat69 Nybegynder

08. juni 2006 - 11:22 #4

Jeg går ud fra du mener man kan gøre således.

function showfade(el_id) {
hideAll();
document.getElementById(el_id).style.visibility = 'visible';
document.getElementById(el_id).style.height = '0px';
}
Eller er det helt forkert?

Jeg kan ikke helt gennemskue hvorledes man så skal øge højden med en timer. Er ikke den største haj til javascript

Synes godt om

thesurfer Nybegynder

08. juni 2006 - 21:53 #5

Jeg ser lige om jeg kan lave et eksempel i aften.. skole og arbejde tager en stor del af min tid.. hvad skal man dog også med de ting..? :-)

Synes godt om

vat69 Nybegynder

08. juni 2006 - 23:18 #6

Lyder super :)
Og ja hvad skal man bruge sådanne ting til, særlig når man ser vejret de næste par dage!!

Synes godt om

thesurfer Nybegynder

09. juni 2006 - 21:48 #7

Jeg havde skrevet et indlæg, men fik åbenbart ikke sendt det afsted..

Jeg havde lavet et eksempel, men der er et lille problem. Jeg kan ikke få div boksen til at blive mindre, end højden på indholdet af den.

Eksempel:
Hvis indholdet er 20px højt, kan div boksen minimum blive 20px i højden.

Jeg ser lige om jeg kan finde en løsning på det.. måske noget med overflow eller ligende..

Synes godt om

thesurfer Nybegynder

09. juni 2006 - 22:37 #8

Jeg kan få det til at virke med overflow:auto.. men overflow:auto bruges til at indsætte scrollbars, hvis indeholdet fylder mere end arealet af div boksen..

Jeg ser lige om jeg kan få fjernet scrollbaren..

Synes godt om

thesurfer Nybegynder

09. juni 2006 - 22:38 #9

Bingo! :-)

overflow:hidden :-)

Synes godt om

thesurfer Nybegynder

09. juni 2006 - 23:12 #10

Sådan:

<html>
<head>
<title>div test</title>
<style type="text/css">
#div1 {
position:absolute;
top: 16px;
left: 10px;
text-align: left;
visibility:hidden;
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

#div2 {
position:absolute;
top: 16px;
left: 110px; /* "div2 left" er lig "div1 left" plus "div1 width" */
text-align: left;
visibility:hidden;
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

#outer{
position:relative;
margin:auto;
text-align:left;
}
</style>

<script type="text/JavaScript">
div = null;
divHide = null;

function hideAll()
{
for (i = 1; i <= 2; ++i)
{
divHide = document.getElementById('div' + i);
divHide.style.visibility = 'hidden';
}
}

function show(id,height)
{
div = null;
div = document.getElementById(id);
hideAll();
div.style.visibility = 'visible';
if (height != -1 && height != null)
{
div.style.height = "0px";
setHeight(height);
}
}

function setHeight(endHeight)
{
height_px = div.style.height;
incHeight = parseInt(height_px.substring(0, height_px.indexOf("px")));

div.style.height = parseInt(incHeight + 2) + "px";

if (incHeight < endHeight) setTimeout('setHeight(' + endHeight + ')', 0);

}
</script>
</head>
<body>

<br><br><br><br><br><br><br>

<a href="#" onclick="show('div1', 100);return false">vis div 1</a>
 | 
<a href="#" onclick="show('div2', 100);return false">vis div 2</a>

<div id="div1" style="overflow:hidden; visibility:hidden;">
<table width="100" height="100" bgcolor="#00CCFF" cellpadding="0">
<tr>
<td align="center" valign="middle">Hello</td>
</tr>
</table>
</div>

<div id="div2" style="overflow:hidden; visibility:hidden;">
<table width="100" height="100" bgcolor="#00CCFF" cellpadding="0">
<tr>
<td align="center" valign="middle">World</td>
</tr>
</table>
</div>

</body>
</html>

Synes godt om

thesurfer Nybegynder

09. juni 2006 - 23:15 #11

Jeg har indstillet den til at udvide boksen med 2 pixels ad gangen:

div.style.height = parseInt(incHeight + 2) + "px";

Antal pixels:
Lavt tal = flydende = langsom
Højt tal = hakket = hurtigt

Hvis der er noget du skal have forklaret, skriv lige..

- Svar

Synes godt om

vat69 Nybegynder

12. juni 2006 - 15:16 #12

Det virker perfekt!

Undskyld den sene tilbage meldning men har først prøvet det nu. Og som sagt det virker perfekt!
Stor stor tak, bøjer mig i støvet :-) Det var virkelige ne stor hjælp :)

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