event.clientX u FF

bojan_bozovic · 10. 02. 2006.

Ajde pomozite malo. Radi i u Operi i u IE, ali u FF ne radi, znam da ovo mozda nije bas najbolji (mozda je i najgori) nacin da se ovo uradi:

Kôd:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>maestitia.net : index : Credits</title>
<script type="text/javascript">
function showpopup(id) {
	var popup=document.getElementById(id);
	popup.style.visibility="visible";
	popup.style.top=event.clientY+"px";
	popup.style.left=event.clientX+"px";
}
function hidepopup(id) {
	var popup=document.getElementById(id);
	popup.style.visibility="hidden";
}
</script>
<style type="text/css">
#popup {
color:white;
background:black;
border:1px solid red;
}
</style>
<body>
<div id="popup" style="position:absolute;visibility:hidden">Tekst u popupu</div>
<p style="text-align:center">
<a href="http://example.com" onmousemove="showpopup('popup')" onmouseout="hidepopup('popup');">Link</a>
</p>
</body>
</html>

noviKorisnik · 10. 02. 2006.

"event is not defined" ...

noviKorisnik · 10. 02. 2006.

Evo, da ti vratim malo iskasapljen kod, ali radi (definitivno mu treba još šminke :-)))

Kôd:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>maestitia.net : index : Credits</title>
<script type="text/javascript">
function mm(e) {
    if (typeof (event) == 'undefined') var event = e;
	var popup=document.getElementById('popup');
	popup.style.visibility="visible";
	popup.style.top=event.clientY+"px";
	popup.style.left=event.clientX+"px";
}
function hidepopup(id) {
	var popup=document.getElementById(id);
	popup.style.visibility="hidden";
}
</script>
<style type="text/css">
#popup {
color:white;
background:black;
border:1px solid red;
}
</style>
<body onload="var l = document.getElementById ('ll'); l.onmousemove = mm; l.onmouseover = mm;">
<div id="popup" style="position:absolute;visibility:hidden">Tekst u popupu</div>
<p style="text-align:center">
<a id="ll" href="http://example.com" onmouseout="hidepopup('popup');">Link</a>
</p>
</body>
</html>

ivanhoe · 10. 02. 2006.

nema neke veze sa ovim javascriptom, ali mozda nekom ustedi malo muka:

izbegavajte <?xml deklaraciju pre doctype-a, nije neophodna, pogotovo ne za transitional dokumente, a sludi IE i ubaci ga u quirks mod...

bojan_bozovic · 10. 02. 2006.

@nK

Aha, znaci ovako:

Kôd:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>maestitia.net : index : Credits</title>
<script type="text/javascript">
function mm(e) {
var evt=e;
if (typeof (e) != 'object') evt = event;
var popup=document.getElementById(this.id+'popup');
popup.style.visibility="visible";
popup.style.top=evt.clientY+10+"px";
popup.style.left=evt.clientX+10+"px";
}
function hidepopup(element) {
var popup=document.getElementById(element.id+"popup");
popup.style.visibility="hidden";
}
function init() {
var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (links[i].className.match(/\bpopup\b/)) { 
     links[i].onmousemove=mm; 
     links[i].onmouseover=mm; 
    }
  }
}
</script>
<style type="text/css">
div.popup {
color:white;
background:black;
border:1px solid red;
}
</style>
<body onload="init()">
<p>
<a class="popup" id="A1" href="http://google.com" onmouseout="hidepopup(this);">Link</a><div id="A1popup" class="popup" style="position:absolute;visibility:hidden">Google!</div>
<br />
<a class="popup" id="A2" href="http://yahoo.com" onmouseout="hidepopup(this);">Link</a><div id="A2popup" class="popup" style="position:absolute;visibility:hidden">Yahoo!</div>
<br />
<a href="http://www.devprotalk.com">Link to DPT</a>
</p>
</body>
</html>

Za razliku od overliba ovo nije 100Kb i dobro je za SEO. Mozda samo treba malo da se istestira na nizim browserima (radi na FF 1.5, Netscape 7.2, IE 6 i Operi 8.51) moze da se koristi. Problem je sto brise onmouseover i onmousemove evente na klasi a.popup, ali to nije neki problem.

noviKorisnik · 10. 02. 2006.

Da, možeš još lepo da očistiš taj ... xml, html, štogod :-) ... onmouseover definiši isto pri inicijaciji. Referenca na popup u hidepopup onda ide isto kao i u showpopup (ipak bolje ime no mm :-))) ... i izbaci inline style sa divova.

(... jedino što je Opera pametna pa stavlja preko svoje balončiće s adresom linka, to valjda ne može da šteti, hehehe

Br@nkoR · 10. 02. 2006.

Sada gledam malo ovo, javiće se problemi ukoliko se do linka scroll-uje. Stavi npr sa mm funkciju ovako:

Kôd:

function mm(e) {
var evt=e;
if (typeof (e) != 'object') evt = event;
var popup=document.getElementById(this.id+'popup');
if(evt.pageX || evt.pageY){
  posX = evt.pageX;
  posY = evt.pageY;
}
else if(evt.clientX || evt.clientY){
  posX = evt.clientX + document.getElementsByTagName('body')[0].scrollLeft;
  posY = evt.clientY + document.getElementsByTagName('body')[0].scrollTop;
}
popup.style.visibility="visible";
popup.style.top=posY+10+"px";
popup.style.left=posX+10+"px";
}

bojan_bozovic · 11. 02. 2006.

Kôd:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>popup test</title>
<script type="text/javascript">
function show_popup(e) {
var evt=e;
if (typeof (e) != 'object') evt = event;
var popup=document.getElementById(this.id+'popup');
var x,y;
if (self.pageYOffset) // all except Explorer
{
x = self.pageXOffset;
y = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
popup.style.visibility="visible";
popup.style.top=y+evt.clientY+10+"px";
popup.style.left=x+evt.clientX+10+"px";
}
function hide_popup() {
var popup=document.getElementById(this.id+"popup");
popup.style.visibility="hidden";
}
function init(){ 
var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (links[i].className.match(/\bpopup\b/)) { 
     links[i].onmousemove=show_popup; 
     links[i].onmouseover=show_popup;
     links[i].onmouseout=hide_popup;
    }
  }
}
</script>
<style type="text/css">
div.popup {
color:white;
background:black;
border:1px solid red;
position:absolute;
visibility:hidden;
}
</style>
<body onload="init()">
<p>
<a class="popup" id="A1" href="http://example.com">Link</a><div id="A1popup" class="popup">Google!</div>
<br />
<a class="popup" id="A2" href="http://yahoo.com">Link</a><div id="A2popup" class="popup">Yahoo!</div>
<br />
<a href="http://www.devprotalk.com">DPT</a>
</p>
</body>
</html>

Vec uradjeno. Uz pomoc jos i js gurua sa quirksmode.org

100% iztestirano na browserima gore (uz skrol) i 1 Kb. Ako se uklone beline i komentari 860 bajta.

@nK
Hocemo li da pisemo copyright za ovo

bluesman · 11. 02. 2006.

Ako može jedan predlog za poboljšanje?

Napraviti sve kompletno automatski. Znači ne dodavati te silne popup div-ove (zamisli 30-ak ili 100 linkova na strani) nego čitati iz title="xxx" za svaki <a></a> i imati samo 1 popup koji se premešta po potrebi umesto za svaki link posebno. I to je 100% SEO a ne moraš ništa da brineš osim da dodaš title="xxx" za svaki link, što je ionako preporučljivo.

bojan_bozovic · 11. 02. 2006.

@bluesman

Imam takvu skriptu, ali mislim da pretrazivac ignorise title property. Neka me neko ispravi ako gresim, zato sam krenuo u ovo. Evo ti je ovde http://www.dustindiaz.com/sweet-titles-finalized/

Evo ti html:

<div class="popup" id="A1popup">This is link to DPT forums, webdevelopment community.</div><a class="popup" id="A1">http://www,devprotalk.com</a> i Google ce da vidi bas sta treba, kako treba.

Ovako moze sa document.GetElementById(this.id+"popup").innerHTML jos da se ubacuju slike dinamicki sa XMLHttpRequest (uz preload loading.gif

) Mnogo fleksibilnije resenje.

10. 02. 2006.	#2
noviKorisnik Dejan Katašić Wrote a book Datum učlanjenja: 10.06.2005 Lokacija: Novi Sad Poruke: 1.017 Hvala: 129 86 "Hvala" u 43 poruka	"event is not defined" ... __________________ novikorisnik.net_BoxUp Blog maternji_Monty Hall paradoks - interaktivni demo

10. 02. 2006.	#4
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	nema neke veze sa ovim javascriptom, ali mozda nekom ustedi malo muka: izbegavajte <?xml deklaraciju pre doctype-a, nije neophodna, pogotovo ne za transitional dokumente, a sludi IE i ubaci ga u quirks mod... __________________ Leadership is the art of getting people to want to do what you know must be done.

10. 02. 2006.	#6
noviKorisnik Dejan Katašić Wrote a book Datum učlanjenja: 10.06.2005 Lokacija: Novi Sad Poruke: 1.017 Hvala: 129 86 "Hvala" u 43 poruka	Da, možeš još lepo da očistiš taj ... xml, html, štogod :-) ... onmouseover definiši isto pri inicijaciji. Referenca na popup u hidepopup onda ide isto kao i u showpopup (ipak bolje ime no mm :-))) ... i izbaci inline style sa divova. (... jedino što je Opera pametna pa stavlja preko svoje balončiće s adresom linka, to valjda ne može da šteti, hehehe __________________ novikorisnik.net_BoxUp Blog maternji_Monty Hall paradoks - interaktivni demo

11. 02. 2006.	#9
bluesman Goran Pilipović Sir Write-a-Lot Datum učlanjenja: 18.05.2005 Lokacija: Beograd Poruke: 5.450 Hvala: 288 1.247 "Hvala" u 446 poruka	Ako može jedan predlog za poboljšanje? Napraviti sve kompletno automatski. Znači ne dodavati te silne popup div-ove (zamisli 30-ak ili 100 linkova na strani) nego čitati iz title="xxx" za svaki <a></a> i imati samo 1 popup koji se premešta po potrebi umesto za svaki link posebno. I to je 100% SEO a ne moraš ništa da brineš osim da dodaš title="xxx" za svaki link, što je ionako preporučljivo. __________________ Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman I don't always know what I'm talking about but I know I'm right!

11. 02. 2006.	#10
bojan_bozovic expert Master Datum učlanjenja: 20.12.2005 Poruke: 730 Hvala: 0 0 "Hvala" u 0 poruka	@bluesman Imam takvu skriptu, ali mislim da pretrazivac ignorise title property. Neka me neko ispravi ako gresim, zato sam krenuo u ovo. Evo ti je ovde http://www.dustindiaz.com/sweet-titles-finalized/ Evo ti html: <div class="popup" id="A1popup">This is link to DPT forums, webdevelopment community.</div><a class="popup" id="A1">http://www,devprotalk.com</a> i Google ce da vidi bas sta treba, kako treba. Ovako moze sa document.GetElementById(this.id+"popup").innerHTML jos da se ubacuju slike dinamicki sa XMLHttpRequest (uz preload loading.gif ) Mnogo fleksibilnije resenje. Poslednja izmena od bojan_bozovic : 11. 02. 2006. u 03:05.

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Kohana display event	ivanhoe	Web aplikacije, web servisi i software	4	30. 09. 2009. 00:27
Lose Organizovan Vista Event	Dejan Bizinger	Opušteno	5	01. 03. 2007. 19:46
<select> onClose event	godza	(X)HTML, JavaScript, DHTML, XML, CSS	14	23. 07. 2006. 20:04