Autor Zpráva
JKlena
Profil
Ahoj,
snažil som sa dnes spraviť jednoduchý JS, ktorý by mi jeden div ktorý mám viazaný na bottom -570px (div ma 600px takže kúsok trčí) vytiahol o tých 570px hore aby bol vyditelný celý. Použil som nasledovný JS:
function vytiahni(objekt, vyska) {
    var div = document.getElementById(objekt);
    var okolko = vyska;
    
    for (var i=0; i < okolko; i++) {
        div.style.bottom = div.style.bottom + 1;
    }
}
V JS to veľmi neviem ale myslím, že toto by malo fungovať a vytiahnuť mi tento div postupne hore o stanovenú výšku ale nerobí to vôbec nič.
Tento script mám volaný v samotnom dive:
<div id="test" onmouseover="vytiahni(test, 570)">
skúšal som aj:
<div id="test" onmouseover="vytiahni('.test', 570)">
aj keď neviem v čom to je iné ale našiel som takýto zápis na internete.
Kde mám chybu? Je tu nejaký lepší spôsob ako vyťahovať div postupne a nielen ho zobrazovať cez display='none' a display='inline-block' ?
xROAL
Profil
Chyba bude zrejme tu:
<div id="test" onmouseover="vytiahni('test', 570)">
ID elementu, teda "test", musí byť string, čiže v úvodzovkách. Script vyzerá v poriadku, avšak má jeden háčik... celý FOR cyklus prebehne príliš rýchlo na to, aby si postrehol že DIV sa posúva postupne. Tu by bolo treba zrejme použiť nejaké časovanie, intervaly...

CSS3 Transition je podporovaný v IE10, Firefoxe, Opere, Chrome aj Safari a vďaka nemu by si mohol zmazať celý tento JS a použiť len CSS:
#test {
 bottom: -570px;
 transition: bottom 1s;
 -webkit-transition: bottom 1s;
}

#test:hover {
 bottom: 0;
}

#test musí mať definovaný aj "position", ale to je myslím jasné...
Chamurappi
Profil
Reaguji na xROALa:
Script vyzerá v poriadku
Až na to, že do div.style.bottom několikrát nastaví neplatnou hodnotu 1.

FOR cyklus prebehne príliš rýchlo na to, aby si postrehol že DIV sa posúva postupne
Prohlížeč se vykašle na překreslování změn prováděných během jednoho běhu. Takže i kdyby běh zpomalil třeba tím, že bude proměnnou i zvětšovat o jednu miliontinu, dosáhne nanejvýš toho, že na chvíli zakousne prohlížeč.

CSS3 Transition je podporovaný
… málo. Nedoporučoval bych mu ho, když existují postupy, které fungují bezpečně napříč všemi prohlížeči.
pako
Profil *
JKlena:
div.style.bottom ti vrati retazec, ktory potrebujes previest na cislo pouzitim parseInt(div.style.bottom, 10) dostanes cislo ktore mozes zvysit o i a retazec'px'
ako spominal [#3] Chamurappi prehliadac vsetko vykresli az po dobehnuti cyklu, cize aby si dosiahol zelany efekt treba volat setTimeout az kym div nema potrebnu vysku.
ak volas obsluhu udalosti priamo na elemente tak odkaz na element ziskas cez this a nie cez pouzitie id

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: