event.clientX u FF [Arhiva]

Pogčedajte punu verziju : event.clientX u FF

bojan_bozovic

10. 02. 2006., 08:49

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:

<?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., 10:17

"event is not defined" ...

noviKorisnik

10. 02. 2006., 10:47

Evo, da ti vratim malo iskasapljen kod, ali radi (definitivno mu treba još šminke :-)))
<?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., 13:32

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., 13:57

@nK

Aha, znaci ovako:

<?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., 14:17

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., 21:01

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

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., 01:38

<?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 :p 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 :D

bluesman

11. 02. 2006., 01:51

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., 01:56

@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.

bluesman

11. 02. 2006., 02:24

Ne ignoriše title, naprotiv. :)

bojan_bozovic

11. 02. 2006., 02:30

Sad cu ponovo pred editor, za drugu verziju :)

noviKorisnik

11. 02. 2006., 02:36

@nK
Hocemo li da pisemo copyright za ovo :D
Pa mogu da se potpišem ako treba :-) - to makar znam ...

bojan_bozovic

11. 02. 2006., 03:08

Pa mogu da se potpišem ako treba :-) - to makar znam ...

Odlicno, to cemo i uraditi.

@bluesman

Here it comes...

<?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">
/* copyright (C) 2006
Bojan Bozovic (http://maestitia.net/)
Dejan Katasic (http://korisnik.blog.hr/)
:) */
function show_popup(e) {
var evt=e;
var tekst=document.createTextNode(this.title);
if (typeof (e) != 'object') evt = event;
var popup=document.getElementById('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.appendChild(tekst);
this.title="";
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("popup");
this.title=popup.innerHTML;
popup.innerHTML="";
popup.style.visibility="hidden";
}
function init(){
document.body.innerHTML=document.body.innerHTML+"<div class='popup' id='popup'></div>";
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].title!="") {
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 title="DPT Forums" href="http://www.devprotalk.com">DPT</a>
</p>
</body>
</html>

nixa

11. 02. 2006., 03:20

E dobro je ovo, samo jos da stavite neku fancy transparenciju .. :)

bojan_bozovic

11. 02. 2006., 07:56

E dobro je ovo, samo jos da stavite neku fancy transparenciju .. :)

Samo sto to nije na mojoj TO-DO listi, stavi je na svoju, a ja ti dajem hintove (inace necemo da te ubacimo gore :p)
Kada se show_popup pozove moras da kreiras novi popup, sa document.createElement ili document.body.innerHTML i da ga uklonis iz DOM stabla nakon hide_popup. Zasto? Da bi mogao da imas vise popupova sto ti je nuzno za fadeout efekt
Fadeout - samo menjas stilove opacity;-khtml-opacity,-moz-opacity i filter:Alpha(opacity) ili kako vec bese za IE u petlji.
Ovo vec sljaka na http://maestitia.net/ meni zasada bolje ne treba.

bojan_bozovic

12. 02. 2006., 02:57

ivanhoe

12. 02. 2006., 10:25

Kada se show_popup pozove moras da kreiras novi popup, sa document.createElement ili document.body.innerHTML i da ga uklonis iz DOM stabla nakon hide_popup. Zasto? Da bi mogao da imas vise popupova sto ti je nuzno za fadeout efekt

a zasto? Zar ne moze samo da se menja transparencija postojecem div-u?
Imao sam nekih problema nedavno sa transparencijom, pa ajde molim te pojasni ovo, mozda mi ustedis besane noci :)

Btw, jedan predlog...kad se doda ovaj overlay, trebalo bi pobrisati title za linkove (ili alt ako je slika), to bi trebalo da resi problem sa baloncicem koji otvori browser...

bojan_bozovic

12. 02. 2006., 10:34

Pa i brise title, ne brise alt u slikama, to ce i meni da treba, ali se to lako doda, tako sto ubacimo i init za slike ako imaju title, pa brisemo i alt, veruj na rec ;-)

Ako menjas transparenciju postojecem divu a korisnik predje na sledeci link, sta onda biva? Zato treba vise od jednog diva da bi imao dobar fadeout kad korisnik predje na sledeci link, a fadeout se nije zavrsio.

bojan_bozovic

12. 02. 2006., 11:46

@ivanhoe

function init(){
var agt=navigator.userAgent.toLowerCase(),i;
var is_ie=((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_mac=(agt.indexOf("mac")!=-1);
if(document.getElementById&&!(is_ie&&is_mac)){
document.body.innerHTML=document.body.innerHTML+"<div class='popup' id='popup'></div>";
var links=document.getElementsByTagName('a');
var slike=document.getElementsByTagName('img');
for(i=0;i<links.length;i++){
if(links[i].title!=""){
links[i].onmousemove=show_popup;
links[i].onmouseover=show_popup;
links[i].onmouseout=hide_popup;
}
}
if (is_ie) { // nasli smo IE
for(i=0;i<slike.length;i++){
slike[i].alt=""; // brisi alt property na svim slikama
}
}
}
}

ivanhoe

12. 02. 2006., 12:45

Ako menjas transparenciju postojecem divu a korisnik predje na sledeci link, sta onda biva? Zato treba vise od jednog diva da bi imao dobar fadeout kad korisnik predje na sledeci link, a fadeout se nije zavrsio.

vaistinu, mudro zboris... :)

bojan_bozovic

14. 02. 2006., 10:20

http://maestitia.net/test.htm

Zasto? Pa, postoje ogromne nekompatibilnosti pri odredjivanju velicine wievporta u raznim browserima, potrebni su hakovi da bi dobili velicinu prostora u browseru bez scrollbara. Imate 2 linka, mouseover na svaki pa vucite udesno, da vidite da li skripta na MSIE/Mac i Safari dobija velicinu ekrana bez scrollbara ili tooltip siri BODY element. Pls, znam da ovde ima ljudi sa Macovima. Imamo skriptu i free je za koriscenje -- http://maestitia.net/title.js , ali mi malo pomoci treba ovde.

ivanhoe

14. 02. 2006., 15:32

u kojim browserima ne radi offsetWidth i offsetHeight ? Da ne isprobavam ja sad, ako znas napamet da mi kazes...

bojan_bozovic

14. 02. 2006., 15:53

offsetWidth i offsetHeight ti rade svuda i daju ti sirinu i visinu elementa. Problem je meni IE6 u striktnom modu

Dalje, problem su FF i Opera koje naopacki daju visinu prozora bez scrollbara (a to meni treba). Za jedan browser jedno, za drugi deseto.

if (self.innerHeight) // all except Explorer
{
if (self.innerWidth>document.body.clientWidth) {
windowX = document.body.clientWidth;
} else {
windowX = self.innerWidth;
}

if (self.innerHeight>document.body.clientHeight) {
windowY = document.body.clientHeight;
} else {
windowY = self.innerHeight;
}
}

EDIT: titkle.js na mom sajtu izmenjena za IE6/strict.
EDIT jos je ovo testirano samo uz CSS

html, body {
margin:0;padding:0;
}

Sto je OK jer body elementu mozete da date padding koliki vam se svidi (podrazumevano je 9px)

EDIT:: Istestirano u operi 6.0 - pojavljuju se obicni tooltipovi (OK)

Dalji test sa CSS:

Gecko (1.8) - nemojte da dajete marginu BODY elementu niti padding HTML elementu , neka budu na nuli, dajte padding BODY elementu, inace ce tooltip da predje na levu stranu kursora pre nego sto tooltip dodje cak do ivice samog BODY elementa! IE i Opera nemaju problem.
Dakle, ovo je dobar CSS:

html {
margin:0;
padding:0;
}
body{
margin:0;
padding:10px;
}
ili slicno. Ne dajte padding HTML elementu razlicit od 0, ni marginu BODY elementu razlicit od 0.

bojan_bozovic

25. 03. 2006., 12:36

Nova verzija 2:

http://maestitia.net/js/test.html
http://maestitia.net/js/title.js

CHANGED:

Vise nije potrebno ista ubacivati kao <body onload= jer koristim attachEvent/addEventListener model za V5+ browsere

Vise ne brise onmouseover, onmousemove, onmouseout evente, jer ih registrujem novim modelom (v. gore)

moguce je pozvati show_popup i hide_popup funkcije ovako, sa bilo kojim innerHTML
<A href="#" onmousemove="show_popup(event,'<img src="slika.jpg" />')" onmouseout="hide_popup(event)">Link</A>

Plus sto i dalje svuda gde ima link title atribut, naravno menja title popupove.

Ne znam kako se ponasa kad element ima i onmousemove/onmouseout i title. Nije preporucljivo :)

FF, IE 6.0, Opera 8.5 - sve radi :) I jos u 3,62Kb a ne u 40Kb koliko je overlib.