DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 10. 02. 2006.   #1
bojan_bozovic
expert
Master
 
Avatar bojan_bozovic
 
Datum učlanjenja: 20.12.2005
Poruke: 730
Hvala: 0
0 "Hvala" u 0 poruka
bojan_bozovic is on a distinguished road
Cool 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>
bojan_bozovic je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #2
noviKorisnik
Dejan Katašić
Wrote a book
 
Avatar noviKorisnik
 
Datum učlanjenja: 10.06.2005
Lokacija: Novi Sad
Poruke: 1.017
Hvala: 129
86 "Hvala" u 43 poruka
noviKorisnik će postati "faca" uskoro
Default

"event is not defined" ...
noviKorisnik je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #3
noviKorisnik
Dejan Katašić
Wrote a book
 
Avatar noviKorisnik
 
Datum učlanjenja: 10.06.2005
Lokacija: Novi Sad
Poruke: 1.017
Hvala: 129
86 "Hvala" u 43 poruka
noviKorisnik će postati "faca" uskoro
Default

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>

Poslednja izmena od noviKorisnik : 10. 02. 2006. u 12:00.
noviKorisnik je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #4
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

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.
ivanhoe je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #5
bojan_bozovic
expert
Master
 
Avatar bojan_bozovic
 
Datum učlanjenja: 20.12.2005
Poruke: 730
Hvala: 0
0 "Hvala" u 0 poruka
bojan_bozovic is on a distinguished road
Default

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

Poslednja izmena od bojan_bozovic : 10. 02. 2006. u 15:08.
bojan_bozovic je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #6
noviKorisnik
Dejan Katašić
Wrote a book
 
Avatar noviKorisnik
 
Datum učlanjenja: 10.06.2005
Lokacija: Novi Sad
Poruke: 1.017
Hvala: 129
86 "Hvala" u 43 poruka
noviKorisnik će postati "faca" uskoro
Default

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 je offline   Odgovorite uz citat
Staro 10. 02. 2006.   #7
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

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";
}
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 11. 02. 2006.   #8
bojan_bozovic
expert
Master
 
Avatar bojan_bozovic
 
Datum učlanjenja: 20.12.2005
Poruke: 730
Hvala: 0
0 "Hvala" u 0 poruka
bojan_bozovic is on a distinguished road
Default

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

Poslednja izmena od bojan_bozovic : 11. 02. 2006. u 02:53.
bojan_bozovic je offline   Odgovorite uz citat
Staro 11. 02. 2006.   #9
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

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!
bluesman je offline   Odgovorite uz citat
Staro 11. 02. 2006.   #10
bojan_bozovic
expert
Master
 
Avatar bojan_bozovic
 
Datum učlanjenja: 20.12.2005
Poruke: 730
Hvala: 0
0 "Hvala" u 0 poruka
bojan_bozovic is on a distinguished road
Default

@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.
bojan_bozovic je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

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


Vreme je GMT +2. Trenutno vreme je 18:20.


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.