photoshop és webszerkesztés - tutorial.hu

photoshop és webszerkesztés - tutorial.hu > www.tutorial.hu > Programozás

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22

BlackY

2009. Jan 15., 09:34

A probléma leegyszerűsítve a következő: a böngésző látja, hogy meg kell hívnia a checkForm-ot, azt el is indítja. A checkForm-ban ugye létrehozod az ajax objektumok, csakhogy: aszinkron! Vagyis külön szálon fut. Valahogy így:

CODE

checkForm
      |
      |-------
      v       |
    null      |
               v
            ajax oncomplete (true/false)

Tehát a checkForm-od visszatér, mivel az ajax oncomplete callback 1) akkor még nem hívodik meg és 2) semmi köze hozzá.
A lehetséges megoldások:
1)

CODE

{
method: 'post',
asynchronous: false
...

Így elveszted az aszinkronitást, vagyis a böngésző várni (és fagyni!!!) fog, amíg nem kapja vissza a választ a szervertől. Ne!

2) Kicsit átszervezed a ko'dod: a form-ra az eseményvezérlőt már javascriptből dobod rá (Event.observe($('myform'), checkForm) ), a checkForm-al innentől kezdve várod az event paramétert, így már leállíthatod az esemény kezelését az Event.stop()-al. Hogy a ko'dod szép is legyen, csinálsz még három függvényt, az egyik, amelyik szo'l a usernek, hogy gáz van, a másik, ami leszedi az eseményvezérlőt a formodro'l, és újra elpostolja, a harmadik, ami szo'l a usernek, hogy gáz van, a szerver mondjuk 60 mp-ig nem válaszolt.

Így akkor már:

CODE

checkForm : event
   Ajax indítása (siker esetén: újrasubmitolo' függvény, sikertelenség esetén: hibajelző )
   Időzítő indítása (lejáráskor az időkorlátos üzenet )
   Event megállítása

Ha mindent jo'l csináltál, akkor helyes input esetén a checkForm egyszer fog lefutni (második submit előtt leveszed ro'la az eseménykezelőt), és helyesen fog működni, bár bonyolultabban, mint ha csak egy függvény lenne. (bár egy függvénybe is meg lehet írni, de akkor is bonyolultabb

)

BlackY

lnorby

2009. Jan 15., 23:52

Köszönöm! Amint lesz rá időm, kipróbálom... de szerintem sikerülni fog.

Gyuri

2009. Jan 30., 15:51

Sziasztok!

Egy egyszerű dolgot szeretnék megoldani, de mégsem sikerül! Az alábbi kis kódnak annyi lenne a dolga, hogy egy gombnyomással minden "mukodj" id-jű dolgot eltüntessen/megjelenítsen. Miért csak az egyiket tűnteti el?

A segítséget előre is köszönöm!

CODE

<head>
<script type="text/javascript" language="JavaScript"><!--

function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
</head>

<body>
<div id="mukodj">blabla1</div>
<div id="mukodj">blabla2</div>

<a href="java script:ReverseContentDisplay('mukodj')">[show/hide]</a>

</body>

tupacko

2009. Jan 30., 18:36

Az ID, ahogy az a neveben is van egy meghatarozo parameter. Minden meghatarozott elem csakis egyedi lehet (ezert "identifikacios mezo"). Ha megfigyeled a fuggveny nevet, akkor nem is tobbesszamu: getElementById es nem getElementsById.

Nezz szet itt: http://jacksleight.com/blog/2008/01/14/getelementsby/

Sok sikert!

BlackY

2009. Jan 31., 17:41

Na, ezt jól sikerült bonyolultan megfogalmaznod

A lényeg: az id egyedi. (btw, a tagName is meghatározó, csak nem egyedileg)

Gyuri, használj vmi. JS keretrendszert, prototype-ban pl. ez ennyi lenne (ha a mukodj-ot class-nak adod meg): $('.mukodj').each(function(item) { item.toggle(); });

BlackY

tupacko

2009. Feb 1., 17:18

[off]
Megesik, gyakran szolok komplikaltan, aztan utolag magam sem ertem

BTW, ez vizsgaidoszaki artalom

[/off]

BlackY

2009. Feb 2., 08:23

[off]
Ismerem az érzést

[/off]

BlackY

Gyuri

2009. Feb 2., 10:13

Sziasztok!

Köszönöm a segítségeket!

Tupacko! Először megpróbáltam egy huszárvágással kicserélni az összes getElementById-t getElementsByClassName-re de nem jó. Néztem az oldalt, amit küldtél, de nem boldogulok vele.

BlackY! Letöltöttem ezt a Prototype scriptet, de nem tudom, hogy mi a teendő azzal a sorral, amit írtál: $('.mukodj').each(function(item) { item.toggle(); });

Hová kéne ezt beszúrni?

Bocsánat, hogy ennyire dedós módon kell elmagyarázni nekem :)

CODE

<head>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
</head>

<body>
<div class="mukodj">blabla1</div>
<div class="mukodj">blabla2</div>
<a href="IDE MIT KELL ÍRNI?">[show/hide]</a>
</body>

BlackY

2009. Feb 2., 20:52

CODE

<html>
<head>
<script type="text/javascript" src="prototype..."></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
   Event.observe($$('a.toggler')[0], 'click', function() {
       $$('div.mukodj').each(function(item) { item.toggle(); });
   });
});
</script>
</head>
<body>
<div class="mukodj">blabla1</div>
<div class="mukodj">blabla2</div>
<a href="#" class="toggler">[show/hide]</a>
</body>
</html>

BlackY

asam9

2009. Feb 3., 13:32

ez tetszik, én is kipróbáltam. mi van akkor, ha a két div-et(pl .mukodj1, .mukodj2) külön-külön szeretném eltüntetni?

BlackY

2009. Feb 3., 14:07

Az már egy kicsit trükkösebb...

CODE

<html>
<head>
<script type="text/javascript" src="prototype..."></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
   Event.observe($$('a.toggler')[0], 'click', function(event) {
       $(Event.element(event).getAttribute('rel')).toogle()
   });
});
</script>
</head>
<body>
<div class="mukodj" id="mukodj1">blabla1</div>
<div class="mukodj">blabla2</div>
<a href="#" class="toggler" rel="mukodj1">[show/hide]</a>
</body>
</html>

(rel és id, rel helyett talán inkább target-et illene használni, de az nincs xhtml-ben/html5-ben)

BlackY

asam9

2009. Feb 3., 14:38

nálam nem akar beindulni a gaz.

CODE

Event.observe(window, 'load', function() {
   Event.observe($$('a.toggler')[0], 'click', function(event) {
       $(Event.element(event).getAttribute('rel')).toggle()
   });
});

-----------

<a href="#" class="toggler" rel="mukodj1">[show/hide]</a>
<div class="mukodj1">szoveg1</div>
<a href="#" class="toggler" rel="mukodj2">[show/hide]</a>
<div class="mukodj2">szoveg2</div>

Gyuri

2009. Feb 3., 17:14

Köszönöm BlackY a megoldást!

Asam9:
Ha külön külön akarod eltűntetni, akkor ezt is használhatod:

CODE

<head>
<script type="text/javascript" language="JavaScript"><!-- 
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
</head>

<body>
<div id="mukodj1">blabla1</div>
<div id="mukodj2">blabla2</div>
<a href="java script:ReverseContentDisplay('mukodj1')">1-es [show/hide]</a>
<a href="java script:ReverseContentDisplay('mukodj2')">2-es [show/hide]</a>
</body>

asam9

2009. Feb 3., 19:19

biztos velem van a gubanc, de nálam meg se mozdul

szerk.: közben sikerült alkotni vmit, de nem elég dinamikus(mindig át kell írogatni a számokat, ha módosítjuk az elemek számát).

CODE

<!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">
<head>
<title>Reverse Content Dsiplay</title>
<script type="text/javascript">
function reverseContent1() {
        if(document.getElementById('reverse1').style.display == "none") {
        document.getElementById('reverse1').style.display = "block";
    }
    else {
        document.getElementById('reverse1').style.display = "none";
    }
}
function reverseContent2() {
        if(document.getElementById('reverse2').style.display == "none") {
        document.getElementById('reverse2').style.display = "block";
    }
    else {
        document.getElementById('reverse2').style.display = "none";
    }
}
</script>
</head>
<body>
<div><a href="#" onclick="reverseContent1()">1-es [show/hide]</a></div>
<div id="reverse1">szoveg1</div>
<div><a href="#" onclick="reverseContent2()">2-es [show/hide]</a></div>
<div id="reverse2">szoveg2</div>
</body>
</html>

asam9

2009. Feb 3., 22:04

így a "tuti":

CODE

<!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">
<head>
<title>Reverse Content Dsiplay</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.no-display {
display: none;
}
</style>
<script type="text/javascript">
function reverseContent(id) {
    if(document.getElementById('reverse'+id).style.display == "block") {
        document.getElementById('reverse'+id).style.display = "none";
    }
    else {
        document.getElementById('reverse'+id).style.display = "block";
    }
}
</script>
</head>
<body>
<div><a href="#" onclick="reverseContent(1)">1 [show/hide]</a></div>
<div id="reverse1" class="no-display">szoveg1</div>
<div><a href="#" onclick="reverseContent(2)">2 [show/hide]</a></div>
<div id="reverse2" class="no-display">szoveg2</div>
<div><a href="#" onclick="reverseContent(3)">3 [show/hide]</a></div>
<div id="reverse3" class="no-display">szoveg3</div>
<div><a href="#" onclick="reverseContent(4)">4 [show/hide]</a></div>
<div id="reverse4" class="no-display">szoveg4</div>
</body>
</html>

BlackY

2009. Feb 4., 13:58

Azt az onclick dolgot felejtsük már el!

CODE

<!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">
    <head>
        <title>Reverse Content Dsiplay</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        a {
            cursor: pointer;
        }
        </style>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript">
        Event.observe(window, 'load', function() {
            $$('div a').each(function(item) { /* Minden div-ben levő a-ra végrehajtjuk */
               if(item.getAttribute('href') == null && item == item.parentNode.firstChild) { /* Ha az a a div első gyereke */
                   Event.observe(item, 'click', function(event) { /* Beállítjuk az eseménykezelőt */
                       Event.element(event).parentNode.nextSibling.toggle();
                  });
               }
           });
        });
        </script>
    </head>
    <body>
        <div><a>1 [show/hide]</a></div><div>szoveg1</div>
        <div><a>2 [show/hide]</a></div><div>szoveg2</div>
        <div><a>3 [show/hide]</a></div><div>szoveg3</div>
        <div><a>4 [show/hide]</a></div><div>szoveg4</div>
    </body>
</html>

Így viszont figyelni kell arra, hogy ne legyen olyan anchor, ami egy div-nek az első eleme és nincs href tulajsonsága, mert akkor kattintáskor a szülőjének az első tesóját eltüntetjük...
Plusz, hogy a <div><a>..</a></div> szöveg és az eltüntetendő "tesó" között ne legyen még whitespace se, mert az idióta browser gyártók beszúrnak a DOM fába egy textnode-ot, tehát ha nem PONT úgy van, mint a fenti példában, akkor a <div>-nek az első testvére egy textnode lesz.

BlackY

asam9

2009. Feb 4., 17:52

köszi BlackY, mükszik! mi a baj az onclick-kel, ez már ennyire elavult dolog? /persze én csak örülök, hogyha nem kell a tag-en belülre rakni

/.
közben lett egy ötletem, amivel egy napig küzdöttem, de nem siekrült megoldanom, csak részben.
azt szerettem volna, hogy az eddigin felül a kód még tudja azt is, hogy CSAK egy tartalmat jelenítsen meg(ha mondjuk a 3-as tartalom van nyitva és az 1-es gombra kattintok, akkor 3-as becsuk / 1-es kinyit) ... és maradjon meg az a funkció is, hogy akár az összeset el is tudjam rejteni.
Erre ötlet?

BlackY

2009. Feb 4., 20:14

Pl. ilyesmi:

CODE

<!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">
    <head>
        <title>Reverse Content Dsiplay</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        a {
            cursor: pointer;
        }
        </style>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript">
        Event.observe(window, 'load', function() {
            $$('div a').each(function(item) { /* Minden div-ben levő a-ra végrehajtjuk */
               if(item.getAttribute('href') == null && item == item.parentNode.firstChild) { /* Ha az a a div első gyereke */
                   Event.observe(item, 'click', function(event) { /* Beállítjuk az eseménykezelőt */
                       $$('div.toggled').each(function(item) { item.hide(); });
                       Event.element(event).parentNode.nextSibling.toggle();
                  });
               }
           });
        });
        </script>
    </head>
    <body>
        <div><a>1 [show/hide]</a></div><div class="toggled">szoveg1</div>
        <div><a>2 [show/hide]</a></div><div class="toggled">szoveg2</div>
        <div><a>3 [show/hide]</a></div><div class="toggled">szoveg3</div>
        <div><a>4 [show/hide]</a></div><div class="toggled">szoveg4</div>
    </body>
</html>

Az onclickkel meg az a gáz, hogy elavult

Igazából afelé tartunk, hogy elkülönítjük a tartalmat (html, xml), a megjelenítést (css, xsl) és a működést (js).

BlackY

asam9

2009. Feb 4., 20:28

igen-igen, értelek

köszi a sok fáradozást!! erre gondoltam csak azzal a kis plusszal, hogy az aktuálisan kinyitottat vissza is lehessen csukni ... meg az alapállapot is az lenne, hogy csukva lenne az összes doboz.

lnorby

2009. Mar 12., 20:22

Sziasztok!

Éppen egy olyan BB kódos textarea szerkesztőn dolgozok, amilyen itt a Tutorial.hu-n is működik. Tehát a textarea felett van egy pár gomb (B, I, U, stb.) amikre ha rákattintok, a BB kódot a szövegmező azon pozíciójába illeszti, ahol a kurzor éppen villog. Ez működik is szépen, az egyedüli gondom az (ami itt is sincs megcsinálva rendesen), hogy ha a szöveg hosszabb, mint a textarea magassága, akkor ugye megjelenik a görgetősáv. Ilyenkor ha be akarok szúrni valamilyen kódot a szövegmezőbe, automatikusan felpozícionál a textarea az első sorához és mindig vissza kell görgetni oda, ahova beszúrtam a kódot. Ezt ki lehet valahogy küszöbölni? Mert elég idegesítő.

Gondolom azért csinálja, mert mivel új tartalmat kap, először kitörli az addigit (tehát eltűnik a görgetősáv is egy pillanatra), és csak azután írja ki az újat.

BlackY

2009. Mar 13., 10:04

A scrollTop tulajdonság állítgatásával tudod pozícionálni a textarea scrollját, de figyelj arra, hogy csak a trágya Firefox nem tud mit kezdeni vele (IE, Chrome, Opera alatt működik), és ha JavaScripttel belepiszkálsz a működésbe, az zavaró lehet.

BlackY

lnorby

2009. Mar 13., 18:04

Működik IE és Firefox alatt is... (vagyis IE 7 és FF 3.0.7 alatt próbáltam). Ennyi egyenlőre elég. Köszönöm a segítséget!

penzkeresoforum

2009. Mar 24., 16:49

Sziasztok,
Valaki megtudná mondani hogy ilyet hogy kell csinálni vagy legalább is mi a neve ennek, mert még a googlebe se tudom beírni ha nem tudom minek hívják.

Úgy néz ki mint egy input csak van mellette egy le fel nyilacska és ha számot írunk a mezőbe akkor ezzel lehet növelni csökkenteni.
Kilehet jelölni ami benne van át lehet írni stb...
Példát csak Windows-os proginál pl. a dátum beállításánál találtam.

köszönöm a válaszokat.

BlackY

2009. Mar 24., 17:33

Swingben (java-ban levő GUI rendszer) JSpinner az osztály neve, ami ilyet csinál, úgyhogy a legjobb tippem: Spinner Field.

BlackY

penzkeresoforum

2009. Mar 24., 18:41

Köszi így már találtam rá példákat, tutorialokat.
Lényegében ahogy gondoltam is egy input mező után két kis kép amire kattintunk és ahoz van a javascript ami az input mezőt értékét növeli csökkenti. Csak gondoltam van rá valami egyszerűbb megoldás is.

Achrin

2009. Apr 2., 10:54

Törölve
Tamás

BlackY

2009. Apr 2., 11:40

Nem, az alapötlet rossz

CODE

$string .= "<input type=\"button\" value=\"Töröl\" title=\"" . $id . "\"/>";

(Kiszeded az onclick-et, úgyse ér semmit

)

Amikor megkapod, akkor: (ez a kód most PrototypeJS, de a lényeg látható, ha meg nem, ott vannak a kommentek)

CODE

var div = $$('#responseDiv'); /* Lényegtelen hogy mi, de legyen egyértelmű CSS selectora a divnek/elemnek, amibe pakolsz */
div.innerHTML = response; /* A response változóban van a szervertől kapott HTML kód */
$$('#responseDiv input').each( /* Végigrohanunk a responseDiv-en belüli input elemeket */
    function( item ) {
        Event.observe(item, 'click', function() { /* És beállítunk click-re egy eseményfigyelőt */
             xajax_vizsg_torol(parseInt(this.getAttribute(title)); /* És az onclick eseménykezelőben meghívjuk a xajax függvény */
        }.bindAsEventListener(item));
    }
);

Tehát a lényeg: amikor bekerültek a DOM-ba az input mezők UTÁNA pakolod rájuk az eseménykezelőket.

Edit: Ezért írtam ennyit?

BlackY

lnorby

2009. Apr 2., 22:35

Hello!

Van egy kis gondom. Dinamikus select-ek értékét szeretném JS-el kiolvastatni, de az istenért nem megy. Pedig PHP-vel olyan egyszerű ezeket kezelni. A lényeg:

CODE

<select name="language[]">
     <option value="0">...</option>
     ...
</select>
<select name="language[]">
     <option value="0">...</option>
     ...
</select>
<select name="language[]">
     <option value="0">...</option>
     ...
</select>
...

A nevük tömbként van tárolva (mert akármennyi lehet belőlük). Hogy tudok rajtuk egyesével végigszaladni és kiolvasni mindegyiknek az értékét? Próbáltam a document.myForm.elements['language[]'].length -el megtudni hogy egyáltalán hány darab van, hogy egy ciklust rá tudjak indítani, de ha csak 1 select van, akkor annak az option-jeinek számával tér vissza. Ha több van akkor végülis működik. A kód:

CODE

langnum=document.myForm.elements['language[]'].length;
for (i=0; i<langnum; i++)
{
alert(document.myForm.elements['language[]'][i].value);
}

Hogy lehet kiküszöbölni ezt a kis hibát?

BlackY

2009. Apr 3., 17:44

CODE

<html>
    <head>
        <title>AsdAsd</title>
        <script type="text/javascript">
        var valueOfSelect = function(SelectField) {
           return SelectField.options[SelectField.selectedIndex].getAttribute('value'); /* childNodes[SelectField.selectedIndex].getAttribute('value'); */
        }
        window.onload = function() {
            document.getElementById('button').onclick = function() {
                alert(valueOfSelect(document.getElementById('asdasd')));
            }
        }
        </script>
    </head>
    <body>
        <select name="asdasd" id="asdasd">
            <option value="Egy">1</option>
            <option value="Kettő">2</option>
            <option value="Három">3</option>
        </select>
        <button id="button">Próbáljuk ki!</button>
    </body>
</html>

BlackY
ui.: És használj id-eket és szabvány DOM cuccokat (getElementById, getElementsByTagName)

balazska2

2009. Apr 18., 18:52

Nekem egy egyszerű szavazást kellene betennem a honlapomba. De sajnos nem találtam semmit amibe belenyúlhatnék. Nem tudna nekem valaki egy linket küldeni ide, vagy a gybalazska2@gmail.com -ra ahol egy rendes szavazást lehet összeállítani?

BlackY

2009. Apr 19., 01:29

Javascriptben? Abban senki.

BlackY

lnorby

2009. Apr 29., 23:08

Hello!

BlackY köszönöm az előző segítségedet! Végül máshogy oldódott meg a dolog.

Ha valakinek van valami szkriptje az alábbi problémához, vagy gyorsan össze tud dobni egyet, azt nagyon megköszönném:
Olyanra lenne szükségem, ami egy a felhasználó által beírt dátumot (formátum: yyyy.mm.dd vagy yyyy.mm.dd hh:ii:ss) és a jelenlegi dátumot összehasonlítja. Úgy kellene hogy működjön, hogy ha csak a dátumot adja meg a felhasználó (és az időt nem), akkor csak azt nézni hogy a mai napnál később van-e az a dátum. Viszont ha a felhasználó megadja az időt is akkor azt is kellene figyelni, hogy a mai napon belül annál az időpontnál később van-e. Nagy segítség lenne. Nem igazán szeretem a JS-t. Lehet hogy csak azért, mert még nem volt időm igazán belemerülni.

Köszönöm!

BlackY

2009. Apr 30., 07:11

A Data.parse() lesz a barátod (na meg a Google

)

BlackY

LeGaS

2009. May 8., 16:03

Milyen könyvet / ebookot / weboldalt tudnátok javasolni gyors JavaScript talpalásként? Úgy alapvetően tudom használni, illetve leginkább jQuery-vel szórakozom, csak ettől függetlenül most szükségem lenne arra, hogy megismerjem jobban a nyelvet.

Előre is kösz!

lnorby

2009. May 10., 16:46

QUOTE(BlackY @ 2009. Apr 30., 08:11)

A Data.parse() lesz a barátod (na meg a Google

)

BlackY

Köszi! Azt tudtam hogy azzel kell szórakoznom, csak nem jöttem rá hogy. De megoldódott. Valamilyen lehetőség van object elemre onclick eseményt rakni, úgy hogy ie is értse? Pontosabban egy flash animációra akarok html-lel hivatkozást rakni, de az <a href="..."><object>...</object></a> nem mükszik.

BlackY

2009. May 10., 20:49

Ráraksz egy átlátszó divet (pl. tfh, az objected 320*240-es: <object></object><div style="margin-top: -240px; width: 320px; height: 240px;"><a style="width: 320px; height: 240px;">..</a></div>)

Csakhogy:
1) Alapból nem értem, hogy flash objectet miért akarnál "kitakarni" és eltüntetni minden interakciót belőle
2) Ez nagyon csúnya hack
+1) Alapból miért használsz flash-t

BlackY

lnorby

2009. May 10., 22:00

Azért mert bannerekről van szó, és a google analitika nem mutatja a kattintások számát olyan hivatkozásoknál, amik a weboldalon kívülre mutatnak. Ezért egy weboldalon belüli php-ra akarom ugratni a flash-eket, ami majd header-rel továbbküld a megadott linkre. Így a google mutatni fogja a kattintások számát... Köszi a tippet! Én is erre gondoltam, de csak végső elkeseredésemben akartam használni, mert tényleg elég ronda megoldás.

Monique

2009. May 27., 16:36

Sziasztok, egy kérdésem lenne, ha Ajax tanfolyamra szeretnék menni, ahhoz szükséges a Javascript előképzettség?

Köszönöm, Monique

BlackY

2009. May 27., 18:47

Szvsz. nem árt, de tanfolyama válogatja

BlackY

Anybudi

2009. May 31., 11:55

LeGaS: Ha jól megy az angol, Douglas Crockford-nak van egy 4 részes előadássorozata a Javascriptről, amit szerintem érdemes lenne megnézned: http://video.yahoo.com/watch/111593/1710507

lnorby

2009. Jun 19., 20:50

Hello!

Saját fejlesztésű lightbox-on dolgozok és van egy kis gondom. A lightbox konténer div-én belül van egy <img> tag-em, aminek az 'src' attribútuma üres. Amikor rákattintok egy linkre, amin a rel="lightbox" attribútum be van állítva akkor az meghív egy olyan szkriptet, ami megjeleníti a lightbox-ot. A szkripttel figyelem hogy a sender-nek mi a 'href' attribútuma és a lightbox div-en belüli képnek átadom azt az url-t. Ekkor jönne a lightbox méretezése, de az a baj, hogy a kép méreteit nem tudom kinyerni. Próbálkoztam offsetWidth és offsetHeight-ekkel, myImage=new Image(), myImage.url=sender.url és myImage.width, myImage.height, stb. de nem akar összejönni. A myImage.onload után egy belső funkcióval már alert-el kiíratva megkapom a méreteket, de azt nem tudom hogy azokat hogy lehet globálissá tenni.

Remélem érthetően fogalmaztam.

BlackY

2009. Jun 19., 22:02

A rel=lightbox linkre kattintás hívjon meg eseményfigyelőt, ami elkezdi betöltetni a képet (new Image()), és ráköt egy újabb eseménykezelőt az új kép onload tulajdonságára. Aztán az onload függvénybe bepakolsz mindent, ami most a linkre kattintásos függvényben vagy, és máris jó vagy.

edit.: Így még a böngésző cache miatt az sincs, hogy már megjelent a lightbox és várni kell a képre...

BlackY

lnorby

2009. Jun 19., 22:34

És olyankor mi van, ha másik függvényt akarok meghívni az onload eseményre (lightboxImage.onload = function() { resizeLightBox() }; )? Ebben az esetben a másik függvényből hogy tudok hivatkozni a lightboxImage nevű képre és méreteire?

Azért tárolom külön függvényben a méretezőt, mert ha az ablakot méretezik, a lightbox méretének is változnia kell. Tehát egy Event.observe-t kell raknom a window resize-ra is, ami csak meghívja a méretező függvényt és tökéletesen müxik.

BlackY

2009. Jun 20., 08:20

Globálissá teszed egy saját "névtérben":

CODE

var LightBox = {
     image : null, /* változó */
     akarmi : 0,
     asdasd : "foobar",
     /* többi függvényed ha kellenek */
};

Ez ugye ekkor a window egy tulajdonsága lesz, és globálisan elérheted a (window.)LightBox.image hívással (függően attól, hogy az adott függvény éppen milyen környezetben fut) azt a tagváltozót.

pl.:

CODE

window.onload = function() {
alert(LightBox.akarmi); /* Itt nem kell a window */
}

CODE

Event.observe(window, 'load', function() {
alert(window.LightBox.akarmi)
}.bindAsEventListener(valamilyenObjektumAmiNemAWindow);

(Vagy ami még szebb megoldás: az összes eseményfigyelődet úgy csatolod fel, hogy előbb rádobsz egy bindAsEventListener(LightBox) hívást, és akkor kapásból írhatod az image, akarmi stb.-t

)

BlackY

lnorby

2009. Jun 20., 13:58

Köszönöm szépen! Összejött a dolog.

lnorby

2009. Jun 20., 19:17

Egy olyan kérdésem lenne még, hogy egy <a> elemnek ha be van állítva href tulajdonsága, akkor azt hogy lehet megcsinálni hogy ne ugorjon el arra linkre? Mert úgy akarom kivitelezni a lightbox-ot, hogy figyelje a képhez tartozó hivatkozás url-jét (onnan veszi ki hogy hol van az eredeti kép), de még a window.onload-nál az összes <a> onclick eseményéhez berakom a showLightBox() függvény meghívását. A probléma csak az, hogy ha rákattintok valamelyik linkre (vagyis képre), akkor automatikusan elugrik a nagyképhez, nem a lightbox-ot jeleníti meg. Onclick-nél return false-t próbáltam, de az se megy, csak abban az esetben ha egy sima linken próbálom, ami nem hív meg semmilyen függvényt.

BlackY

2009. Jun 20., 23:01

Az Event.observe-ből gondolom, hogy prototype-ot használsz, akkor:

CODE

Event.observe(item, 'event', function(eventObj) {
/* ... */
Event.stop(eventObj); /* <- ez megállítja az esemény feldolgozásást, tehát a többi rákötött esemény nem fog lefutni, így a "browser default" sem. */
});

Egyébként a return false is stimmel, [nem 100%-os biztonsággal állítom]csak a a prototype egy burkolót is pakol valahogy az eseménykezelők köré, amiből nem tudsz visszatérni.[/nem 100%-os biztonsággal állítom]

BlackY
ui.: Miért nincs ilyen BBCode tag?

lnorby

2009. Jun 21., 17:28

Sikerült, elkészültem a lightbox-al! És nem is lett olyan béna... Köszönöm a segítséget BlackY!

Killroy

2009. Jul 13., 10:04

Sziasztok!

Egy olyan javascriptet szeretnék írni amely visszaszámol egy adott dátumig.
Tehát azt mondom hogy mondjuk a határidő az 2009 augusztus 31-ig akkor kiírja hogy hány másodperc, perc, óra, nap van hátra.
Ezt szövegesen sikeresen meg is oldottam, de én egy grafikus, ún "flipping timer" szeretnék.

az alábbiakban megadom a kódomat, melyet eddig összehegesztettem. Van ugye egy countdown függvényem amely visszaszámlál a fentieknek megfelelően, szövegesen és van egy
animation függvényem, amely megcsinálja a "flip" animációt.

Countdown:

CODE

<head>

<style type="text/css">

    #timer div {
        height: 53px;
        float: left;
        margin-right: 10px;
    }

    #timer div span {
        background-image: url(counter.png);
        display: block;
        width: 34px;
        height: 53px;
        float: left;
        margin-right: 5px;
    }

    #timer div span#s1 {
        background-position: left -1431px;
    }
    #timer div span#s2 {
        background-position: left 0px;
    }

    #timer div span#m1 {
        background-position: left -1431px;
    }
    #timer div span#m2 {
        background-position: left 0px;
    }

    #timer div span#h1 {
        background-position: left -1431px;
    }
    #timer div span#h2 {
        background-position: left 0px;
    }

</style>

<script type="text/javascript">
function Countdown() {

        today  = new Date();
        todayEpoch  = today.getTime();

        target = new Date("31 August, 2009");
        targetEpoch = target.getTime();

        var hatralevoIdoMasodpercben = Math.floor((targetEpoch - todayEpoch) / 1000);

        var hatralevoNapok = Math.floor((hatralevoIdoMasodpercben / (60*60*24)));
        hatralevoIdoMasodpercben = hatralevoIdoMasodpercben - (hatralevoNapok*60*60*24);

        var hatralevoOrak = Math.floor((hatralevoIdoMasodpercben / (60*60)));
        hatralevoIdoMasodpercben = hatralevoIdoMasodpercben - (hatralevoOrak*60*60);

        var hatralevoPercek = Math.floor((hatralevoIdoMasodpercben / 60));
        hatralevoIdoMasodpercben = hatralevoIdoMasodpercben - (hatralevoPercek*60);

        var hatralevoMasodpercek = hatralevoIdoMasodpercben;

        document.getElementById('timer').innerHTML = hatralevoNapok + ' nap, ' + hatralevoOrak + ' óra, ' + hatralevoPercek + ' perc, ' + hatralevoMasodpercek + ' másodperc, ';
        //setTimeout('Animation()', 1000);
        setTimeout('Countdown()', 500);


    }
</script>
</head>
<body onload="Countdown()">

    <div id="timer">

        <div id="days">
            <span id="d1"></span>
            <span id="d2"></span>
        </div>

        <div ="hours">
            <span id="h1"></span>
            <span id="h2"></span>
        </div>

        <div id="minutes">
            <span id="m1"></span>
            <span id="m2"></span>
        </div>

        <div id="seconds">
            <span id="s1"></span>
            <span id="s2"></span>
        </div>

    </div>

</body>

És az animációs függvény, amely setTimeout-tal meghívja saját magát bizonyos időközönként

CODE

a kép amely a grafikus számokat tartalmazza illetve a "frame"-eket pedig itt található:

Ötleteket várok arra, hogy hogyan hözzam össze a grafikus számláló értékeit a képpel, hogy egy szép flipping timert kapjak.

Előre is köszönöm!

tupacko

2009. Jul 13., 20:24

En ugy csinalnam, hogy keszitenek GIFeket az animacioval, pl. 0 -> 1, 1 -> 2, majd ezt kovetoen minden masodpercben cserelnem a kepeket, 1.gif, 2.gif, stb.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.