Søg
Avatar billede 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
Avatar billede majbom Novice
11. februar 2010 - 13:28 #1
prøv at se om ikke dette kan bruges: http://www.eksperten.dk/spm/900085
Avatar billede 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
Avatar billede 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
Avatar billede 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?
Avatar billede 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.
Avatar billede hoppe11 Nybegynder
11. februar 2010 - 22:54 #6
smid et svar :)
Avatar billede tjens Nybegynder
11. februar 2010 - 22:58 #7
OK
Avatar billede 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.

Loading billede Opret Preview
Kategori
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 03/05/202613:59
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »