[js/css] Div een 'groei' effect geven.

[Verwijderd]

Ik ben bezig met het maken van een simpele lichtgewicht twitter client. Deze twitter client moet eerst gewoon een 'what er you doing' veld geven maar moet 'groeien' als er op geklikt word zodat overige content (die al wel bestaat maar door overflow:hidden verborgen is) zichtbaar wordt. Ik dacht hiervoor zoiets te kunnen gebruiken:

code:

function togglefriends() 
{
    i=190;
    e=450;
    while (i<=e)
    {
        document.getElementById('minitwitter').style.height=i+'px';
        i=i+1;
    }
}

Ik zal wel te simpel gedacht hebben maar dit werkt niet. Om de een of andere manier wordt de hoogte van de div pas aangepast als de loop klaar is, ook als ik het effect vertragen door 1 te vervangen door bijvoorbeeld 0.1.

Wat ik ook heb geprobeerd is innerHTML te gebruiken waarmee ik verwachte een lopend getal te zien tot van 190 tot 450. Helaas, ook hier werkt het pas aan het eind en zie je dus plots 450 in plaats van een teller.

Als ik op google zoek op termen als 'grow effect' kom ik eigenlijk alleen maar uit bij javascript libraries, iets waar ik NIET naar op zoek ben.

Mijn vraag is nu hoe ik dit effect kan maken zonder gebruik te maken van een speciale javascript-library.

M.v.g. Sven van de Scheur

[PeterSelie]

Al zou zoiets werken is het performancegewijs nou niet echt iets wat je zal willen hebben in je website. Je zal utieindelijk toch richting libraries terecht komen.

Waarom precies wil je daar geen gebruik van maken?

_{Iets met: don't build what has been build and works flawlessly}

[Verwijderd]

deels omdat ik wil leren hoe dit soort dingen werken, deels omdat ik geen zin heb een hele library mee te sjouwen voor een simpel programmaatje van 300 bij 190 pixels die 1 effect nodig heeft. Die libraries zijn afaik ook maar javascript. Waarom kan het daar dus wel en hier niet?

[PeterSelie]

Heb je zelf al eens geprobeerd om die libraries uit elkaar te trekken en te zoeken naar de functionaliteit die je zelf ook in wilt bouwen?

edit:
Daarbij is het aan te raden gewoon lekker met die libraries (als mootools) te leren werken, je zal zien dat je er op den duur heel veel functionaliteit vindt die je op andere plekken ook goed in kan zetten..

[ Voor 44% gewijzigd door PeterSelie op 01-04-2009 09:35 ]

[Verwijderd]

ik probeer nu momenteel libraries te begrijpen zodat ik weet hoe ik dit bijvoorbeeld in een library moet doen. toch geef ik voorkeur aan een eigen code om te leren.

[SandaX]

Als je een googled op deze woorden. Kom je bijvoorbeeld hier uit. Ik vermoed dat er nog wel meer voorbeelden te vinden zijn waar je wat mee kunt.

[Verwijderd]

hartstikke bedankt, ziet er uit als wat ik nodig heb. echter heb ik nu rijles:P

[Bosmonster]

Jouw loop uit je startpost zou prima kunnen werken, maar wordt nu zo snel uitgevoerd als de browser het kan, zonder redraws. M.a.w. het effect is zo goed als direct.

Wat je wilt is bovenstaande, maar dan met een bepaald interval. Kijk eens naar setTimeout of setInterval.

Mocht je een library willen gebruiken dan kan ik je jQuery aanraden. Deze heeft verreweg de eenvoudigste API van alle libraries en is dus het eenvoudigst te leren. Daarnaast lopen de andere libraries (Mootools, Prototype) momenteel een beetje achter, aangezien ze nog steeds geen IE8 build hebben uitgebracht.

[ Voor 39% gewijzigd door Bosmonster op 01-04-2009 10:03 ]

[BtM909]

WAt je zegt klopt idd: javascript voert de iteratie eerst uit voordat het gaat animeren en dat is puur vanwege de snelheid waarmee JS door die iteratie gaat.

Zoals SandaX's voorbeeld al aangeeft, moet je dus zelf timeouts gaan introduceren zodat de animatie zichtbaar wordt

[Verwijderd]

Hier had ik zelf ook al mee gepuzzeld maar het werkt niet, althans niet mijn werk.

Ik heb bij dit voorbeeld de timeout op de i zitten maar heb hem ook op de code gehad.

code:

function togglefriends() 
{
    i=190;
    e=450;
    while (i<=e)
    {
        document.getElementById('minitwitter').style.height=i+'px';
        setTimeout("i=i+1",1);
    }
}

een timeout van 1 laat safari al vastlopen (traag script waarschuwing) en ook firefox blieft em niet. Een timeout op de de code zetten zorgt er simpelweg dat er niets gebeurd.

een timeout op een dummycode werkt ook niet, OF je merkt niets, OF de timeout is zo hoog dat er niets gebeurd en de browser crasht.

code:

function donothing()
{
    
}

function togglefriends() 
{
    i=190;
    e=450;
    while (i<=e)
    {
        document.getElementById('minitwitter').style.height=i+'px';
        setTimeout("donothing()",5000);
        i=i+1;
    }
}

[ Voor 25% gewijzigd door Verwijderd op 01-04-2009 12:18 ]

[crisp]

Op die manier een timeout zetten onderbreekt je loop niet hoor; sterker nog: aangezien JS singletreaded is blijft de loop doorlopen (en timeouts schedulen) zonder einde (de timer wordt nooit getriggered - hence uiteindelijk ook de waarschuwing).
Je moet de hele functie via timeouts schedulen, iets als:

JavaScript:

function togglefriends(i) 
{
    i = i ? i + 1 : 190;
    if (i < 450)
    {
        document.getElementById('minitwitter').style.height = i+'px';
        setTimeout(function(){togglefriends(i);}, 10);
    }
}

[ Voor 5% gewijzigd door crisp op 01-04-2009 12:24 ]

[Gersomvg]

SoaDmaggot schreef op woensdag 01 april 2009 @ 09:25:
Al zou zoiets werken is het performancegewijs nou niet echt iets wat je zal willen hebben in je website. Je zal utieindelijk toch richting libraries terecht komen.

Waarom precies wil je daar geen gebruik van maken?

_{Iets met: don't build what has been build and works flawlessly}

Libraries

Gewoon een kwestie van een beetje creativiteit, tijd over hebben en setInterval/setTimeout.

@crisp;
Ziet er grappig uit maar waarom dit: function(){togglefriends(i);}
Is dat omdat je een functie aanroept binnen zichzelf ofzo?

[PeterSelie]

gersompie schreef op woensdag 01 april 2009 @ 14:26:
[...]


Libraries

Wat exact is er zo dramatisch aan bijvoorbeeld mootools / jQuery? Ik zie niet in waarom je zelf zou moeten gaan zitten knutselen (met kans op bugs, browserincompatibiliteit, verschikkelijk slechte performance e.d.) als iets dergelijks al bestaat en prima zijn werk doet?

[RobIII]

gersompie schreef op woensdag 01 april 2009 @ 14:26:
@crisp;
Ziet er grappig uit maar waarom dit: function(){togglefriends(i);}
Is dat omdat je een functie aanroept binnen zichzelf ofzo?

Anonymous functions FTW

[ Voor 17% gewijzigd door RobIII op 01-04-2009 14:31 ]

[Gersomvg]

SoaDmaggot schreef op woensdag 01 april 2009 @ 14:30:
[...]

Wat exact is er zo dramatisch aan bijvoorbeeld mootools / jQuery? Ik zie niet in waarom je zelf zou moeten gaan zitten knutselen (met kans op bugs, browserincompatibiliteit, verschikkelijk slechte performance e.d.) als iets dergelijks al bestaat en prima zijn werk doet?

Moet je eens kijken naar dat stukje code van crisp. Dat is zo compact en simpel dat het echt wel browsercompatible is. Ik heb liever zo'n stukje code dan een compleet jquery framework eromheen.

[Black-Xjuh]

JavaScript:

function togglefriends(huidig, eind) { 
    if (huidig < eind) { 
        huidig = huidig + 1;

        document.getElementById('minitwitter').style.height = huidig + 'px'; 

        setTimeout('togglefriends(huidig, eind);', 10); 
    } 
} 

togglefriends(190, 450);

Zoiets is denk ik wat je idee was? Desgewenst de 10 (ms) wijzigen in de snelheid die je mooi vind. Ook kan je via de aanroep het start en stop formaat aanpassen.

[ Voor 17% gewijzigd door Black-Xjuh op 01-04-2009 14:42 ]

[Bosmonster]

gersompie schreef op woensdag 01 april 2009 @ 14:36:
[...]

Moet je eens kijken naar dat stukje code van crisp. Dat is zo compact en simpel dat het echt wel browsercompatible is. Ik heb liever zo'n stukje code dan een compleet jquery framework eromheen.

Het is heel simpel. Een library als jQuery versnelt het ontwikkelproces van grote websites enorm. Het scheelt ontwikkel en testtijd.

En in een bedrijfsomgeving waar ieder uur gewonnen winst is is het gebruik van een degelijke library onontbeerlijk vandaag de dag.

[PeterSelie]

Daarbij scheelt het je kwa performance weinig tot niets, daar je gebruik maakt van goed geoptimaliseerde functies binnen de library en hetgeen dat je niet gebruikt gewoon links laat liggen.

[Verwijderd]

ik heb nu dit:

code:

function togglefriends()
{
    h=document.getElementById('minitwitter').offsetHeight;
    if (h=500)
    hidefriends();
    else
    showfriends();
}
function showfriends()
{
    f=1;
    d=200;
    m=500;
    h=document.getElementById('minitwitter').offsetHeight;
    if (h<=m)
    {
        //document.getElementById('minitwitter').onclick=hidefriends();
        h=h+f;
        document.getElementById('debug').innerHTML=h;
        document.getElementById('minitwitter').style.height=h+'px';
        setInterval("showfriends()",10)
    }   
}
function hidefriends()
{
    f=3;
    d=200;
    m=500;
    h=document.getElementById('minitwitter').offsetHeight;
    if (h>=d)
    {
        h=h-f;
        document.getElementById('debug').innerHTML=h;
        document.getElementById('minitwitter').style.height=h+'px';
        setInterval("hidefriends()",10)
    }
}

De showfriends() en hidefriends() functies werken bijde prima als ik ze direct aanroep, als ik via de functie togglefriends wil laten kiezen welke er uitgevoerd moet worden. werkt het weer niet, het script lijkt zich dan niet te herhalen, zie hier een voorbeeld:
http://antarctica.easy-upload.nl/gotvb.html
(u kunt op het divje klikken)

[crisp]

JavaScript:

if (h=500)

dit kent het getal 500 toe aan de variabele h en retourneert 500 ter evaluatie van de if, wat je waarschijnlijk bedoelt is dit:

JavaScript:

if (h==500)

Maar het werken met globale variabelen is bad practice en een recept voor bugs; probeer dat te vermijden.

Verder is offsetHeight niet alleen afhankelijk van de content-hoogte maar ook van padding en borders, dus ik zou daar niet zo snel dingen van af laten hangen. Daarbij is het opvragen van een element's offsetHeight een relatief dure operatie.

[ Voor 30% gewijzigd door crisp op 01-04-2009 23:21 ]