Kategória: JavaScript Jquery

Responsive weboldal, azaz a megjelenés illeszkedik a kijelző méretéhez, első oldalam.

Az utóbbi másfél évben rohamosan terjednek el a Tablet-ek, Okostelefonok, amíg 2-3 évvel ezelőtt a Laptop volt a menő eszköz ma már hála Steve Jobs-nak és sok ügyes termékfejlesztőnek minden háztartásban jelen van egy Okostelefon vagy Tablet. Ezen eszközöknek köszönhetően, már egyre kevesebbet kapcsoljuk be otthoni számítógépünket is. A mobilinternet széleskörű elterjedés és a sok ingyenes Wifi pont által, szinte bárhonnan tudunk ezekkel az eszközökkel a neten böngészni.

Mint PHP programozó, webfejlsztő látva a technikai újdonságok gyors elterjedését szerény véleményem szerint, ha valaki egy weboldalt szertne készítettni akar annak már gondolnia kell az új eszközökre is. Most írathatnánk Windows, Android, IOS App-ot ezen eszközökre, de első körben szerintem felesleges pénzkidobás lenne. Egy profibb weboldal ezen eszközökön is simán elfut.

Aki nem akar lemaradni és ezzel versenyhátrányba kerülni, annak mindenképpen érdemes – főleg ha a meglévő oldal átalakításán vagy új weboldal készítésén – gondolkodik, akár egy kicsivel nagyobb költségkeretet, vagy egyes funkciók elhagyásának kárára olyan weboldalt készíteni, ami remekül elfut a jelenlegi technika új eszközein is.

Ezen felbuzdulva próba képpen, egy olyan HTML + Javascript keretrendszert kezdtem el használni, ami valamiféle útmutatást és eszköztárat ad arra, hogyan érdemes felépíteni egy ilyen weboldalt. Az első és leglátványosabb ilyen munkám, a saját tulajdonú online képeslapküldő rendszer a http://happybon.eu lett. Ezen az oldalon a Bootstrap keretrendszerben rejlő megoldásokat használtam kis átszínezéssel és így egy könnyen használható, egyedi, okostelefonról és tabletről is működő képeslap küldő rendszert sikerült összeraknom. Pár kattintással, akár ebéd közben a telefont nyomkodva 1 perc alatt egy egyedi ajándékkal tudod meglepni ismerősödet.

jQuerytools Scrollable és Fancybox Galéria

A jquerytools.org egy a legfontosabb építő elemként tünteti fel magát a modern weboldalak működéséhez. Ennek a gyűjteménynek van egy úgynevezett scrollable eszköze, amely divek görgetését hivatott elvégezni, horizontális vertikális irányban, illetve a jquerytools további eszközeivel egyéb érdekes megoldások elkészítésére is alkalmas. Egy projektemben azonban ezt a görgető elemet kellett összehoznom, a Fancybox Galériával.

Az alapfeltevés, hogy a scrollable-ben a diveket egyesével szeretnénk mozgatni jobbra illetve balra és mindezt automatikusan körbe azaz circular paramétert true-ra állítva. Mivel egyszerre egy divet és nem egy teljes nézetet(3-4 divet ami egyszerre látszik) szeretnénk mozgatni ezért a weben található clone módszerrel oldjuk ezt meg: “jQuerytools Scrollable és Fancybox Galéria” Tovább olvasása

Fancybox Galéria a tag onclick

Mostanság egyre több és több helyen látom a Fancybox felugró ablakának galériás változatát. Aki használja az tudja, hogyan lehet ezt beállítani és működtetni. Arra azonban kevés példát sőt igazából egyet sem láttam, hogyan indítsuk el galériánkat egy kattintásra. Igazából aki jQuery alapokon dolgozik annak egyértelmű lehet. Én sajnos még csak nem rég óta foglalkozom vele és nem igazán találtam megoldást a problémámra, pedig egyszerűbb mint gondolnám. A lényeg abban rejlik, hogy egy onclick eseményre lefuttatunk egy click trigert a galériánk első elemére, így: “Fancybox Galéria a tag onclick” Tovább olvasása

Saját jquery függvényünk elkészítése és meghívása

Weboldal fejlesztés közben, szükségünk lehet egyedi magunk által fejlesztett akár paraméterrel is rendelkező jquery függvényre. Számtalan helyen le van írva,  hogy ha egy click esemény történik akkor, hogyan lehet azt elkapni, és ekkor a kért módosításokat elvégezni, ez mind szép és jó, de ha egy weboldalt generálunk, ahol nem tudjuk előre hány elem és milyen id-vel class-al fog szerepelni, és ezt előre meghatározni nehéz szinte lehetetlen, ekkor én paraméterrel rendelkező függvényt szoktam meghívni ami elvégzi azokat a módosításokat ellenőrzéseket amik szükségesek.

Hogyan néz ki egy paraméterrel rendelkező saját magunk által írt jquery függvény?

Az alábbi példa válasz a fenti kérdésre :

jQuery.fn.fShowElement = function(cid){
if($("#elementid_"+String(cid)).is(':hidden')){
var i = 0;
while($("#elementid_"+String(++i)).length > 0){
$("#elementid_"+String(i)).hide();
}
$("#elementid_"+String(cid)).show();
}
};

A fenti kód annyit csinál, hogy végigfut az oldalon és a #elemntid_1-től amíg létezik az összes ilyen div css display tulajdonságát none-ra állatja majd, a paraméterben kapottat megjeleníti.

Most már van egy függvényünk, ami csinál is valamit, nah de mikor hívjuk meg? Mi azt szeretnénk, hogy ha ez a paraméterrel rendelkező függvény egy bizonyos div-en történő kattintáskor hívódjon meg. Egy bizonyos ez kicsit téves megfogalmazás, ugyanis sejtésünk sincs arra vonatkozóan, hogy a jövőben mindig csak a 3. elem esetén fusson le a függvényünk. Viszont azt tudjuk az oldal generáláskor, hogy ha erre a div-re kattint akkor függvényünket milyen paraméterrel kell meghívni. Így az elemnek definiáljuk az onclick eseményét és hogy mit kell meghívni, ezt a HTML tag onlick eseményében az alábbi módon tehetjük:

onclick="$(this).fShowElement(1);"

Ezzel, egy HTML tag onclick eseményénél megadtuk, hogy hogyan kell meghívni  a saját paraméterrel rendelkező jquery-s függvényünket.

Egyszerűnek tűnik, én is azt gondoltam de több napomba került mire kisilabizáltam, hogyan is kell ezt megvalósítani, mivel szinte sehol sincs leírva ez a hasznos információ.