JavaScript

Statikus oldal lapozása görgetéssel

A félreértések elkerülése végett, nem arról lesz szó, hogyan tölthetsz be új tartalmat görgetéssel, hanem egy statikus weblap egyes részei között válthatsz úgy, mintha azok önálló oldalak lennének.

Megjegyzem, nem biztos, hogy én vagyok a legalkalmasabb ember ennek a témának a kitárgyalására, de minden esetre egy, a mai böngészőkben működő megoldást részletesen bemutatok és a tőlem telhető módon általánosan is beszélek a témáról.

Akit csak a végeredmény érdekel mindenféle rizsa nélkül, kattintson a tartalomjegyzékben a "Csak a végső kód" linkre.

Megosztás/Mentés

Javascript, mind kijelöl funkció. Határok nélkül.

Írtam én már erről korábban ( Link ), de abban a cikkben írt megoldásban elég korlátozottak voltak a lehetőségek. Most mutatok egy okosabb megoldást külső könyvtár nélkül, majd egy tényleg tuti megoldást jQuery használatával. Lássuk!

Megosztás/Mentés

HTML lista újrarendezése javascripttel

ScreenShot

Szép ez a kép itt bal oldalt. Nemde? Talán nem, de nem is az a lényeg, hanem a funkció. Lehet nem tűnik értelmesnek egy html listában az elemeket össze vissza mozgatni. De ha például ezekben a listákban egy űrlap szövegmezői vannak, amiknek számít a sorrendje ( tömbös megvalósítás ), akkor máris értelmét nyeri. De most a cikkben a mozgatás megvalósítására fogok koncentrálni.

JavaScript DOM manipuláló metódusokkal lehet mozgatni különböző csomópontokat szinte bárhova. De arra, hogy több lista elemet két irányba is mozgathatóvá tegyünk, két lehetőség adódna.

  • Egy függvényt írunk, ami paraméterként kapja meg a mozgatandó elem azonosítóját és a mozgási irányokat.
  • Módosítjuk HTMLLIElement osztályt. Konkrétan felveszünk moveUp() és moveDown() metódusokat a html "li" elemekhez.
Osztalyneve.prototype.fuggveny = function()
{
     //ide a műveletek
}

Én az utóbbit választottam. Előnye, hogy onnantól kezdve bármilyen lista elemet az adott listában könnyedén egy metódushívással eggyel lejjebb, vagy feljebb lehet mozgatni. A megoldásomban csak 1 lépést, de módosítható volna, hogy paraméterként átadható legyen a lépések száma. Ezt már az olvasóra bízom. Többszöri hívással is előidézhető ugyanez.

Megosztás/Mentés

HTML blink felváltása okosabb javascripttel

Kék lámpa

A blink html tag-gel lehetne villogtatni egy szöveget, de igazából csak firefox-ban működik. És csak a láthatóságot kapcsolta be illetve ki időközönként. Mint mindenre, erre is lehet manapság rengeteg megoldást találni a neten javascripttel. Írtam egyet én is, ami gyakorlatilag bármilyen CSS tulajdonságát képes váltogatni a kiválasztott elemnek. Lehet id és osztály alapján kiválasztani az elemeket. Ezen kívül, ha osztálynév alapján lett megjelölve a villogtatandó tartalom, lehet szűkíteni az elemek listáját egy adott csomópont elemeire. ID ugyebár egy oldalon egyedi kell legyen, így ott nem is lenne sok értelme csomópontra korlátozni. Illetve egy elemre több különböző "blink" is alkalmazható. Majd le is állíthatók.


Megosztás/Mentés

Dinamikus select lista javascripttel

Sok oldalon látni olyan lenyíló listákat, aminek azonnal megváltozik a tartalma, amint egy másik listában kiválasztunk valamit. Erre mutatok egy példát, és közben kitérek kapcsolódó témákra is.

Legyen a példa egy igen mesterkélt probléma. Adott egy select lista, amiben számok vannak 1-től 10-ig. Ha ebben kiválasztunk egy számot, akkor a második select listában jelenjenek meg a kiválasztott szám többszörösei maximum 20-ig. Ugyebár adja magát az első lépés. Kell az első select html kódja. Minden select-nek kell egy id, hogy lehessen rá hivatkozni majd javascript-ből. Nevet is lehet neki adni, ha netán szerver oldalon szeretnénk feldolgozni majd az űrlap elküldése után az eredményt. Amire azért igen nagy az esély.

Megosztás/Mentés

Javascript visszaszámláló - Napi sorsoló

Ebben a cikkben bemutatom, hogyan lehet olyan idő visszaszámláló szkriptet írni, ami minden nap egy konkrét időpontig számol vissza, de ez az időpont lehet a másnap reggeli időpont is akár. Ehhez figyelembe kell venni a szerveridőt is, másképp a kliens ( talán hibás ) órájára lenne bízva, hogy mikor van vége a visszaszámlálásnak. Persze a visszaszámlálásnak akkor van értelme, ha a végén valami történik is. Így szerveroldalon PHP-ból gondoskodni kell arról is, hogy például lefusson egy sorsoló program, ami aztán az eredményeket megjeleníti. Ezt vagy Crontab időzítővel, ha a tárhelyen rendelkezésre áll, vagy eltárolva például adatbázisban, hogy aznap lefutott-e már a sorsolás, és ha még nem, de az idő már lejárt, akkor fusson le. És írja ki az eredményt. Persze a következő sorsolásig a visszaszámlálás már elindul. Ennek megvalósítását mindenkinek magára bízom. Én csak a számlálást mutatom be.

Megosztás/Mentés

JavaScript, mind kijelöl funkció

Tegyük fel, Sok sok pici checkbox van a weboldalon. Például kijelölhetők a törlendő üzenetek. De fárasztó egyenként kattintgatni. JavaScripttel egyszerre kijelölhető akár mind is.
A következőkben erre mutatok megoldást, illetve egy kipróbálható demót is.


Induljunk ki a következő html forrásból:

<div id="checkall1">
        Első sor:<br />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />

</div>
<div id="checkall2">
        Második sor:<br />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
</div>

Két csoport checkbox van. Mindkettő egy div-ben, aminek egyedi id-je van. Így lehet csak az egyik, vagy másik csoportra hivatkozni, ha egyszerre több "Mind kijelöl" funkcióra is szükség van egy oldalon. Lehetne persze class-okat adni az inputoknak, vagy a nevet megadni tömbként stb stb... De ez a legtisztább megoldás szerintem.

Kellene most két újabb checkbox, vagy akár gomb, amire kattintva változik a többi jelölőnégyzet állapota. Ebben a példában ezt a funkciót is egy checkbox tölti be. Mérete is kisebb, és könnyebb ellenőrizni, hogy mire kell váltani az állapotokat.

<input type="checkbox" onclick="checkAll(this, 'checkall1');" /> Első sor kijelölése<br />
<input type="checkbox" onclick="checkAll(this,'checkall2');" /> Második sor kijelölése

Az onclick eseményben található checkAll függvény felel a jelölések változtatásáért. Első paramétere mindig a this. Így a függvényben kattintás után elérhető az input mező objektuma, és lekérdezhető annak a checked tulajdonsága, ami megadja, ki van-e jelölve az adott checkbox. Második paraméter pedig annak a tároló elemnek az azonosítója, amiben a jelölendő checkboxok vannak.

Már csak függvényt kell megírni.
Legyen ez például a checkall.js nevű fájl. Annak tartalma pedig a következő:

function checkAll(chbx,id)
{
        var checked = chbx.checked;
        var container = document.getElementById(id);
        if (!container) return;

        var inputs = container.getElementsByTagName('input');
        for (var i in inputs)
        {
                if (inputs[i].type != 'checkbox') continue;
                inputs[i].checked = checked;
        }
}

Ebben, ha hibás azonosítót kapott a checkAll függvény, nem történik semmi. De ha megtalálta a tároló elemet az azonosítóval, akkor lekérdezi az összes input elemet belőle egy tömbbe. Ez után már csak egy ciklus kell, amiben az összes checkbox típusú input mező checked tulajdonságát beállítjuk ugyanarra, amilyen a kapcsolgató checkboxunké.

Kitérő:
A for-in ciklus hasonló a PHP-ben ismert foreach-hez. Az in után álló tömb összes indexét egymás után betölti az in előtt álló változóba. Így nem kell lekérdezni hány eleme van a tömbnek. És azt sem kell tudni, milyen indexek vannak benne.

Megosztás/Mentés