DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   DIV, MouseOut, href ... (http://www.devprotalk.com/showthread.php?t=1572)

Ivan 01. 10. 2006. 02:09

DIV, MouseOut, href ...
 
Ovako, imam jedan div\layer koji je sakriven na pocetku ( display:none; ) i na jedan mouseover na nekom levom linku taj div se prikaze ( document.getElementById('Layer1').style.display = "block"; ). Na divu postoji dogadjaj MouseOut tj tada pozivam ovo: document.getElementById('Layer1').style.display = "none";, tj zelim da se div sakrije. Problem nastaje kada u textu diva ima link, cim se mouse stavi na link div nestane ...

Kako da sredim ovo ?

Hvala

ppavlovic 01. 10. 2006. 05:00

Valjda se to zove propagacija eventa. Citaj http://www.quirksmode.org/js/introevents.html a posebno http://www.quirksmode.org/js/events_order.html, pa kad provalis kazi i nama. :)

Ivan 01. 10. 2006. 12:13

Hvala na linkovima, ali sad nemam vremena da citam ... ovo sam pregazio tako sto sam zamenio mouseout sa onclick ( dok se dizajner ne vrati pa provali kako to ide :p ).

A ako neko slucajno ima neko gotovo resenje ne bi bilo lose da ostavi ovde ...

Br@nkoR 01. 10. 2006. 13:33

Citat:

Originalno napisao Ivan
Ovako, imam jedan div\layer koji je sakriven na pocetku ( display:none; ) i na jedan mouseover na nekom levom linku taj div se prikaze ( document.getElementById('Layer1').style.display = "block"; ). Na divu postoji dogadjaj MouseOut tj tada pozivam ovo: document.getElementById('Layer1').style.display = "none";, tj zelim da se div sakrije. Problem nastaje kada u textu diva ima link, cim se mouse stavi na link div nestane ...

Kako da sredim ovo ?

Hvala

Tom Div elementu dodeli i onmouseover event koji će imati vrednost
Kôd:

document.getElementById('Layer1').style.display = "block";

Ivan 01. 10. 2006. 15:29

Hm ... ne smem to da uradim jer taj div mora da se pojavi samo kada se predje preko jednog linka koji se fizicki nalazi iznad tog diva.

noviKorisnik 01. 10. 2006. 21:32

Pa ne može da se pojavi ako pređeš preko njega dok mu je display none ... tako da ne treba da te bude frka, njega i dalje pali taj isti levi link, a ovaj dodatak samo sprečava štetu od linka na samom lejeru.

Ivan 02. 10. 2006. 00:20

Ali meni bas treba da postoji mogucnost pojave linka na leyeru ... :o

noviKorisnik 03. 10. 2006. 10:27

Biće onda da ne razumem u čemu je problem. Bilo mi je interesantno pa sam napravio primer prema priči koja je ovde navedena. Dakle, jedan levi link koji na mouseover treba da pali skriveni Layer1, Layer1 koji se skriva na mouseout ... i link na tom divu ga je gasio - što sam shvatio da je predstavljeni problem. Dalje, dodavanjem mouseover handlera na Layer1 ovaj problem više nije bio prisutan.

E sad - šta sam propustio u celoj priči?

ivanhoe 03. 10. 2006. 11:37

dzabe ovakve price, Ivane daj da vidimo kod, pa cemo resiti problem...

Ivan 04. 10. 2006. 19:09

Nesto ne kontam .... Evo test code:

Kôd:

<script>

function div_func1() {
    document.getElementById('Layer1').style.display = "block";
}

function div_out($y) {
    document.getElementById('$y').style.display = "none";
}

</script>

<a href="#" onmouseover="div_func1()" >TEST</a>
<div id="Layer1" onClick="div_out('Layer1')" >Test text</div>

Dakle, imam Leyer1 koji je inicijalizovan sa display = "none"; u style. Posle toga kada se uradi mouseover na link TEST, Layer1 treba da se pojavi. Ja zelim da kada sklonim pointer sa leyera, leyer nestane (onmouseout) ali to ne mogu da uradim iz sledeceg razloga: Ako postoji neki href,img i sl u contentu leyera povlacenjem pointera preko njega leyer nestane. Meni je potrebno da ostane kako jeste, alternativno resenje je onClick (kao sto vidite).

E sad, nadam se da je jasnije sta mi treba (mozda je ovo mnogo prosto ali ja nemam pojma oko ovoga).

Hvala ...

Br@nkoR 04. 10. 2006. 20:04

Kôd:

<script type="text/javascript">
function show(what) {
  document.getElementById(what).style.display = 'block';
}
function hide(what) {
  document.getElementById(what).style.display = 'none';
}
</script>

<a href="#" onmouseover="show('Layer1')">TEST</a>

<div id="Layer1" style="display:none;width:300px;height:100px;background-color: red;" onmouseout="hide('Layer1')" onmouseover="show('Layer1')">
bla bla bla <a href="#">test</a><br /><img src="slika.gif" alt="slika" title="slika" />
</div>


Ivan 04. 10. 2006. 20:16

Hvala to je to :)

noviKorisnik 04. 10. 2006. 22:00

Sad meni nije jasno ... testiram sledeći kod
Kôd:

<html>
<head>
<title>t</title>
<style>
#Layer1                {
    margin              :  0      2em;
    padding            :  0      2em;
    background-color    :  green;
}
#Layer1 *              {
    display            :  block;
    margin              :  0      2em;
    padding            :  0      2em;
    background-color    :  white;
}
</style>
</head>
<body>
<a href="#" onmouseover="document.getElementById ('Layer1').style.display = '';">TEST</a>
<div id="Layer1" style="display: none;" onmouseout="document.getElementById ('Layer1').style.display = 'none';" onmouseover="document.getElementById ('Layer1').style.display = '';">
<img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" />
bla
<a href="javascript: alert ('bu');">bu</a>
bla <!-- --> bla
<img src="http://www.devprotalk.com/images/devprotalk_logo_green.gif" />
bla
</div>
</body>
</html>

... i ne vidim suštinsku razliku u odnosu na gorenavedeni kod, ali je očigledno da se ponaša bagovito u IE - lejer se gasi kod donje slike (???)

ivanhoe 05. 10. 2006. 01:29

problem je u event bubbling-u kod IE... layer se u IE gasi kad god mis izadje iz slike, tj. cim se pojavi neki onMouseOut event. Taj event krene da bubble-uje (heh, sta bi mi sad rekao onaj bluesmanov citalac sa B92 na ovaj glagol) na gore, i posto parent element (onaj div) ima definisan onmouseout, on se izvrsi.

Dodaj na obe slike onmouseout="window.event.cancelBubble = true" i problem ce magicno nestati. Naravno ovo je resenje cisto za demonstraciju, ali kako ovo moze da se resi elegantnije, stvarno ne znam...

noviKorisnik 05. 10. 2006. 11:31

Molim te probaj kod u IE da vidiš šta se dešava. Ništa što mogu da vežem sa slikom. On jednostavno okine onmouseout ne nad površinom slike, već i na čistoj površini bez kidova ... samo kreni lagano prema dole i div nestaje pre nego što stigneš da ga napustiš.

Druga zanimljivost je što prikazuje comment node :-D

Br@nkoR 05. 10. 2006. 13:51

http://www.satzansatz.de/cssd/onhavinglayout.html

Npr.
Kôd:

* html #Layer1 { height: 1px; }

noviKorisnik 05. 10. 2006. 16:32

Wow, odličan tekst. Nađoh tamo jedan vrlo zanimljiv link - IE Developer Toolbar - ostaje samo još da se testira...

nixa 05. 10. 2006. 17:26

Radim sa njim po potrebi ... nista specialno ...ali opet znaci

ZeroStyle 05. 10. 2006. 17:27

Taj toolbarje veoma korisna alatka , koristim ga vec duze vrijeme i sretan sam :)


Vreme je GMT +2. Trenutno vreme je 09:42.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.