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
Vi tilbyder markedets bedste kurser inden for webudvikling

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