Keresés

Új hozzászólás Aktív témák

  • fordfairlane

    veterán

    válasz adam_ #3168 üzenetére

    Nincs kedvem átnézni az egészet, hogy az ősrégi jQuery libhez passzoljon...

    Az 1.9-es jQuerynél azért van már egy-két dolog, API hívás, ami a korábbi verziókban benne volt, majd később kikerült, szóval tesztelni kell. Én azt javaslom, hogy egyszerre csak egy alverziónyit updateljetek, és utána teszteljétek. (1.4-ről 1.5.x-re, ha minden oké, mehet az 1.6.x és így tovább). Persze lehet egyből a legfrissebb jQuery verzióra ugrani, csak az több buktatót rejthet magában.

  • Sk8erPeter

    nagyúr

    válasz adam_ #3165 üzenetére

    "kollégám szerint nem lehet Bootstrapet használni, mert alapból Foundationnal dolgozunk Drupal alatt"
    Hát nyilván ne legyen mindkettő, ez tök érthető, vagy egyik vagy másik.
    De ezek szerint ott van a Foundation! Akkor mi a frászért nem használjátok? Tényleg nem értem:
    http://foundation.zurb.com/docs/components/topbar.html
    Még modális ablakokra is van lehetőség a Foundationnel:
    http://foundation.zurb.com/docs/components/reveal.html
    Ebben pedig szépen meg tudnátok jeleníteni a login-űrlapot.
    Ha meg ez nem jön be, akkor jelenítsétek meg máshol... de ne úgy, hogy kitakarja a menü...

    "Abból viszont nem tetszik neki a beépített nav funkció"
    :W :O És mi nem tetszik rajta neki? :DDD
    Ez amúgy azért elég vicces, ehelyett elkezdtetek vadul tákolni, hogy azért mégis csak pótoljátok valahogy. De nem működik, ezért aztán megéri ezen napokat tökölni, ahelyett, hogy ízlésetek szerint ÁTSZABNÁTOK az alapértelmezett megjelenést, ahogy az erre építő theme-ek/template-ek is teszik.... :) De most tényleg, basszus, egy mobile-first frontend frameworköt használtok, és most komolyan azon tököltök már nem tudom, mióta, hogy hogyan csináljátok meg a top navigation bart, és hogy hogyan kéne vaklahogy azt összetákolni, hogy tényleg reszponzív legyen a dolog? :O Akkor miért nem kukázzátok ilyen alapon az egész frontend frameworköt, ha épp azt az előnyét nem használjátok ki, ami rengeteg időt megspórol nektek? Konkrétan többek közt ilyen feladatok megvalósítására való, épp ezt a melót spórolja meg a fejlesztőknek. Ne csináljátok már...
    Valószínűleg már réges-régen kész lennétek az egésszel, ha a kollégádnak nem lennének ilyen rettentően kompetens meglátásai.

    A (#3166)-ban feltett kérdésedre meg azért nem tudok válaszolni, mert nekem káoszos ebben a formában, hogy itt-ott beégeted a kódba egy-egy style-attribútumban, hogy display:none;, máshol beégeted, hogy display:block;, és ha előhívom a fejlesztői panelt, akkor egyes elemeknél össze-vissza lesznek ezek (pl. a Login menüpont kapott egy display:none-t, mikor a többiek nem, ennek sincs semmi értelme) ahelyett, hogy ezekre is osztályokat használnál, pl. a .hidden vonatkozhatna azokra az elemekre, amiket elrejtettél, és így tovább... Szóval most azt éreztem, hogy túl sok időbe kerülne kibogozni. Nem véletlen az a szabály, hogy kódokat nem kutyulunk. Így "nyers" HTML-kódba nem sűrítünk bele CSS-kódot style-attribútumok formájában, JavaScript-kódot sem erőszakolunk bele onclick és egyéb ehhez hasonló attribútumok formájában, ugyanígy JavaScript-kódba nem erőszakolunk bele CSS-kódot (csak ha nagyon muszáj), legfeljebb osztályokat, amiket váltogatunk, és így tovább.

    Egyébként ne em-egységeket írogassatok, tök felesleges, hanem nyugodtan használjátok a pixelt:
    http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css/11803273#11803273

    Ezenkívül <br />-t se használj, egy tisztességesen megszerkesztett Word-dokumentumban sem Entereket püffölünk a térköz beállításához (a <br />-ek használata pedig pontosan ugyanilyen).

  • adam_

    senior tag

    válasz adam_ #3165 üzenetére

    Legújabb fiddle. Ebben már szépen megy amit szeretnék, viszont ezt még nem sikerült megoldanom:

    'A másik, pedig, hogy a kis display méret melett rákattintok a trigger ikonokra, akkor nagy display méret mellett eltünik az egész nav, ez miért van?'

  • Sk8erPeter

    nagyúr

    válasz adam_ #3155 üzenetére

    "Kollégám szerint egyenlőre felesleges frissíteni Drupal alatt a JQuery-t, mert az on() felhasználásán kívül jelenleg nem nyerünk vele sokat.."
    Az igen... és ő egyáltalán webfejlesztő? Remélem, veled nem sikerült ezt elhitetnie.
    Csupán például nem egy ősrégi elavult jQuery-t használnátok, így az újabb jQuery-k valamelyikének előnyeit ki tudnátok használni, tudnátok olyan modulokat használni, amik az újabb jQuery-ket igénylik (vannak olyan modulok/sminkek, amik ezt kifejezetten megkövetelik), tudtok több jQuery-változatból is választani a modul beállításai között, soroljam még? :) A kollégádnak tehát egy kissé inkompetens véleményt sikerült megfogalmaznia.

    A többit akkor most átugrom, mert azóta elég sok hsz.-ed volt, úgy tűnik, továbbjutottál a dologban.

    (#3161):
    "[link] Elvileg elkészült, ilyet szerettem volna elérni."
    Ebben a példában rohadt zavaró, hogy ha előhozom a menüt, akkor ugyanoda újbóli kattintásra nem tűnik el, hanem kötelező valami elemet választanom, különben nem hajlandó eltűnni. Vagy a zöld hátterű divre kell kattintanom, ekkor viszont a bejelentkező űrlap ugrik elő, pedig én nem ezt akartam. Ha ez tényleg ilyen a végleges felületen is, számítsatok rá, hogy anyázni fognak a felhasználóitok.
    Aztán ha rákattintok a Login menüpontra, az előugró űrlapot továbbra sem tudom semmivel sem bezárni. Csak akkor, ha rákattintok a menüt előhozó lenyílóra, akkor hirtelen eltűnik az űrlap, de akkor meg nem értem, mi a frászért teszi ezt, mert ugye nem kéne, senki nem kérte, hogy tűnjön el.

    Lehet, hogy közben ezekre rájöttél, annyit írtál, hogy már kicsit elvesztem az információtengerben, meg hogy most hol is tartasz, de majd biztos megírod. :D
    Ilyenek miatt amúgy nem értem, miért nem használtok egy jó kiindulási alapot, valami olyasmit, mint a Bootstrap (Drupal-smink is van hozzá), aztán erre ráépítve szépíthetnétek és testreszabhatnátok a felületet. Ja, de várj, az nem fog menni, hiszen a kollégád szerint FELESLEGES a frissebb jQuery... ;] ;] Haha.

  • adam_

    senior tag

    válasz adam_ #3162 üzenetére

    //fix: menu always show on desktop (40em +)
    if ( $('#nav-main').hide() && ($('#headerTop').width() > 640) ) {
    $('#nav-main').show();
    }

    Írtam egy ilyen fixet, mivel ha normál desktop nézetben megnyomják a logint, automatikusan eltünik a navigációs sáv is, ezzel a scripttel ez kiküszöbölhető. Viszont még továbbra is szeretném megoldani, hogy ha a loginra kattintásnál aktíválodó toggle()-t, mivel a login content szépen lenyílik toggle() segítségével továbbra is, viszont ha újból rákattintok a login-ra nem akarja "visszacsukni" azt. További részletek itt [link].

  • adam_

    senior tag

    válasz adam_ #3161 üzenetére

    Valamint még azt szeretném elérni, hogy normál desktop nézetbe ha a loginra kattintanak, az szépen lenyílik toggle() segítségével, viszont ha újból rákattintok a login-ra nem akarja "visszacsukni" azt, ez miért van? :U

    Előre is köszönöm az észrevételeket, és bocsi ha ma "sok voltam" itt, de már csak ezt az apróságot kellene megoldanom valahogy. ;]

  • adam_

    senior tag

    válasz adam_ #3160 üzenetére

    [link] Elvileg elkészült, ilyet szerettem volna elérni.

    Viszont, azt hogyan oldhatnám még meg, hogy a navigáció normál desktop display méret mellett ne tünjön el, ha a login-ra kattintanak? Mert egyenlőre ott is eltünik.

  • martonx

    veterán

    válasz adam_ #3155 üzenetére

    "mert az on() felhasználásán kívül jelenleg nem nyerünk vele sokat.."

    Most komolyan milyen helyen dolgozol már? Én az ilyen kollégát már réges rég vagy kirugattam volna, vagy én felmondtam volna, és elmentem volna egy normális fejlesztő céghez.

  • Sk8erPeter

    nagyúr

    válasz adam_ #3153 üzenetére

    Hát ha csinálsz valami értelmes demót (az előbbi dobozos nem csinál semmit, meg elavult a kód, meg nincs sok köze a valós példához, nekem meg nincs kedvem működésre bírni), akkor segítünk. Amúgy a feladatnak tényleg SEMMI értelme nincsen. Én mondjuk biztos ezt megemlíteném annak, aki kérte, hogy a júzerrel b@sznak csak ki, de hát evvan. :)
    Amúgy szerintem Te nem tudod, mit jelent az, hogy "etc.". :DDD (csak akkor minek használod :P) Következetesen rosszul használod a mondataidban: "akkor toggle()-lal, etc. ki/be lehessen nyitogatni, "viszont ha újból rákattintok a box1-re, etc becsukom a toggle()-al akkor újból jelenítse meg mellette a box2-t", "akkor a box2a maroon színű div kerüljön bele. Etc, a menüből lehessen bejelentkezni.", "jelen esetben 640px (etc 40em) alatt"... :N

  • Sk8erPeter

    nagyúr

    válasz adam_ #3148 üzenetére

    Értem, hogy mit szeretnél, de mégis mi a búbánat értelme van eltüntetni a menü ikonját? Tényleg egyáltalán nem értem, miért zavar bárkit is, hogy ott van az a három csíkkal ellátott kis ikon. Sőt, szerintem kifejezetten béna, hogy eltűnik. Ráadásul még arra sem teremtesz lehetőséget, hogy bezárhassa a júzer magát az előugró login-felületet - pedig legalább a bezárás-ikonra kattintva pl. elő lehetne ismét hívni az amúgy tök értelmetlenül elrejtett menüikont. A képeden legalábbis a login-űrlapnál nem látszik semmiféle bezáróikon, ha a felhasználó meggondolná magát, és mégsem akarna bejelentkezni, VAGY például tök véletlenül kattintott oda. Vegyük utóbbi esetet - szerinted a júzer örülne neki, ha véletlenül kattintott volna, és erre eltűnne a menüpontokat előhívó ikon? Csak anyázna, hogy miért kellett ezt így megcsinálni, mi értelme, hogy a navigációt lehetetlenné teszed, ha rányomott a loginra. Szóval ez user experience szempontjából katasztrófa.
    Ebből a példakódodból meg nehéz kiindulni, a későbbiből meg végképp, mert a valós példától eléggé eltér. Mindenesetre először közös nevezőre kell jutni, hogy érthető legyen, miért is van szükség ezekre az eltüntetgetésekre, és pontosan hogyan is képzeled, mert jelenleg ez felesleges körök futásának tűnik, amit aztán később úgyis megváltoztatsz, mert rájössz, hogy ez úgy szar, ahogy van. :D
    A JS-kód kapcsán meg tényleg nem értem, ennyire hatástalanok voltak a múltkori tanácsok azzal kapcsolatban, hogy mondjuk egy-egy elemet tárolj már el változóban, ne keresgéld ki a DOM-ból minden alkalommal, ne legyen kódismétlés, ne keveredjen a JS-kóddal bármilyen CSS-kód, aztán amit lehet, CSS(3) segítségével intézz el, és így tovább?

  • adam_

    senior tag

    válasz adam_ #3150 üzenetére

    Elméletben így tudnám prezentálni a problémám, amit funciónalítás (kód) szempontjából szeretnék megéretni, és átültetni az én konkrét példámra (Konkrétabb részletek a korábbi hozzászólásaimban. :B)

    [link]

    További komment fiddleben.

    Köszönöm szépen előre is, ha valaki időt szán rá/rám. :)

    Ádám

  • Sk8erPeter

    nagyúr

    válasz adam_ #3143 üzenetére

    A Drupal 7-esnél a jQuery Update modul olyan szinten alap, hogy fel sem merült bennem, hogy nincs fent nálad.
    Igen, a 7-es kiadásakor még korábbi jQuery-verziók voltak aktuálisak, ezért ezzel a modullal kell frissíteni, a core-t azért nem változtatták ilyen szempontból, hogy ne legyen kötelező a frissítés, ami esetleg pont kompatibilitási okok miatt (hogy például bizonyos dolgokat kidobáltak az újabb jQuery-kből) eltörheti bizonyos modulok működését (amelyek nem lettek egy ideje update-elve, és akkor jönnének a "nem működik, mé'"-jellegű bejelentések gondolom).

    A másik kérdést most nincs időm megnézni, majd máskó'. :)

  • wis

    tag

    válasz adam_ #3146 üzenetére

    De miért vannak benne PHP kódok? Böngésző -> jobb klikk --> forrás megtekintése és azt másold ki.
    Még jobb, ha egy tárhelyre feltöltöd és azt linkeled be. A jquery verzió meg nagyon régi azt frissítsd.

  • Jim-Y

    veterán

    válasz adam_ #3144 üzenetére

    De HTML kod nelkul megis mit varsz akarkitol is? Amugy en kapasbol at tudnam irni TELJESEN a kodod es nalam durvan megbukna review-on, de az csak JS related, nem business ligc related :) Csinalj jsfiddle-re hozza html-t is es akkor sokkal tobben fognak tudni segiteni ;)

  • adam_

    senior tag

    válasz adam_ #3141 üzenetére

    fiddle

    Készítettem egy újabb fiddle-t, ezentúl delegate()-el, mivel egyenlőre az on() nélkül kell beérnem, hála az ősrégi JQuery libnek.

    Valamiért nem akarja az igazát a linkelt scriptem. Leírom mégegyszer, hogy mit szeretnék elérni.

    Loginboxnál:

    Ha rákattintanak, akkor szépen toggle-val jöjjön le a bejelentkező box. Ez eddig megy. Viszont, párhuzamosan szeretném elérni, hogy a menü ikonja tűnjön el mellette, ha épp a loginboxra kattintottak. DE ezt is csak kis display, jelen esetben 640px (etc 40em) alatt.

    Jelen állás szerint, ha rákattintok a login ikonra, eltünik a menü, de mindenhonnan, nem csak kis display mérett melett, és igazából vissza se lehet hozni, ha újból bezárom a loginboxot. :U

    Ugyanezt szeretném elérni a menünél is, csak ez annyival bővült ki, hogy ha rákattintanak a login bejelentkező ikonja eltünik, és a bejelentkezés az egyik menüpontból lehetséges a .login-menuitem a linken keresztül.

    Mi nem stimmel a kóddal?

    Előre is köszönöm az észrevételeket!

    Ádám

  • martonx

    veterán

    válasz adam_ #3141 üzenetére

    Gondolnám, hogy drupalban alapból csak valami ősi jquery verzió van, ami még nem ismeri a .on-t.
    A kódod nem tűnik hibásnak.

  • Sk8erPeter

    nagyúr

    válasz adam_ #3138 üzenetére

    Az a jó, hogy ebben a kódodban pontosan ugyanazokat a hibákat követed el, amiket részletesen kifejtettem/kifejtettünk korábban. :D
    .delegate()?? jQuery 1.7 óta, tehát már elég régen felváltotta az .on(). Használd azt.

    "Legvégső soron tisztázásképpen mi így oldottuk meg, mindennemű Drupálos nyalánkság nélkül, ezzel is szépen megy"
    Igen, megy, de az a Drupalos "nyalánkság" (fúj de ronda szó ez :DDD) pár karakterrel lett volna több, cserébe sokkal szebb és bővíthető, illeszkedik a koncepcióba. Ami működik, az még nem biztos, hogy jó is. :)

    A többit nem olvastam el, mert láttam, hogy megoldottad azóta. :DDD

  • adam_

    senior tag

    válasz adam_ #3138 üzenetére

    Problem solved.

    $("#nav-mobile").html($("#nav-main").html()); írtam JS-ben, viszont a CSS-ben, nav #nav-mobile -al hivatkzotam a stílusokra, levettem a nav -ot a CSS-ből és így most tökéletes. Az élet apró örömei. :U :)

  • Sk8erPeter

    nagyúr

    válasz adam_ #3124 üzenetére

    Hát ja, akár frameworkről, akár CMS-ről van szó, bizonyos szabályokat követni kell, hogy a dolgaid az elvártaknak megfelelően működjenek. Úgyhogy nem úszod meg a dokumentáció olvasgatását, különben csak gányolás lesz belőle.

    A jQuery-kódod kerete már illeszkedik a Drupal behaviors-koncepcióba, de ettől még pazarolsz vele, feleslegesen erőforrás-igényes:

    - az eseménykezelődben minden egyes alkalommal kikotrod a kódból a #login-content azonosítójú elemet, ahelyett, hogy eltárolnád egy változóba, úgy, hogy egyetlen egyszer kikeresed, átadod a változónak az értéket, majd onnantól kezdve azt használnád
    csak egy példa, a tiédbe nyilván picit másképp kell átültetni, máshol kell tárolni a változót, nem az eseménykezelőn belül, de a lényeget érted:
    var $loginContent = null;

    // eseménykezelőn belül:
    if($loginContent === null){
    $loginContent = $('#login-content');
    }
    $loginContent.slideToggle();
    // ...

    A dollárjel használata nálam konvenció, azért szoktam alkalmazni, hogy tudjam, hogy ott egy jQuery objectről van szó.

    - teljesen felesleges "kör" a $(this).next('#login-content'), hiszen adott azonosítójú elemből egyetlen egynek szabad csak lennie egy oldalon, tehát ez esetben simán rövidíthető lenne $('#login-content')-re, és kész. Az ilyen next-es megoldás csak egyéb selectorok használata esetén érdekes, id-nél sosem.

    - ahogy Jim-Y írta, a this használata félreértésekhez vezethet, ezért érdemes az eseménykezelőnél odatenni az eseményt jelző változót, esetedben:
    $('#login-trigger').click(function(e){
    // ...
    });

    az e változó az érdekes, ez lehetne bővebben event, vagy kiskutyafule, vagy akármi, a lényeg, hogy ez jelzi az átpasszolt esemény-objektumot. Innentől kezdve pedig lehet játszani az e.target, e.currentTarget és társaival.
    Vagy ha a $(this)-t érthetőbbnek találod, akkor legalább az eseménykezelőd elején add át egy változónak, és onnantól kezdve azt használd:
    var $self = $(this);
    $self.toggleClass('active');
    ...

    így biztosan egyértelmű, hogy a $(this) épp mire is vonatkozik.

    - ha már erről volt szó, az is már önmagában nagyon durván erőforrás-pazarló, hogy minden alkalommal használod a $(this)-t. Gondolj bele: ilyenkor minden alkalommal a this-t átpasszolod egy függvénynek, és azzal valamit kezdenie kell belül. Így ha debuggerrel futtatnád a kódodat, és végigmennél rajta, láthatnád, hogy teljesen értelmetlenül minden egyes alkalommal, amikor ezt leírod, beleugrik az adott függvénybe, és ott csinál vele valamit (itt épp a this-ből lesz egy jQuery-objektum). Ehelyett egyszerűen még az eseménykezelő legelején eltárolhatnád a függvény visszatérési értékét egy változóban (ld. előbbi példakódom), és onnantól kezdve azt a változót használnád. Ezzel jelentős erőforrás-spórolást érsz el.

    - ahogy azt DNReNTi említette is, a nyílcserélős megoldásod szintén nagyon pazarló. Elegendő lenne megoldani CSS-ből, hiszen gondolj bele, az elemedhez eleve hozzáadod például az "active" osztályt, így ebből máris lehet egy selectort készíteni a CSS-kódodban, pont úgy, ahogy DNReNTi mutatta. Nem beszélve arról, hogy itt is elköveted azt a hibát, hogy egy egyedi azonosítóval ellátott elemet használsz selectorként, mégis keresztülküldöd egy find()-on is, ami megint csak plusz erőforrást igényel. :) Aztán mivel még a $(this)-t is használod (ld. előbbi pontban leírtak), a .hasClass()-t, meg meg a .html() metódust is, ezért sikerült a lehető legerőforrás-igényesebb módon megoldani ezt az amúgy nagyon egyszerű kis problémát. :)

    Az ilyenekre a tiszta kód, kisebb erőforrás-használat miatt érdemes NAGYON odafigyelni MINDIG, és akkor már eleve így fogod leírni a kódot, nem lesz az, hogy "jó, majd később megoldom valahogy" - nagy eséllyel nem fogod megoldani valahogy. Elfelejted, más épp a prioritás, lusta vagy hozzá, elfogadod, hogy van egy ilyen a kódodban, és legyintesz rá, mert sokkal fontosabb dolgok kerültek előtérbe, aztán benne marad örökre. :) Vagy ha épp van egy kis időd, és van egy hirtelen kattanásod, akkor van esély rá, hogy kijavítod, de amúgy nem nagyon.

  • Jim-Y

    veterán

    válasz adam_ #3124 üzenetére

    A $(this)-t el kene felejteni, es helyette hasznalni kene az event objectet :U

  • DNReNTi

    őstag

    válasz adam_ #3124 üzenetére

    A fel le nyilakat felesleges jQ-vel hozzáadni, CSS-el is meg tudod oldani. ;)

    .akarmilyen-osztaly::after {
    content: "▲";
    }

  • Sk8erPeter

    nagyúr

    válasz adam_ #3122 üzenetére

    Most nem azé', de ennek a problémának túl sok köze nincs hozzá, hogy ez Drupal vagy valami totál más, szóval azért, mert nem működik, ne a Drupalt okold, hanem magadat. :DDD
    Ezer éve nem Drupaloztam, de egyből lejön, hogy ennek a kódnak totál semmi köze a Drupal-konvenciókhoz. Most gyorsan rágugliztam, itt van összefoglalva szerintem elég jól, példákkal illusztrálva, hosszas kommentekkel ellátva:
    https://gist.github.com/gregnostic/3cc18f91aa152c05b47c
    A lényeg az anonymous closure vagy IIFE, amivel nem szennyezed a globális névteret, másrészt ami igen fontos, abszolút figyelmen kívül hagyod a module patternt. Ezzel kapcsolatban az előbbi GitHubos linken a Drupal.behaviors.myBehaviorName részt nézd meg. Ahogy az egész Drupal, ugyanúgy a kliensoldali kód is moduláris felépítésű. Fontos koncepció, hogy kivehető/berakható elemekből álljon össze az egész, mint egy lego (ez a lényege a moduloknak).
    Egyébként érdemes kiindulni egy normálisan elkészített, nem összetákolt theme-ből, és ahhoz, hogy ezt úgy tudd módosítani, hogy az alapvető keretet ne kelljen bántani, érdemes leszármaztatni egy saját subtheme-et.

    Az alapproblémád meg teljesen egyértelműen látszik már a screenshotból is, hogy még csak nem is kötődik a JavaScript-kódhoz, mert valami pozicionálási vagy z-indexszel vagy hasonlóval van gond: pont azzal kapcsolatos, amire panaszkodsz, hogy rálóg a felirat a bejelentkező űrlapodra. A screenshotodon a "website" felirat rálóg a Password mezőre, nem csoda, hogy nem lehet belekattintani, valószínűleg valamilyen módon a "háttérbe" szorult. Ezt amúgy szerintem a Firefox 3D nézetével elég jól lehetne szemléltetni, kár, hogy a többi böngésző webfejlesztő paneljeiben ez a feature nincs meg.
    Az éles kódodban is így el vannak cseszerintve a lezárások? :) Mert már itt sincsenek helyesen lezárva az elemek, fel vannak cserélve, pl. a "login-content" id-vel ellátott div lezására szerintem elcsúszott, a <li> elem nincs lezárva (bár a <li>-é opcionális elméletileg, asszem HTML5-ben is). Ezt első körben javítani kéne, másra most már nincs agyam.

Új hozzászólás Aktív témák

Hirdetés