Döntsd el, vagy prototype-scriptacolous-lightbox2 vagy jquery-thickbox. A jquery és a prototype a rengeteg átfedés miatt ütik egymást...
BlackY
Full Version: JavaScript
Sejtettem.
Akkor azt nem lehet megoldani, hogy mikor egy linkre kattintok betöltse a thickbox-ot, majd futás után meg betöltse a lightbox2-t ugye?
Akkor azt nem lehet megoldani, hogy mikor egy linkre kattintok betöltse a thickbox-ot, majd futás után meg betöltse a lightbox2-t ugye?
http://www.ajaxian.com/downloads/code/prot...rototypify.html ki tudja neked szedni a prototype-ot (ill. magán keresztül teszi elérhetővé, ezzel lehetővé téve más kódok futtatását) , közelről nem néztem, a forrás
http://www.ajaxian.com/downloads/code/prot.../prototypify.js
http://www.ajaxian.com/downloads/code/prot.../prototypify.js
Ez jól hangzik 
Köszi
Most ezt a hibát dobja a konzol:
Hiba: uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.5.0
Mintha nem látná. Feltettem a linkelt prototype-file-t.
Azért még edzek vele.
KösziMost ezt a hibát dobja a konzol:
Hiba: uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.5.0
Mintha nem látná. Feltettem a linkelt prototype-file-t.
Azért még edzek vele.
Üdv!
Na meglett a megoldás. Kerestünk másik hasonló scriptet, ami nem ütközik
Lenne még egy kérdésem. Van egy oldal, ahol megy folyamatosan egy stream, amiről statisztika készül, hogy mennyi ideig ment.
Egyetlen baj van a php-ban íródott stattal, hogy amikor csak bezárja a látogató az oldalt, a stat nem áll meg mivel nem kap semmi inputot.
A body-nak ugye van unload eseménye, amibe js-t lehet írni, de nem tudom mit lehetne, mert a popup nem jó, mivel az szinte mindenkinek tiltva van.
Erre nincs véletlenül vaalmi ötletetek?
Na meglett a megoldás. Kerestünk másik hasonló scriptet, ami nem ütközik
Lenne még egy kérdésem. Van egy oldal, ahol megy folyamatosan egy stream, amiről statisztika készül, hogy mennyi ideig ment.
Egyetlen baj van a php-ban íródott stattal, hogy amikor csak bezárja a látogató az oldalt, a stat nem áll meg
mivel nem kap semmi inputot.A body-nak ugye van unload eseménye, amibe js-t lehet írni, de nem tudom mit lehetne, mert a popup nem jó, mivel az szinte mindenkinek tiltva van.
Erre nincs véletlenül vaalmi ötletetek?
akit érdekel a lapfrissítés nélküli, eseménykezelős form/fájlfeltöltés katt ide
http://weblabor.hu/forumok/temak/16313#comment-38100
http://weblabor.hu/forumok/temak/16313#comment-38100
Sziasztok, egy kérdésem lenne, a következő linken lévő kis ablakot , hogyan lehet megcsinálni?
http://web.t-online.hu/mendemonda/
Javascriptben, és ez lenne a popup ablak, valamilyen linket tudtok mutatni, ha popup ablak, akkor nem kell, mert az van!
Csak, eddig még olyan popup ablakot láttam, ameikora valamire kattintotam és megjelent egy ablak, ez viszont annyiban másabb, hogy nem kell rákattintani, sa fölé viszem a kurzort!
http://web.t-online.hu/mendemonda/
Javascriptben, és ez lenne a popup ablak, valamilyen linket tudtok mutatni, ha popup ablak, akkor nem kell, mert az van!
Csak, eddig még olyan popup ablakot láttam, ameikora valamire kattintotam és megjelent egy ablak, ez viszont annyiban másabb, hogy nem kell rákattintani, sa fölé viszem a kurzort!
Ha jól sejtem mire gondolsz, akkor ez nem javascript, hanem képekből van összerakva...
Jól mondja Sandmann, táblázatba van rendezve a feldarabolt grafika. Ha azt akarod, hogy akkor nyíljon a popup ha egy kép fölé viszed az egeret, akkor ne onClick-et használj popup nyitáshoz a képen, hanem onMouseOver-t.
Nos, a szitu szvsz. bonyolultabb Van egy alapesetben display: hidden-es div-ed, amiben van a "pop-up" tartalom, ezt a kép onmouseover eseményére beviszed a megfelelő helyre (top, left, position: absolute), és megjeleníted, onmouseout-kor eltünteted.
BlackY
Van egy alapesetben display: hidden-es div-ed, amiben van a "pop-up" tartalom, ezt a kép onmouseover eseményére beviszed a megfelelő helyre (top, left, position: absolute), és megjeleníted, onmouseout-kor eltünteted.BlackY
Hali!
Épp a script.aculo javascript framworkel próbálkozok.Olyan szeretnék,hogy egy 500x100 pixeles div egy linkre kattintva megjelenne.A gond az,hogy nemtudom hogyan oldjam meg, hogy amikor valaki rámegy az oldalra,akkor az a div 0x0 pixel legyen, tehát ne látszódjon semennyire se. Néztem a demokat a script.aculo-n, de ott mindenhol egy meglevő divvel csinált efekteket.
Előre is köszi
Épp a script.aculo javascript framworkel próbálkozok.Olyan szeretnék,hogy egy 500x100 pixeles div egy linkre kattintva megjelenne.A gond az,hogy nemtudom hogyan oldjam meg, hogy amikor valaki rámegy az oldalra,akkor az a div 0x0 pixel legyen, tehát ne látszódjon semennyire se. Néztem a demokat a script.aculo-n, de ott mindenhol egy meglevő divvel csinált efekteket.
Előre is köszi
KÓD
<div style="display: none">
A DIV tartalma
</div>
A DIV tartalma
</div>
Fontos, hogyha ilyen linkes módon akarod megoldani, akkor mindenképp így kell megadni a display: none-t.
http://glassrainbow.hu/?oldal=bemutatkozas
Kattints a Tóth Kornéliára, az is ilyen módon van megoldva.
köszi
Helló!
Nem szeretem a JavaScriptet, nem is szoktam használni. De most mégis szükségem lenne rá és mivel nem sikerül, ezért kérdeznék.
Szóval azt szeretném megoldani, hogy egy cella szélessége a látogató képernyőfelbontásának függvényében változzon. A cella "screen.width - 312" széles szeretném, hogy legyen. De hogy ezt hogyan tudnám berakni a width tagba avval hiába próbálkoztam...
Egy másik problémám is lenne, szintén a felbontással kapcsolatban:
Ha a látogató felbontása 1280-as vagy nagyobb, akkor egy string php változóhoz szeretnék hozzáfűzni karakterláncot. (Az illető változó majd később kerül kiíratásra.) Ötlet?
Nem szeretem a JavaScriptet, nem is szoktam használni.
De most mégis szükségem lenne rá és mivel nem sikerül, ezért kérdeznék.Szóval azt szeretném megoldani, hogy egy cella szélessége a látogató képernyőfelbontásának függvényében változzon. A cella "screen.width - 312" széles szeretném, hogy legyen. De hogy ezt hogyan tudnám berakni a width tagba avval hiába próbálkoztam...
Egy másik problémám is lenne, szintén a felbontással kapcsolatban:
Ha a látogató felbontása 1280-as vagy nagyobb, akkor egy string php változóhoz szeretnék hozzáfűzni karakterláncot. (Az illető változó majd később kerül kiíratásra.) Ötlet?
IDÉZET(LeGaS @ 2006. Dec 31., 11:44) 
KÓD
<div style="display: none">
A DIV tartalma
</div>
A DIV tartalma
</div>
Fontos, hogyha ilyen linkes módon akarod megoldani, akkor mindenképp így kell megadni a display: none-t.
http://glassrainbow.hu/?oldal=bemutatkozas
Kattints a Tóth Kornéliára, az is ilyen módon van megoldva.
KÓD
<a onclick="new Effect.BlindDown('kornelia');" style="cursor: pointer;">Tóth Kornélia</a>
Máskülönben az életben nem fogja senki kitalálni (FF 2 alatt legalábbis), hogy az egy link, amire kattintani is lehetne.
Tudom. Ki is fogom javítani hamarosan.
Ki is fogom javítani hamarosan.
IDÉZET(Warner @ 2006. Dec 31., 12:53)
Helló!
Nem szeretem a JavaScriptet, nem is szoktam használni.
De most mégis szükségem lenne rá és mivel nem sikerül, ezért kérdeznék.Szóval azt szeretném megoldani, hogy egy cella szélessége a látogató képernyőfelbontásának függvényében változzon. A cella "screen.width - 312" széles szeretném, hogy legyen. De hogy ezt hogyan tudnám berakni a width tagba avval hiába próbálkoztam...
Egy másik problémám is lenne, szintén a felbontással kapcsolatban:
Ha a látogató felbontása 1280-as vagy nagyobb, akkor egy string php változóhoz szeretnék hozzáfűzni karakterláncot. (Az illető változó majd később kerül kiíratásra.) Ötlet?
Nincs ötlet?
Az első kérdésedre szerintem azt próbáld meg, hogy az egész <td>-t JS-tel íratod ki.
Persze egy noscript taggal együtt, ha esetleg nem lenne JS 
Második meg valami AJAX, közvetlenül PHP változót nem módosíthatsz. És inkább CSS-el játsz, hogy minden felbontásban jól nézzen ki a lap
BlackY
Második meg valami AJAX, közvetlenül PHP változót nem módosíthatsz. És inkább CSS-el játsz, hogy minden felbontásban jól nézzen ki a lap
BlackY
HI. Egy kérdés:
Milyen kódot kell írni ahhoz hogy egy lap átírányítson egy másik lapra?
Milyen kódot kell írni ahhoz hogy egy lap átírányítson egy másik lapra?
PHP-vel szerintem egyszerűbb és szebb is. Igaz várakozási időt itt nem lehet megadni.
Igaz várakozási időt itt nem lehet megadni.KÓD
<?php
header("Location: http://www.ujhely.hu");
exit;
?>
header("Location: http://www.ujhely.hu");
exit;
?>
Köszi a segítséget!
Esetleg hogyan kell html-esen beilleszteni ezt a kódot? mert olyan helyre akarom beilleszteni ami csak html-t tud kezelni
Esetleg hogyan kell html-esen beilleszteni ezt a kódot? mert olyan helyre akarom beilleszteni ami csak html-t tud kezelni
Köszi.
IDÉZET(ReSeTer @ 2007. Jan 2., 15:08)
Köszi a segítséget!
Esetleg hogyan kell html-esen beilleszteni ezt a kódot? mert olyan helyre akarom beilleszteni ami csak html-t tud kezelni
A PHP kódot sehova mer azért PHP hogy kell neki a PHP nem csak a html. Úgyhogy a javascriptes megoldás lesz a barátod... vagy meta-tages, bár azt gugli nem szereti
Mert a JavaScriptet igen?
És tök mindegy, letiltott JS-hez v. Meta refreshes böngészőknek úgyis beszúrod a linket, hogy kattints ide...
BlackY
És tök mindegy, letiltott JS-hez v. Meta refreshes böngészőknek úgyis beszúrod a linket, hogy kattints ide...
BlackY
IDÉZET(BlackY @ 2007. Jan 2., 19:20)
Mert a JavaScriptet igen?
És tök mindegy, letiltott JS-hez v. Meta refreshes böngészőknek úgyis beszúrod a linket, hogy kattints ide...
BlackY
Igen, azt se szereti a google. De a metát kevésbé szereti. Azt olvastam, a meta átirányításért hátrébb sorol vagy mi. a jsért is, mondjuk. [gonosz]base64-eled az átirányító kódot, szerzel egy scriptet, ami base64 dekódol és eval(base64_decode("idejönabase64kód"))[/gonosz]
És a Google továbbra sem fogja a lapot megtalálni, nem értelmezi a JS-t... (vagy csak minimálisan...)
<html>
<head>
<title>Refresh példa</title>
<meta http-equiv="refresh" content="0;url=amasikoldal.html">
<style type="text/css">
#container {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.location = 'amasikoldal.html';
}
</script>
<noscript>
<style type="text/css">
#container {
display: block;
}
</style>
</noscript>
</head>
<body>
<div id="container">
Lépj <a href="amasikoldal.html">be</a>!
</div>
</body>
</html>
BlackY
KÓD
<html>
<head>
<title>Refresh példa</title>
<meta http-equiv="refresh" content="0;url=amasikoldal.html">
<style type="text/css">
#container {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.location = 'amasikoldal.html';
}
</script>
<noscript>
<style type="text/css">
#container {
display: block;
}
</style>
</noscript>
</head>
<body>
<div id="container">
Lépj <a href="amasikoldal.html">be</a>!
</div>
</body>
</html>
BlackY
Két fontos, megoldásra váró problémám is lenne.
1. Van egy link, amire onmouseover-el kellene egy kis felugró fül amiben egy képet kellne megjeleníteni. Természetesen minden linknél más kép van a felugró fülben. Ezt a problémát feltettem a CSS topicban is mert lehet, hogy abban is van rá megoldás (lásd pl drop down menük), de ha nem lenne JS-ben is megfelelne.
2. Van pl egy űrlap amibenlehet fájlt is feltölteni, és mikor elküldjük az űrlapot akkor ugye elkezdődik a feltöltés és ki kellene írni, hogy hány %-nál jár. Ezt hogyan lehetne megoldani? Mert ugye egy 10MB-s fájlnál idegesítő, ha nem látja az ember, hogy mennyi van még. Esetleg egy becsült hátralévő idő sem ártana. Sajnos JS-ben elég gyökér vagyok, amire nincs mentségem, ezért segítségeteket kérem.
Segítségeteket előre is köszönöm!
1. Van egy link, amire onmouseover-el kellene egy kis felugró fül amiben egy képet kellne megjeleníteni. Természetesen minden linknél más kép van a felugró fülben. Ezt a problémát feltettem a CSS topicban is mert lehet, hogy abban is van rá megoldás (lásd pl drop down menük), de ha nem lenne JS-ben is megfelelne.
2. Van pl egy űrlap amibenlehet fájlt is feltölteni, és mikor elküldjük az űrlapot akkor ugye elkezdődik a feltöltés és ki kellene írni, hogy hány %-nál jár. Ezt hogyan lehetne megoldani? Mert ugye egy 10MB-s fájlnál idegesítő, ha nem látja az ember, hogy mennyi van még. Esetleg egy becsült hátralévő idő sem ártana. Sajnos JS-ben elég gyökér vagyok, amire nincs mentségem, ezért segítségeteket kérem.
Segítségeteket előre is köszönöm!
IDÉZET(Anybudi @ 2007. Jan 6., 15:04)
2. Van pl egy űrlap amibenlehet fájlt is feltölteni, és mikor elküldjük az űrlapot akkor ugye elkezdődik a feltöltés és ki kellene írni, hogy hány %-nál jár. Ezt hogyan lehetne megoldani? Mert ugye egy 10MB-s fájlnál idegesítő, ha nem látja az ember, hogy mennyi van még. Esetleg egy becsült hátralévő idő sem ártana. Sajnos JS-ben elég gyökér vagyok, amire nincs mentségem, ezért segítségeteket kérem.
Olvasd el ezt, itt írnak ilyenről: http://weblabor.hu/blog/20061102/php520
IDÉZET(Anybudi @ 2007. Jan 6., 14:04)
Két fontos, megoldásra váró problémám is lenne.
1. Van egy link, amire onmouseover-el kellene egy kis felugró fül amiben egy képet kellne megjeleníteni. Természetesen minden linknél más kép van a felugró fülben. Ezt a problémát feltettem a CSS topicban is mert lehet, hogy abban is van rá megoldás (lásd pl drop down menük), de ha nem lenne JS-ben is megfelelne.
2. Van pl egy űrlap amibenlehet fájlt is feltölteni, és mikor elküldjük az űrlapot akkor ugye elkezdődik a feltöltés és ki kellene írni, hogy hány %-nál jár. Ezt hogyan lehetne megoldani? Mert ugye egy 10MB-s fájlnál idegesítő, ha nem látja az ember, hogy mennyi van még. Esetleg egy becsült hátralévő idő sem ártana. Sajnos JS-ben elég gyökér vagyok, amire nincs mentségem, ezért segítségeteket kérem.
Segítségeteket előre is köszönöm!
elsőre nem tudok linket adni, azt csak megtudom írni, mennyi pénzed van
, a második http://www.devpro.it/upload_progress/ill. ha elég a képcserés iframe-s hátterbentöltős akkor, http://weblabor.hu/forumok/temak/16313#comment-38397 - tól
Köszi a tippeket.
Toxin: Ahogy ismerlek - ha van egy kis időd - nem hiszem, hogy egy magadfajta JS mágusnak túl sok idejébe tellene egy ilyen szkript. Nemet tudnál mondani egy haldokló kívánságának?
Toxin: Ahogy ismerlek - ha van egy kis időd - nem hiszem, hogy egy magadfajta JS mágusnak túl sok idejébe tellene egy ilyen szkript. Nemet tudnál mondani egy haldokló kívánságának?
http://www.designmeltdown.com/chapters/Retro/Part2.aspx
Itt láttam ilyesmit, amire te gondolsz. Lehet ki tudod másolni a kódot, és beilleszteni ahova kell...
Ha sikerül akkor légyszi írd meg, h hogyan, mert nekem eddig nem jött össze... mondjuk nem is próbálkoztam sokat.
Sandmann
Itt láttam ilyesmit, amire te gondolsz. Lehet ki tudod másolni a kódot, és beilleszteni ahova kell...
Ha sikerül akkor légyszi írd meg, h hogyan, mert nekem eddig nem jött össze... mondjuk nem is próbálkoztam sokat.
Sandmann
http://www.linkstart.hu/
Ilyesmire gondolsz?
Relatíve pofátlanul egyszerű, mikor csináltam próbáltam egy Lightboxot ilyenné áthegeszteni, egy napot elcsesztem rá, berágtam, töröltem a francba és újabb fél nap alatt megírtam a sajátot.
Elvben:
A lapon történő változáskor (onload esemény, ajax-os megoldásoknak lapfrissítéskor) végigfutsz a linkeken rel-től / class-tól függően hozzáadsz egy onmouseover kezelőt.
A kezelő ellenőrzi, hogy a megfelelő div-ek szerepelnek-e már a dom-ban, ha nem, hozzáadja, megjeleníti (és pozicionálja) a div-et, elkezdi letölteni a képet (Image objektummal), a letöltés idejére kitesz egy preloader image-t (amit a css miatt a böngésző egyszer már letöltött!), ha kész a letöltés (Image.onload) beállítja a kép src tulajdonságát és megjelenik a kép.
BlackY
Ilyesmire gondolsz?
Relatíve pofátlanul egyszerű, mikor csináltam próbáltam egy Lightboxot ilyenné áthegeszteni, egy napot elcsesztem rá, berágtam, töröltem a francba és újabb fél nap alatt megírtam a sajátot.
Elvben:
A lapon történő változáskor (onload esemény, ajax-os megoldásoknak lapfrissítéskor) végigfutsz a linkeken rel-től / class-tól függően hozzáadsz egy onmouseover kezelőt.
A kezelő ellenőrzi, hogy a megfelelő div-ek szerepelnek-e már a dom-ban, ha nem, hozzáadja, megjeleníti (és pozicionálja) a div-et, elkezdi letölteni a képet (Image objektummal), a letöltés idejére kitesz egy preloader image-t (amit a css miatt a böngésző egyszer már letöltött!), ha kész a letöltés (Image.onload) beállítja a kép src tulajdonságát és megjelenik a kép.
BlackY
Igen pont ilyenre, de mint a snap.com-os példánál is, nem azon van a hangsúly, hogy egy oldal preview-ja legyen a fülben, sőt ez egyáltalán nem érdekes, hanem csak egy sima képet kellene behoznia.
De, mivel ezen probléma megoldásához szükséges JS ismeretekkel nem rendelkezek, ezért ha BlackY vagy Toxin összeraknátok nekem egy ilyen kis egyszerű szkriptet mindenképpen hálás lennék, mert a dolog elég fontos lenne.
Nagyon szégyenlem magam, valamikor már tényleg rá kell magam szánni JS ismeret szerzésre, de jelenleg nem sok időm van és elég sürgős lenne a dolog.
Előre is köszönöm!
Anybudi
De, mivel ezen probléma megoldásához szükséges JS ismeretekkel nem rendelkezek, ezért ha BlackY vagy Toxin összeraknátok nekem egy ilyen kis egyszerű szkriptet mindenképpen hálás lennék, mert a dolog elég fontos lenne.
Nagyon szégyenlem magam, valamikor már tényleg rá kell magam szánni JS ismeret szerzésre, de jelenleg nem sok időm van és elég sürgős lenne a dolog.
Előre is köszönöm!
Anybudi
Nos, a linkstart.hu alapján sikerült és csináltam egy példát is. Feldobom valahova és belinkelem, hátha másoknak is kellhet még. Linkbox
Mondjuk ez fix méretekkel játszik (300 px széles "nagy" kép, 80 px széles kis kép + 20 cm távolság (vagy 88 és 12? 
)), szóval nem az a tipikus univerzálisan használható kód... :gondolokdik:
BlackY
)), szóval nem az a tipikus univerzálisan használható kód... :gondolokdik:BlackY
Igazad van, de nekem egyenlőre megfelel, ha van időd és összedobsz egyet, oszd meg velünk. Most úgy csinálom, hogy amikor a képet feltölti az illető akkor megcsinálja belőlük a thumb-ot meg a nagy képet megfelelő méretben.
Bár, ahogy nézem van benne egy kis hiba, ugyanis, ha pl a link az nem egy kép, hanem egy szöveg, akkor firefoxban is kell az a pár pixel pluszba a top-hoz, különben a szövegre rakja rá, és ha pl hosszú a szöveg, és a végére eállsz rá, akkor csak villog a kép.
Bár, ahogy nézem van benne egy kis hiba, ugyanis, ha pl a link az nem egy kép, hanem egy szöveg, akkor firefoxban is kell az a pár pixel pluszba a top-hoz, különben a szövegre rakja rá, és ha pl hosszú a szöveg, és a végére eállsz rá, akkor csak villog a kép.
IDÉZET(saxus @ 2007. Jan 6., 14:44)
Igen, de nekem nincs php 5.2 a szerverem, szóval errő ezek szerint lemondhatok...
Vélemény?
IDÉZET(toxin @ 2007. Jan 6., 14:45)
Ez nekem nem akar működni (beállítottam a tmp-t és a php.ini-t is konfiguráltam), ráadásul befagyasztja a firefox-ot, ami így leáll...
justAnAnotherProToolTip , demo, zip alján kicsit sárga kicsit savanyú de nyusz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>justAnAnotherProToolTip</title>
<script src="lib/prototype.js" type=""></script>
<script src="lib/template.js" type=""></script>
<style type="text/css">
#links_wrapper div{
border:1px solid red;
}
#left{
text-align:left;
}
#center{
text-align: center;
}
#right{
text-align:right;
}
.tooltip_link_wrapper{
display:block;
}
.tooltip_link{
color: black;
}
/* tooltip */
#tooltip_box{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
var jAAPTT = Class.create();
jAAPTT.prototype = {
initialize : function(options){
this.images = [];
this.imgPreLoader = {
// start loading
startLoad : function(img_src){
this.img = new Image();
this.img.src = img_src;
this.img.onload = this.img.onerror =
this.img.onabort = this.imgPreLoader.onFinished.bind(this,img_src);
},
// if finished
onFinished : function(img_src){
this.images.push(img_src);
// show updated toolbox
var tooltip = t_tooltip.process( { tooltip_img_src : img_src } );
// update toolbox
Element.update('tooltip_wrapper',tooltip);
// refresh dimension datas
this.refreshToolBox();
}
}
// default values, or inic params
this.options = Object.extend({
bigImgPath : 'img/big/',
thumbImgPath : 'img/thumb/',
loaderImg : 'img/loading.gif',
offsetX : 15,
offsetY : 15
}, options || {});
// add tooltip wrapper to body
new Insertion.Bottom(document.body,'<div id="tooltip_wrapper" style="display:none;position:absolute;"></div>');
// parse template of the tooltip
// put the event handlers to class="tooltip_link" links
document.getElementsByClassName('tooltip_link').each(function(tooltip_link){
// and show the tooltip
Event.observe(tooltip_link,'mousemove',this.onShowToolTip.bindAsEventListener(this));
Event.observe(tooltip_link,'mouseout',this.onHideToolTip.bindAsEventListener(this));
}.bind(this));
},
onShowToolTip : function(e){
this.event = e;
// calculate the init, and modified positions
this.initX = Event.pointerX(this.event) + this.options.offsetX;
this.initY = Event.pointerY(this.event) + this.options.offsetY;
// get the dimensions of the viewport
this.viewport = {
width : document.documentElement.clientWidth || document.body.clientWidth,
height : document.documentElement.clientHeight || document.body.clientHeight
}
var scrollOffset = Position.realOffset(document.body);
this.viewport.height = this.viewport.height + scrollOffset[1];
this.viewport.width = this.viewport.width + scrollOffset[0];
// put image to toolbox, first the preloader img
var act_link = Event.element(e);
// if need call the preload method
if (this.images.indexOf( this.options.thumbImgPath+act_link.rel)!=-1)
{
var tooltip = t_tooltip.process(
{ tooltip_img_src : this.options.thumbImgPath + act_link.rel
} );
}
else
{
this.imgPreLoader.startLoad.bind(this)(this.options.thumbImgPath + act_link.rel);
var tooltip = t_tooltip.process( { tooltip_img_src : this.options.loaderImg } );
}
// show toolbox
Element.update('tooltip_wrapper',tooltip);
this.refreshToolBox();
},
refreshToolBox : function(){
// get toolbox_dimensions
var t_dim = $('tooltip_wrapper').getDimensions();
// bigger than the vieport, modified them
var finalX = this.initX + t_dim.width > this.viewport.width ?
this.initX - ( t_dim.width + this.options.offsetX) : this.initX;
var finalY = this.initY + t_dim.height > this.viewport.height ?
this.initY - ( t_dim.height + this.options.offsetY) : this.initY;
// set final positions
Element.setStyle('tooltip_wrapper',{
top : finalY+'px',
left : finalX+'px'
});
Element.show('tooltip_wrapper');
},
// hide toolbox if we dont need it
onHideToolTip : function(e){
Element.hide('tooltip_wrapper');
}
}
var t_tooltip = {};
Event.observe(window,'load',function(){
t_tooltip = TrimPath.parseDOMTemplate("t_tooltip");
// just create test links, for testing purpose
for(var i=1;i<10;i++)
{
var tempLink = '<span class="tooltip_link_wrapper"><a class="tooltip_link" href="#" rel='+i+'.jpg">'+i+'. teszt link</a></span>';
new Insertion.Bottom ('left',tempLink);
new Insertion.Bottom ('center',tempLink);
new Insertion.Bottom ('right',tempLink);
}
// inic our new beauty tool ^^)
new jAAPTT({
thumbImgPath : 'img/big/'
});
})
</script>
</head>
<body>
<div id="links_wrapper" style="width:100%;">
<div id="left" style="float:left;width:33%"></div>
<div id="center" style="float:left;width:33%"></div>
<div id="right" style="float:left;width:33%"></div>
<div style="clear:both"></div>
</div>
<!-- inner template of the tooltip -->
<div id="templates">
<textarea id="t_tooltip" style="display:none">
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
</textarea>
</div>
<!-- /templates -->
</body>
</html>
http://toxin.hu/tooltip/tooltip.html
http://toxin.hu/tooltip/tooltip.zip
majd BlackY elmagyarázza
, ill. lásd kommentek
ill. http://trimpath.com/project/wiki/JavaScriptTemplates sablonmotort használtam, melóhelyre gyakorlásra, sok értelme nem volt kiszedthető, ha nem, a sablon
<!-- inner template of the tooltip -->
<div id="templates">
<textarea id="t_tooltip" style="display:none">
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
</textarea>
</div>
<!-- /templates -->
lényegi rész
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
ezt cserélgeti a kód, IE alatt kicsit még hegeszteni kéne úgylátom, hajrá
kicsit sárga kicsit savanyú de nyusz CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>justAnAnotherProToolTip</title>
<script src="lib/prototype.js" type=""></script>
<script src="lib/template.js" type=""></script>
<style type="text/css">
#links_wrapper div{
border:1px solid red;
}
#left{
text-align:left;
}
#center{
text-align: center;
}
#right{
text-align:right;
}
.tooltip_link_wrapper{
display:block;
}
.tooltip_link{
color: black;
}
/* tooltip */
#tooltip_box{
background-color: black;
color: white;
}
</style>
<script type="text/javascript">
var jAAPTT = Class.create();
jAAPTT.prototype = {
initialize : function(options){
this.images = [];
this.imgPreLoader = {
// start loading
startLoad : function(img_src){
this.img = new Image();
this.img.src = img_src;
this.img.onload = this.img.onerror =
this.img.onabort = this.imgPreLoader.onFinished.bind(this,img_src);
},
// if finished
onFinished : function(img_src){
this.images.push(img_src);
// show updated toolbox
var tooltip = t_tooltip.process( { tooltip_img_src : img_src } );
// update toolbox
Element.update('tooltip_wrapper',tooltip);
// refresh dimension datas
this.refreshToolBox();
}
}
// default values, or inic params
this.options = Object.extend({
bigImgPath : 'img/big/',
thumbImgPath : 'img/thumb/',
loaderImg : 'img/loading.gif',
offsetX : 15,
offsetY : 15
}, options || {});
// add tooltip wrapper to body
new Insertion.Bottom(document.body,'<div id="tooltip_wrapper" style="display:none;position:absolute;"></div>');
// parse template of the tooltip
// put the event handlers to class="tooltip_link" links
document.getElementsByClassName('tooltip_link').each(function(tooltip_link){
// and show the tooltip
Event.observe(tooltip_link,'mousemove',this.onShowToolTip.bindAsEventListener(this));
Event.observe(tooltip_link,'mouseout',this.onHideToolTip.bindAsEventListener(this));
}.bind(this));
},
onShowToolTip : function(e){
this.event = e;
// calculate the init, and modified positions
this.initX = Event.pointerX(this.event) + this.options.offsetX;
this.initY = Event.pointerY(this.event) + this.options.offsetY;
// get the dimensions of the viewport
this.viewport = {
width : document.documentElement.clientWidth || document.body.clientWidth,
height : document.documentElement.clientHeight || document.body.clientHeight
}
var scrollOffset = Position.realOffset(document.body);
this.viewport.height = this.viewport.height + scrollOffset[1];
this.viewport.width = this.viewport.width + scrollOffset[0];
// put image to toolbox, first the preloader img
var act_link = Event.element(e);
// if need call the preload method
if (this.images.indexOf( this.options.thumbImgPath+act_link.rel)!=-1)
{
var tooltip = t_tooltip.process(
{ tooltip_img_src : this.options.thumbImgPath + act_link.rel
} );
}
else
{
this.imgPreLoader.startLoad.bind(this)(this.options.thumbImgPath + act_link.rel);
var tooltip = t_tooltip.process( { tooltip_img_src : this.options.loaderImg } );
}
// show toolbox
Element.update('tooltip_wrapper',tooltip);
this.refreshToolBox();
},
refreshToolBox : function(){
// get toolbox_dimensions
var t_dim = $('tooltip_wrapper').getDimensions();
// bigger than the vieport, modified them
var finalX = this.initX + t_dim.width > this.viewport.width ?
this.initX - ( t_dim.width + this.options.offsetX) : this.initX;
var finalY = this.initY + t_dim.height > this.viewport.height ?
this.initY - ( t_dim.height + this.options.offsetY) : this.initY;
// set final positions
Element.setStyle('tooltip_wrapper',{
top : finalY+'px',
left : finalX+'px'
});
Element.show('tooltip_wrapper');
},
// hide toolbox if we dont need it
onHideToolTip : function(e){
Element.hide('tooltip_wrapper');
}
}
var t_tooltip = {};
Event.observe(window,'load',function(){
t_tooltip = TrimPath.parseDOMTemplate("t_tooltip");
// just create test links, for testing purpose
for(var i=1;i<10;i++)
{
var tempLink = '<span class="tooltip_link_wrapper"><a class="tooltip_link" href="#" rel='+i+'.jpg">'+i+'. teszt link</a></span>';
new Insertion.Bottom ('left',tempLink);
new Insertion.Bottom ('center',tempLink);
new Insertion.Bottom ('right',tempLink);
}
// inic our new beauty tool ^^)
new jAAPTT({
thumbImgPath : 'img/big/'
});
})
</script>
</head>
<body>
<div id="links_wrapper" style="width:100%;">
<div id="left" style="float:left;width:33%"></div>
<div id="center" style="float:left;width:33%"></div>
<div id="right" style="float:left;width:33%"></div>
<div style="clear:both"></div>
</div>
<!-- inner template of the tooltip -->
<div id="templates">
<textarea id="t_tooltip" style="display:none">
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
</textarea>
</div>
<!-- /templates -->
</body>
</html>
http://toxin.hu/tooltip/tooltip.html
http://toxin.hu/tooltip/tooltip.zip
majd BlackY elmagyarázza
, ill. lásd kommentek ill. http://trimpath.com/project/wiki/JavaScriptTemplates sablonmotort használtam, melóhelyre gyakorlásra, sok értelme nem volt kiszedthető, ha nem, a sablon
KÓD
<!-- inner template of the tooltip -->
<div id="templates">
<textarea id="t_tooltip" style="display:none">
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
</textarea>
</div>
<!-- /templates -->
lényegi rész
KÓD
<div id="tooltip_box">
<img src="${tooltip_img_src}" />
</div>
ezt cserélgeti a kód, IE alatt kicsit még hegeszteni kéne úgylátom, hajrá
Még sok heggeszteni való van a kódon, úgy nézem magasról tesz arra, hogy kifér-e adott irányba a teljes kép, egyszer-egyszer összehúzza a linkes diveket (hogy miért, ne kérdezd ), ésatöbbi. Amúgy 
BlackY
), ésatöbbi. Amúgy BlackY
IDÉZET
úgy nézem magasról tesz arra, hogy kifér-e adott irányba a teljes kép,
egész
KÓD
refreshToolBox : function(){...}
erről szól, de még gyerekcipő, lefe nem fog kilógni, se jobbra bár a preloader utáni pozícionálás megint xarakszik
ui: fixed, preloader megy http://toxin.hu/tooltip/tooltip.zip , egy " -el keveseebb volt a kódban mint kéne
Ez jónak tűnik, csak még egy kis optimalizálásra szorul.
Sziasztok! Lenne egy nagy problémám!!! Az a másik gond, hogy ezt valaki már kérdezte ebben a fórumban, csak nemtom hol és melyik topikban! Szóval az a kérdésem, hogy ha egy képre, vagy hivatkozásra kattintok, akkor megjelenik körülötte egy pici pontokból álló keret! És ezt javascript segítségével el lehet tüntetni, ha jól emléxem akkor vmi blur-os megoldás volt, de nemtom. Nincs vkinek ötlete? (használtam a keresőt de mindent talált csak azt nem, ami nekem kéne...)
Huh ezt én is köszönöm, mert engem is zavart bár mivel kevesebbet használom az oldal újratöltés nélküli honlapokat (szépen leírtam baazz) így mikor betöltötte újra akkor nem látszott már.
hü ez pont jókor jött
pörfikt
pörfikt
Haleee!
Melyik oldalon találhatók olyan menüsablonok hogy ha rámegyünk egy menüpontra az egérrel akkor más lesz a menüpont háttérszine???
Előre is köszi!
Melyik oldalon találhatók olyan menüsablonok hogy ha rámegyünk egy menüpontra az egérrel akkor más lesz a menüpont háttérszine???
Előre is köszi!
CSS-ben a hover esetben más háttérszínt adsz meg, vagy, ha képet akarsz cserélni, akkor: http://www.tutorial.hu/node/62
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.