 |
|
| bojan_bozovic |
10. 02. 2006. 08:49 |
event.clientX u FF
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. 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 :-)))
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. 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:
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. 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:
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. 01:38 |
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 :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. |
| Vreme je GMT +2. Trenutno vreme je 09:37. |
|
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.