Téma: SetTimeout - Javascript kérdés

CollisDam eredeti hozzászólása

Néha én is túlbonyolítom a dolgokat.. Most szerintem ti is ezt csináltátok

Amiket észrevettem:
- a getElement-ek mindig egy element-et keresnek. Ezt itt egyszerűen helyettesíthetitek egy this -el (ami arra az elementre vonatkozik ahol használod - így nem kell 'kikeresni')
- a setTimeout egy függvényt és egy számot vár vesszővel elválasztva: setTimeout(fuggveny,1000) -> ezért vagy írsz egy külön függvényt az eltüntetésnek, és azt hívod a setTimeout-ból, vagy megadod névtelen függvényként:
function(){ var blabla='ez egy névtelen függvény'; }
Ezeket majd a kódból megérted, ha itt nem.

Ja, és sokszor írtatok 'style.display' helyett 'stlye.display'

Szóval:

Kód:

<script>
function hide(element) {
setTimeout ( function(){ element.style.display = 'none'; }, 3000);
} 
</script>

<div onmouseout="hide(this)" style="width:50px;">teszt</div>

Igen, sejtettem, h ezt a 'this' dolgot valaki meg fogja említeni, de a kérdésemet szándékosan tettem fel egy általánosabb helyzetre - pl. ha ugyanígy meg akarsz jeleníteni egy div-et egy másik div-ből vezérelve, akkor már ugye nem jó a 'this'.

Én is logikusnak tartottam azt, hogy függvényt vár, de a dokumentációjában azt olvasni, hogy egy stringet, amit code-ként dolgoz fel. A w3school-on olvastam.

Nade mindjárt letesztelem az ötleteket és jelentkezem a sikerélménnyel.

Siker és újabb probléma

Mutatom:

Kód:

<script>
function hidediv ( divId ) {
setTimeout ( function(){document.getElementById( divId ).style.display = 'none';}, 1250); }

function showdiv ( divId ) {
document.getElementById( divId ).style.display = 'block'; }
</script>


<div id="almafa" onmouseover="showdiv( 'kortefa' )" onmouseout="hidediv( 'kortefa' )">
show kortefa
<div id="kortefa" style="display:none;"> Itt a kortefa </div>
</div>

Ez miért nem működik úgy, ahogy egy átlag ember szerint logikus lenne?
(jQuery lesz ebből...)

Hogy érted, hogy nem úgy működik? Nálam jónak tűnt. Mire gondolsz pontosan?

CollisDam eredeti hozzászólása

Hogy érted, hogy nem úgy működik? Nálam jónak tűnt. Mire gondolsz pontosan?

A kortefa az almafa része, ha az almafa fölé húzom az egeret, akkor megjelenik a kortefa, de ha áthúzom a kortefa fölé (ami szintén az almafa része), akkor elindul a setTimeout.
Ezek után pedig kicsit mintha az egész összekavarodna és furán működik. (firefox-on lesem)

Ez azért van, mert a mouseOut-nál a timeout elindul, és amikor elviszed, de rögtön visszaviszed az egeret, akkor lefut a mouseover display:block, de utána egy pillanat alatt lejár a timeout, így eltűnik. Azt mondjuk pontosan nem értem, hogy ha része, akkor mért mouseout-nak veszi, de lehet, hogy külön divként kezeli

A lényeg, hogy nekem úgy jónak tűnt, hogy az onmouseOver-nél az esetleg futó timeout-ot ki kell lőni így:

Kód:

<script>
var hideDivTimeout;

function hidediv(divId) {
hideDivTimeout = setTimeout ( function(){document.getElementById(divId).style.display = 'none';}, 1250); 
}

function showdiv(divId) {
clearTimeout(hideDivTimeout);
document.getElementById(divId).style.display = 'block'; 
}
</script>

<div id="almafa" onmouseover="showdiv('kortefa')" onmouseout="hidediv('kortefa')" style="border:1px solid #000000;">
show kortefa
<div id="kortefa" style="display:none; border:1px solid #000000;"> Itt a kortefa </div>
</div>

EDIT: bocsi, bordert csak azért raktam rájuk, hogy lássam mi, merre, meddig..

Tökéletesen működik!
Köszönöm a segítséget mindenkinek!

CollisDam eredeti hozzászólása

Ez azért van, mert a mouseOut-nál a timeout elindul, és amikor elviszed, de rögtön visszaviszed az egeret, akkor lefut a mouseover display:block, de utána egy pillanat alatt lejár a timeout, így eltűnik. Azt mondjuk pontosan nem értem, hogy ha része, akkor mért mouseout-nak veszi, de lehet, hogy külön divként kezeli

A lényeg, hogy nekem úgy jónak tűnt, hogy az onmouseOver-nél az esetleg futó timeout-ot ki kell lőni így:

Kód:

<script>
var hideDivTimeout;

function hidediv(divId) {
hideDivTimeout = setTimeout ( function(){document.getElementById(divId).style.display = 'none';}, 1250); 
}

function showdiv(divId) {
clearTimeout(hideDivTimeout);
document.getElementById(divId).style.display = 'block'; 
}
</script>

<div id="almafa" onmouseover="showdiv('kortefa')" onmouseout="hidediv('kortefa')" style="border:1px solid #000000;">
show kortefa
<div id="kortefa" style="display:none; border:1px solid #000000;"> Itt a kortefa </div>
</div>

EDIT: bocsi, bordert csak azért raktam rájuk, hogy lássam mi, merre, meddig..

Hát ez funny volt. Én is kipróbáltam majdnem ugyanezt, mielőtt a kérdést feltettem, de ott rittyentettem el, hogy a hideDivTimeout-ot a hidediv függvényen belül definiáltam (hiába var-ral). De így ahogy írtad: perfect!

Tökéletesen működik!
Köszönöm a segítséget mindenkinek!

Én is először úgy csináltam..
hideDivTimeout a hidediv fv-n belül.. Én sem értettem, mi a baj, de erre van Firefox alatt a Shift+Ctrl+J (Hibakonzol)
Minden használat előtt nyomj az "Alaphelyzet"-re (ez töröl mindent onnan) és válaszd ki a "Hibák"-at. onMouseOver-nél azonnal dobta, hogy hideDivTimeout undefined

Örülök, hogy működik..

Szerintetek hol a liba?

Kód:

slide:function(){
	
for (b=0;b>=-100;b=b-1)
{
setTimeout ( function(){ var left=parseInt(document.getElementById("page").style.left);

left=left-1
					    document.getElementById("page").style.left=""+ left +"px"}, 100);
} 
}

Azt szeretném, ha a page nevű divem kicsúszna a képből, de úgy hogy lássam is. Jelenleg vár x időt, és 100pxlel arrébb ugrik.

Óhhh, értem. Tehát a for ciklus nem várja meg amíg a settimeout lefut? Ez fel sem merült bennem.
A ciklust nem lehet megállítani x ideig? Elkeserítő. Miért nincs a JS-ben egy sleep?
A for ciklusba valahogy beletehetek egy php sleepet?

Az a gond, hogy így egy Joomla modult kellene csak átpofozni, nem tudom, hogy hogy varázsoljak bele JS keretrendszert. De ha nincs más elindulok abba az irányba.