Notifikationer

Markér alle som læst Log ud

hoppe11 Nybegynder

11. februar 2010 - 12:21 Der er 6 kommentarer og
1 løsning

element som udvider sig

hvordan kan man lave et element som udvider sig?

har en knap der skal tilføje et element på min side.. det skal udvide sig fra 0px til elementets højde med f.eks. 1px per 0.01 sekund

Synes godt om

majbom Novice

11. februar 2010 - 13:28 #1

prøv at se om ikke dette kan bruges: http://www.eksperten.dk/spm/900085

Synes godt om

tjens Nybegynder

11. februar 2010 - 13:37 #2

Eksempel:

<html>
<head>
<script language="javascript" type="text/javascript">
function init(){
document.getElementById('overlay_body').style.height = '200px';
document.getElementById('overlay_body').style.width = '200px';
}

function expand(e) {
if ((parseInt(e.style.width)<500) && (parseInt(e.style.height)<500)) {
e.style.width = (parseInt(e.style.width)+10)+'px';
e.style.height = (parseInt(e.style.height)+10)+'px';
setTimeout('expand(document.getElementById("'+e.id+'"))', 10);
}
}
</script>

</head>
<body onload="init(); return true;">
<table border="1">
<tr><td id="overlay_body" onclick="expand(this); return true;">Click to Expand</td>
</tr>
</table>
</body>
</html>

Planket fra dette spørgsmål: http://www.eksperten.dk/spm/880688

Synes godt om

hoppe11 Nybegynder

11. februar 2010 - 13:39 #3

den skifter bare klassen.. skal have noget der kan udvide et element fra height:0px til dets "oprindelige" højde

Synes godt om

hoppe11 Nybegynder

11. februar 2010 - 13:42 #4

hov.. der blev postet i mellemtiden..

men jeg skal jo stadig have fat i elementets oprindelige højde.. det er lidt der mit problem ligger...

eneste måde at få den er vel at rendere elementet, men hvordan kan man lige gøre det smartest? det skal jo ikke være synligt mens det gøres?

Synes godt om

tjens Nybegynder

11. februar 2010 - 20:07 #5

Så du vil kende et elements størrelse før det er renderet?

Jeg ved ikke om det altid virker, men jeg har udvidet eksemplet med en knap nummer 2 som opretter en knap nummer 3, og som udvider sig fra størrelse 1px:

<html>
<head>
<script language="javascript" type="text/javascript">
function expand(id, h, w) {
var e=document.getElementById(id);
if (parseInt(e.style.height)<h) e.style.height = (parseInt(e.style.height)+1)+'px';
if (parseInt(e.style.width)<w) e.style.width = (parseInt(e.style.width)+1)+'px';
if ((parseInt(e.style.height)<h) || (parseInt(e.style.width)<w)) setTimeout('expand("'+id+'",'+h+','+w+')', 1);
}

function newButton(id) {
var e=document.getElementById(id);
var i = 0;
while (document.getElementById('newButton_' + ++i ) );
var newButton = document.createElement('button');
newButton.id = 'newButton_' + i;
newButton.appendChild( document.createTextNode('I am new and my id is ' + newButton.id) );
e.appendChild(document.createElement('br'));
e.appendChild(newButton);
var w = newButton.offsetWidth;
var h = newButton.offsetHeight;
newButton.style.height='1px';
newButton.style.width='1px';
setTimeout('expand("' + newButton.id + '",'+h+','+w+')', 1);
}
window.onload = function(){
document.getElementById('mainDiv').style.height = '200px';
document.getElementById('mainDiv').style.width = '350px';
}
</script>
</head>
<body>
<div id="mainDiv" style="border: 5px dotted lightgray; padding: 10px;">
<button onclick="expand('mainDiv', 400, 550); return false;">Click to Expand Area</button><br>
<button onclick="newButton('mainDiv'); return false;">Make New Button</button>
</div>
</body>
</html>

Det er linierne
var w = newButton.offsetWidth;
var h = newButton.offsetHeight;
der giver størrelsen, allerede inden rederingen er sket.

Synes godt om

hoppe11 Nybegynder

11. februar 2010 - 22:54 #6

smid et svar :)

Synes godt om

tjens Nybegynder

11. februar 2010 - 22:58 #7

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