-
Fototrend
Fototrend
Új hozzászólás Aktív témák
-
adam_
senior tag
Ez nagyon egyszerű, a :hover részhez még hozzáadsz egy osztályt is, amire ugyanezek a tulajdonságok érvényesek (vesszővel elválasztva, pl. .skill_line:hover, .skill_line_hovered { /*...*/ }, itt a skill_line_hovered osztály az új), majd ezt az osztályt hozzáadod JavaScripttel, ettől elindul az animáció, majd leveszed az osztályt, amikor azt szeretnéd, hogy visszacsússzon eredeti állapotába.
Tessék:
https://jsfiddle.net/8ndwnb2b/1/Amúgy volt egy csöpp hiba a CSS-kódodban:
-webkit-transition: width 2s;
For Safari 3.1 to 6.0 -ms-transition: width 2s;
Ez a For Safari 3.1 to 6.0 nyilván komment akart lenni, de nem működő kód lett belőle.
Az eredeti JS-kódban a scrollozással kapcsolatos résznek meg nem sok értelme volt.
(#4924) D4nY:
Itt van egy nagyon egyszerű dialógusablakot felpattintó kód a jQuery UI felhasználásával:
http://jqueryui.com/dialog/#modal-confirmation
Ha elakadsz, segítünk.
-
adam_
senior tag
https://jsfiddle.net/8ndwnb2b/
A linkelt Fiddle példámban szeretném elérni, hogy amikor látogató megnyitja a honlapot, akkor a css: hover effekt automatikusan végigmenjen az összes csíkon, mintha odaérintette volna a kurzort. Szóval nem csak úgy szeretném a csíkok transzformációját, amikor a látogató manuálisan odaviszi a kurzort felé, hanem már akkor is amikor betöltődik az oldal, és a látogató még nem csinált semmit sem. Akkor menjen végbe a transzformáció az összes csíkon egyszer.. majd álljon vissza eredeti poziciójába.Írtam Fiddleben egy próbálkozást JQueryben, nem is fut
![;]](//cdn.rios.hu/dl/s/v1.gif)
, viszont úgy tudom lehetőség van rá, hogy JS segítségével megoldható, hogy "szimulálja" a hover effektet, mintha felettük lenne az egérkurzor, holott a valóságban nincs. Úgy tudom, ez click eventtel simán megy, hoverrel is lehetséges? Vagy teljesen másképp kellene megoldani?Előre is köszönöm a válaszokat,
Ádám
-
adam_
senior tag
"cookiesokkal"
Ez picit furán hangzik.
Az egyesszám a cookie. Akkor már cookie-kkal. 
Nem tudnád ezt a kódot úgy mellékelni, hogy a gomboknak legyen már felirata, a képek helyén meg legyen ott valami kitöltő kép?
Kitöltő képek:
http://lorempixel.com/
http://placehold.it/
stb.A gombok meg legyenek ellátva valami segítő szöveggel például az accessibility miatt. Például egy keresőrobot vagy egy screenreader sem igazán tud mit kezdeni az üres értékekkel ellátott gombjaiddal.
Aztán ezeket a korábbi tanácsokat megfogadhatnád (tele van ezekkel a hibákkal a kódod, most még több ilyen jellegű hibával is, mint korábban, amire írtam ezeket), plusz ami a mostani kódodban még extraként nagyon gáz, hogy tele van okádva a kódod ilyenekkel:<script>
$('#zoom_01').elevateZoom({
easing: true
});
</script>
......
<script>
$('#zoom_02').elevateZoom({
easing: true
});
</script>
......(A pontok helyén folytatódik a kód.)
Ez iszonyatosan béna, pont arra találták ki az osztályokat és a selectorokat, hogy általánosan lehessen hivatkozni alapvetően azonos jellemzőkkel bíró elemekre.Ennek a függvényednek nem sok értelmét látom:
function entfernCookie() {
document.cookie = "cookiesEuro=" + cookiesEuro;
"path=/; expires= 0";
document.cookie = "cookiesChocMenge=" + cookiesChocmenge;
"path=/; expires= 0";
document.cookie = "cookiesLieferung=" + cookiesLieferung;
"path=/; expires= 0";
alert("Sie haben alle Cookies erfolgreich gegessen! :)\nSie können es mit Cookies-Status-Button kontrollieren.")
}Az "entfernen" tudtommal azt jelenti, hogy eltávolítani, akkor itt miért is adsz háromszor is tök különböző értéket a document.cookie-nak?
Aztán az objektumos résznél:
var cookies = {
.........
cookies : document.cookie,
.........
entfernCookie : function () {
cookies.document.cookie = "cookiesEuro=" + cookies.cookiesEuro ; "path=/; expires= 0";
cookies.document.cookie = "cookiesChocMenge=" + cookies.cookiesChocmenge ; "path=/; expires= 0";
cookies.document.cookie = "cookiesLieferung=" + cookies.cookiesLieferung ; "path=/; expires= 0";
},
...............Ennek a cookies.document.cookie-nak semmi értelme, ne csodálkozz, hogy ez nem is működik.
"Viszont nekem most perpill németbe kell ezt megírnom a beadandóm miatt"
Lehetne a kurzus nyelve akár szuahéli is, tök mindegy, a programozás nyelve az angol. A kommentjeid akár lehetnek azon a nyelven, amit preferálsz (bár a nemzetközi csapatmunkát ez is nehezíti - nem kell igazán komoly projektekre sem gondolni, elég egy GitHubon megosztott open source projektecske, amit a nagyközönség elé társz), de a változóneveknek, attribútumértékeknek, id-knak, egyebeknek angol nyelven kellene szerepelniük. Csak jótanács. (#4875):
"nem szeretnék más editort használni, mert nagyon megszerettem már a Notepadet"
Majd rájössz.Köszönöm szépen a tanácsokat!
Egy másik kérdés: Azt mivel lehet megoldani, ha pl. kicsinyítem a böngésző méretét, tegyük fel, hogy pl. csak tablet nézetnél aktíválódik egy JQuery. Pl. hasonlóképp mint itt a jobb felső sarokban a menü? Szintén waypointssal?
-
adam_
senior tag
Notepad++ -hoz létezik normális plugin projektek kezelésére?
Itt írnak egy bizonyos NPP-ről, de egyik link sem aktív már nálam, vagyis épkézláb megoldást még nem találtam. Ez miatt pedig nem szeretnék más editort használni, mert nagyon megszerettem már a Notepadet.
Van valami aktuális megoldás a témára?
Előre is köszönöm,
Ádám
-
adam_
senior tag
Közben sikerül a cookiesokkal megoldani az adatok rögzítését, amely a honlap elhagyása után következik be. Erre első körben három funkciót írtam (cookies létrehozása, cookies törlése, és cookies megjelenítése), ezek működnek is, viszont az itt mellékelt kódban, a Cookies wie Object komment után a kódban megpróbáltam összehozni egy objektbe a három funkciót, de valamiért úgy nem megy, ezért egyenlőre kikommenteltem. Kérlek ránézne közületek valaki, hogy miért nem megy objektben a három funkció?
Valamint a Cookies bei Neuladen komment után a kódban kísérletet tettem arra, hogy a lementett cookiekat, ha az oldalra visszatér a felhasználó, a kosár tartalmak továbbra is megmaradjanak, viszont ezt egyenlőre csak console.loggal teszteltem, ott persze nem ad vissza eredményt...
Nagyon szépen köszönöm a tanácsokat előre is,
Ádám
Ui: Ha valakinek problémás lenne a német miatt, kérlek szóljatok, és részletezem az adott sort, ha valamely változó, komment ... nem lenne érthető. Viszont nekem most perpill németbe kell ezt megírnom a beadandóm miatt.
Sk8erPeter: Közben pont nézem a kommented, köszi szépen a hasznos tanácsokat. Igyekszem még átvariálni a kódot.
-
adam_
senior tag
Tudok németül, szóval nekem nem gond, de annak, aki nem tud, idegesítő lehet. Mondjuk nekem is idegesítő még úgy is, hogy értem, mi van odaírva.
Az is szokott zavarni, ha valaki magyarul kódol (lehet sznobizmusnak tekinteni, de akkor is az az elfogadott szokás, hogy angolul kódolunk).Egyrészt jsFiddle-ön át kell kattintani "No wrap - in <head>"-re vagy "No wrap - in <body>"-ra a bal fölső panelnél. Ez azt határozza meg, hogy hova fogja beágyazni a JavaScript-kódot a <script>-tagekkel. Ha megnézed a böngésző webfejlesztő eszközeivel a generált kódot, akkor ezt pontosan tudod követni. De múltkor pontosan ugyanez volt, ami miatt nem működött nálad.
Másrészt nem perzisztens módon tárolod az adatokat, így érthető, hogy a lapújrafrissülések esetén minden elvész.
Tárolhatnád mondjuk sessionStorage-ben vagy localStorage-ben (hogy melyikben, az felhasználásfüggő) a kosár tartalmát, itt egy egyszerű példa:
http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage/2010948#2010948Harmadrészt semmivel nem akadályoztad meg, hogy lapújrafrissülés történjen azonnal az alert után, akármi is volt az eredmény, például ha tök üresen hagyom a mezőket, kapok figyelmeztetést, de ettől még megköszönöd szépen a rendelést, aztán el is mennek az adatok szerveroldalra.
Itt ráadásul tök felesleges minden alkalommal alerttel megköszönni a rendelést, hiszen még meg sem rendeltem, csak kosárba pakoltam.A kosárba pakolás során egy jó UI esetén nem frissül újra az egész oldal, mert tök felesleges. Az egyéni döntés kérdése, hogy a kosár tartalmát el akarod-e küldeni szerveroldalra is, vagy csak kliensoldalon tárolod. A szerveroldal mellett az szól, hogy eltárolhatod későbbre is a kosárba pakolt tartalmat, és akárhol máshol jelentkezik be, akkor megint előkotorható a korábbi kosártartalom, hogy mondjuk később folytatni tudja a vásárlást. De legtöbbször csupán kliensoldalon intézik el az egész kosárba pakolgatást, az adatok tárolását, például az előbb említett módszerekkel.
Az űrlap elküldését pedig az eseménykezelőben kell megakadályozni. Például event.preventDefault() segítségével.
A HTML-kódba bedrótozott onclick-attribútumokat és társait pedig kerülni kell, szépen szeparáltan legyen a JavaScript-kódban az eseménykezelés, a kettő legyen jól elválasztva. .addEventListener() segítségével tudsz hozzáadni egy adott elemhez eseménykezelőt. Példa (a többi hibát nem javítottam, csak ezt szemléltetem!): http://jsfiddle.net/r4s0ef87/2/Másrészt nem perzisztens módon tárolod az adatokat, így érthető, hogy a lapújrafrissülések esetén minden elvész.
Tárolhatnád mondjuk sessionStorage-ben vagy localStorage-ben (hogy melyikben, az felhasználásfüggő) a kosár tartalmátA jelenlegi tanárommal erről beszélgettem, szó volt a local/sessionStorage lehetőségéről is. Azt mondta, hogy elsősorban ezek a módszerek az IE-nél nem alkalmazhatóak, ezért jobb módszer lehet a cookies az adatok tárolására. Próbálkoztam [link], hogy a végén kikalkulált értékeket átadom egy másik funkcióba cookiesba, közvetlen akkor amikor a user elhagyja az oldalt, így amikor majd később visszatér az oldalra, megmaradnak a kosárba pakolt dolgok, ha még nem véglegesítette a vásárlást. Egyenlőre a JSFiddlebe kikommenteltem a legvégéről a cookiesos részt, mert egyáltalán nem megy sajnos. Egyenlőre csak rögzíteni akarom az egyik funkcióba a kijött értékeket a másik funkcióba, a cookiekba, majd egy másik funkció törölni is tudja azokat (tervezek még egy harmadikat is, ami visszaolvassa majd, és ezt a három funkciónalítást mondjuk egy objektumba szeretném behelyezni majd a legvégén..) Rátudnál vezetni, hogy mit rontok el, egyáltalán ez a fajta megoldás is jó lehet/lenne? Szóval elsőkörben tanulásképp kliensoldalon szeretném megoldani az adatok eltárolását, majd ha már megy a JS jobban, akkor szeretnék szerveroldali tárolással is foglalkozni.
A kosárba pakolás során egy jó UI esetén nem frissül újra az egész oldal, mert tök felesleges.
Ezt nem teljesen értem, ezt "kódügyileg" hogyan képzeljem el?
HTML-kódba bedrótozott onclick-attribútumokat és társait pedig kerülni kell, szépen szeparáltan legyen a JavaScript-kódban az eseménykezelés, a kettő legyen jól elválasztva. .addEventListener() segítségével tudsz hozzáadni egy adott elemhez eseménykezelőt.
Most már a HTML kódom teljesen JS mentes, ahogy kell, viszont magát a JS kódon még egyszer átfutnál, és megmondanád, hogy te mit változtatnál rajta (elrendezés, vagy az egész felépítettsége), mert sajnos még erre nem éreztem rá igazán, hogy mikor szép/jó egy komplett szkript. Talán még jóópár projektet kell majd látnom ahhoz, hogy ezt érezzem. Mert sok kis apró dolgot külön funkciónalításokba (ha néha tákolmány is), de sikerül felépítenem, viszont így komplexbe a végén még van mit csiszolni rajta. Gondolok itt például olyanokra, hogy a változókat mikor deklarálom jól (etc. lokálisan, vagy publikusan), mindenre hozok létre külön funkciókat (bár lehetne egy komplex objektumba is ezeket belepakolni..stb..)
Még ezekhez jóó pár hónapot kell gyakorolnom gondolom, hogy átérezzem, mert minél több nüansznyi dolgot tudok, annál több mindent akarok belepakolni egy projektbe, és persze annál bonyolultabb perpill számomra.
Húh ez sok volt, de kíváncsi vagyok a véleményedre.
Ádám
-
adam_
senior tag
Semmilyen HTML-kódot nem mellékeltél hozzá, azt sem írtad le, hogy egyáltalán mikor hívódik meg a függvény, minek kellene történnie, nem értem, milyen módon szeretnéd változókban tárolni a kiszámolt értékeket (mert nem tudni, mi a cél).
De megpróbálom valahogy értelmezni: most az van, hogy egyszerűen adott mezők alapján kiszámolsz kosárba pakolandó értékeket, megjeleníted őket, de ha módosul az űrlap, nem tudod utólag kideríteni, hogy a vásárló milyen termékeket is rakott be a kosárba?Amúgy lehetőleg angol változóneveket használj, angolul programozz, simán azért, mert ez a bevett és elfogadott szokás, a programozás (és általában az informatika) nyelve angol, akár tetszik, akár nem.
Nem beszélve a csapatmunka lehetőségeiről, amit így korlátozol. Ha odaadod vagy megmutatod ezt a kódot olyannak, aki nem tud németül, az esélyes, hogy meg sem próbál elgondolkozni rajta, vagy pedig anyázni fog.Elnézést, javítottam, mellékelve ezúton html is. Bár fiddleben egyáltalán nem megy a script úgy nézem...
most az van, hogy egyszerűen adott mezők alapján kiszámolsz kosárba pakolandó értékeket, megjeleníted őket, de ha módosul az űrlap, nem tudod utólag kideríteni, hogy a vásárló milyen termékeket is rakott be a kosárba?
Igen, jól gondolod. És valamiért a végén az alert ablak "leokézása" után elveszik minden, holott én a végén a bevitt értékeket (etc. megvásárolt termékek adatait (darabszám, fizetési mennyiség, áruk...) meg szeretném jeleníteni a honlapon, továbbra is a "result" divben / és paralell az eredetileg kiírt kosár résznél is.
Legközelebb ígérem angolba írom, és ha most végképp nem megy az értelmezés átírom az egészet angolra, azon ne múljon.
-
adam_
senior tag
Sziasztok!
Az alábbi kóddal kapcsolatban lenne kérdésem. A kód szépen le is fut, ha a júzer kiválasztja az adott termékeket, szépen a skript összeadja az áraikat, darabszámát, extra szállításként hozzáadja az extra költségeket stb. A végén egy alert ablakban megjelenik, hogy köszönjük a rendelését, és a header jobb felső sarkába szépen ki is írja a kosár tartalmát. Viszont ha a júzer leokézza az alert ablakot, minden elveszik.
Ezt orvosolva szeretném a kiszámolt adatokat változókban tárolni, majd az alert ablak továbbléptetése után is megjeleníteni a megvásárolt termékeket, és a hozzá tartozó infókat (ár, darabszám...stb.) egy külön divben az oldalon (vagy ha már a kosár résznél az eredeti helyén a headerben megmaradna, már annak is örülnék) Erre tettem többek között próbálkozásokat a script alján, de valamiért továbbra sem megy, hogyan lehetne ezt orvosolni, mit rontok el?
Amúgy ha pl. a végéről az utolsó alertet kiveszem a scriptből, a kód egyáltalán nem fut le.
Esetleg külön kellene szednem a különböző funkciókat? Mit tanácsoltok?Előre is köszönöm a válaszokat,
Ádám
-
adam_
senior tag
Napi humor?! Ha már volt, akkor bocs.
-
Azért nem működik, mert bár úgy tűnik, hogy globálisan hozod létre a függvényt a jsfiddle még belerakja egy onload-ba így az kívülről nem lesz látható. Ezt baloldalt lehet kikapcsolni.
Nyílván ez összefügg a visibility:hidden-nel
Ezt jól látod, még sem állítottad vissza visible-re.A regexnél match helyett test-t használd, az booleant ad vissza.
-
adam_
senior tag
Most egy abszolút szubjektív kérdés következik.
Mennyire jellemező a szakmában (ez most lehet Frontend, backend ...) meg úgy szerintem a programozásban dolgozóknál, hogy egy kisebb avagy nagyobb feladatot googlezással, majd copy pasttel oldalanak meg oszt csókolom?
Nem tudom, én eddig úgy voltam vele, hogy ami eddig nekem kellett, arra vagy keresgéléssel, majd az adott kód személyre szabásával sikerült elérnem egy probléma megoldását, és még kifejezetten JS berkeken belül nem igen volt olyan, hogy magam írtam volna hosszabb kódokat, a kisebb módosítgatásokat leszámítva. Természetesen ez lehet azért is van, mert frontendbe gondolkozva nem annyira elvetemült kódokra van (volt eddig) szükségem, mint pl. a szerver oldalnál. Valamint ha egy kódot találok, ahhoz megpróbálok mindig még jobban utánanézni, a működését megérteni (ez is egy tanulási módszer számomra), nem szeretem úgy hagyni, csak bemásolva, aztán működik, és azt se érti az ember, hogy hogyan.
Ti erről mit gondoltok?
-
adam_
senior tag
Nincs mit!
A betűtípusok CSS-fájlját mozgasd fölülre, a többi CSS-fájlhoz, hiszen a CSS-fájloknak mindenképp előbb kell szerepelniük, mint a scriptfájloknak (pl. ha egy-egy scriptfájl betöltése időigényes, a böngésző ne csak később kapja meg a stílusdefiníciókat, hogy így kéne kinéznie az elemeknek, ez okozhat egy villódzást, ezért kerülendő). Ezenkívül a scriptfájlokat érdemes közvetlenül a body lezáró tagje (</body>) elé mozgatni inkább, hogy azok betöltése, feldolgozása ne hátráltassa a <body>-ban szereplő többi elem megjelenítését.
Egyébként jó ez így, de annyit szoktak még ezen javítani, hogy szerveroldalon cache-elik a NEM külső szerverről (pl. CDN-ről), hanem azonos tárhelyről behúzott CSS-, ill. scriptfájlokat egy-egy minimalizált fájlba (tehát egy darab azonos tárhelyen szereplő CSS-, ill. egy darab azonos tárhelyen szereplő JS-fájl; mindezt úgy, hogy a whitespace-ekkel spórolnak, például nem szerepelnek benne sortörések, felesleges szóközök, mint a jQuery minimalizált változata), hogy egyetlen requesttel letölthető legyen, és azt az egy-egy darab fájlt kelljen csak gyorsítótáraznia és betölteni a böngészőnek szükség esetén. A minimalizálás azért érdekes, mert így még kisebb méretű lesz a letöltendő fájl. A CDN-ekről behúzott tartalom azért lehet kivétel, mert az ilyen requestek párhuzamosíthatók. De mindezt automatizáltan szokás elintézni, vannak erre kész library-k, szóval ne kezdj el ilyesmit kézzel megírni majd. De nem is feltétlenül érdemes most egyelőre ezzel foglalkoznod, mert ez már inkább az optimalizálgatós rész.A Waypoints-os kérdésre: nem teljesen tiszta, hogy is csináltad pontosan a saját kódodnál, így nehéz válaszolni rá, mi lehet a gond, ezt fejtsd ki még plíz.
Köszi a tippet!
Tehát a *css fájlok linkjeit elől hagytam, a JQuery library és a többi JS script linkjét pedig közvetlen a lezáró body tag elé tettem át.A waypointsos témáról, beillesztettem külön *js fájlban ezt a kódot:
$('.notify').waypoint(function (direction) {
alert('Top of notify element hit top of viewport.');
}, {
offset: '10%'
});Majd a lezáró body tag elé belinkeltem ennek a linkjét:
<script src="js/waypoints.js"></script>
Természetesen ugyanitt bevan linkelve a JQuery library is:
<script src="js/jquery-1.11.2.min.js"></script>
Majd ezt követően az egyik p-tagnak megadtam a notify osztály kiterjesztést:
<p class="notify"> dgdsgdsgsd </p>
De hiába görgetek le a p - tagre, nem ugrik fel semmilyen Alert ablakocska. Mit rontottam el?
Holott a többi egyéb JS script simán fut. A legvégén az lesz, ha ez nem jön össze, hogy kipróbálom az általad ajánlott waypoints nélküli megoldást, de nem nyugszom amíg ezt nem oldottam meg.
-
adam_
senior tag
Ja, hogy erre az Animate.css-re gondoltál. Ezzel futólag már találkoztam, amúgy nem ismerem, de nem rossz.
"Ez a ScrollMagices, általad linkelt téma is nagyon tetszik. Kár, hogy már az én "one page designos" oldalamat függlőlegesbe terveztem"
Egyáltalán nem kár, mert a ScrollMagic természetesen függőleges oldalakra is alkalmazható, ott van rá ezernyi példa még. Menj a belinkelt oldalon fölül a "Menu" feliratra, ott fel fogja dobni a többi példaoldalt.
Pl. ezt:
http://janpaepke.github.io/ScrollMagic/examples/basic/simple_tweening.htmlKöszi!
Még kérdezném, hogy mi a bevált módszer a JS funkciók bekötésére a HTML dokumentumban? Gondolok itt arra, hogy elég pl. egyszer bekötni a JQuery-t és még egy *js kiterjesztésű amibe a többi etc. JQuery funkcionalítás szerepel, vagy minden egyes funkcióra (pl a waypointsra, lightboxra ...) külön külön *js fájlt szoktatok létrehozni, és úgy bekötni a HTML head részébe? Konkrétan nálam most így néz ki, ez mennyire "szépen" van így pl.?Mondjuk waypointsra visszatérve, mert nem nyugszom, amíg meg nem oldom címszóval
.. hiába hoztam létre egy külön js fájlt amibe bemásoltam az ezen a linken található JS kódot, a htmlben meg egy p -tag -et elneveztem notify osztálynak, hiába görgetem le, nem hozza fel a figyelmeztető ablakot sehogyan sem és fogalmam sincs mit rontok el, mivel itt már szépen a JQuery library is be van kötve, szóval minden erőforrás rendelkezésre áll? Mit gondolsz? -
adam_
senior tag
wis már leírta a választ, nincsenek megadva az erőforrásfájlok. De még magát a jQuery-t sem adtad meg, mint felhasznált erőforrást.
Érted, egy autó kerék nélkül nem fog gurulni, ez is olyan."megismerkedtem a animation.css"
Az mi? A CSS transition tulajdonságaira gondolsz?"ez lenne a kulcsa a header rész görgetés általi opacity csökkenésének, valamint az oldalon található szöveg (kép) animációkra, ami a júzer görgetésére következik be a lentebbi részeken. One page design által felépített oldalról van szó"
Ilyesmi jellegű izgő-mozgó, animált dolgokra, amiket szeretnél, itt van egy gyors ránézés alapján jónak tűnő példa, ami megmutatja, hogy nem feltétlenül szükséges a Waypoints használata sem (viszont ettől még nagyon jól jöhet):
http://designshack.net/articles/css/how-to-design-animated-sliding-page-elements-with-css/Sk8erPeter és wis, köszönöm a tippeket, nem is tudom, hogy gondoltam, hogy JQuery library nélkül csinálom.
"megismerkedtem a animation.css"
Az mi? A CSS transition tulajdonságaira gondolsz?Ez a ScrollMagices, általad linkelt téma is nagyon tetszik. Kár, hogy már az én "one page designos" oldalamat függlőlegesbe terveztem, de ez a fajta, vízszintes oldalváltás is nagyon tetszik. Lehet kellene rá még egy referenciaoldalt alapoznom, mert úgy látszik, meg ahogy láttam már máshol is a világhálón, most ezek "nagyon menő" designelemek.
-
adam_
senior tag
Köszönöm szépen a tippet, megismerkedtem a animation.css és a JQuery féle együttes animációkkal, nagyon jól néznek ki az oldalamon. Megy a hover, click funkcióval is szépen, viszont, az automatikus késleltetett animációt waypointssal még mindig nem sikerült belőnöm. Pedig ez lenne a kulcsa a header rész görgetés általi opacity csökkenésének, valamint az oldalon található szöveg (kép) animációkra, ami a júzer görgetésére következik be a lentebbi részeken. One page design által felépített oldalról van szó, ha ez valakit érdekelne.
Tehát a kérdésem a következő. Próbáltam JSFiddleben is összerakni a dolgot, nem megy. JSFiddle itt. Tehát pl. hiába van az utolsó pár paragraphnak osztályra megadva, nem ugrik fel semmilyen figyelmeztető ablak. Mit rontok el?
Sk8erPeter linkelt oldala alapján csinálgattam, amit mégegyszer köszönök, de ez a waypoints nem nagyon akar működni.
Köszönöm a válaszokat!
-
adam_
senior tag
Dánkesőn
És még egy, hol tudnám esetleg azt belőni, hogy a fixed headertől függetlenül valóban ott álljon meg az oldal a menüpontra kattintás után, ahol az anchor tag van? Mert akár hova is írom #zyz tartalom linket, nem ott áll meg, hanem kb. egy negyed oldallal lentebb. Remélem érthetően írtam. Nyilvan a fixed pozicionalt header miatt ez picit alabb csuszik. Esetleg erre valami klassz módosítás ebben a JQueryben:$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});Előre is köszönöm.
Valamint még egyet gyorsiba, aztán el kell tűnnöm egy kis időre mára. Ehhez és ehhezaz oldalhoz hasonló animációt, miszerint ahogy görgetem le az oldalt, úgy jelenik "villan" fel a tartalom, mivel tudnám elérni? Nálam csak szövegeknek, és a képnek
kellenejó lenne, ha így jelennének meg a onepagedesignomban. -
Hiába írom oda a js kiterjesztést, úgy sem reagál, sőt igazából, ha a világhálóról linkelem be a library-t, akkor sem csinál semmit. Holott JSFiddleben simán megy.
Problem solved:
Igazából próbálgattam különböző verziójú JQuerykkel, és ezzel megy:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Hogy miért megy ezzel, és az új verzióval nem, arról fogalmam sincs.
-
adam_
senior tag
Mi lehet a baj, ami miatt itt helyi gépen, "helyi script" bekötéssel miért nem megy? "Localba" így alkalmazom:
<script src="jquery-2.1.1.min"></script>
Szerintem nem jó a fájlnév, lemaradt a js kiterjesztés.
Hiába írom oda a js kiterjesztést, úgy sem reagál, sőt igazából, ha a világhálóról linkelem be a library-t, akkor sem csinál semmit. Holott JSFiddleben simán megy.
-
adam_
senior tag
jsFiddle Beispiel bitte schön...
-
adam_
senior tag
Az, hogy ha az alábbi JQuery kódokra külön-külön nem reagál semmit az adott honlap Chromeban és MZ-ban sem, annak mi(k) lehet(nek) a(z) ok(ai)?
// hide all paragraphs.
$("p").hide(4000);$("p").fadeOut(4000);
// simple click
$("#pageID").click(function() {
$("#pageID").text("You clicked me!");
});Szóval nem nagyon reagál egyikre sem dollárjel helyett jQuery-t írva sem (bár ezt csak úgy kipróbáltam), holott pl. ez ment:
jQuery(".tourDescription").addClass("highlight");
Pedig mindent úgy csináltam mint a tutorial videóban. Igaz mivel a videó régebbi, 2011-es így JQuery 1.6.1 -et használ én pedig 2.1.1-et, de oda-vissza kipróbáltam, egyikkel sem volt jó az effekt. Hol keressem a hibát?
-
adam_
senior tag
"Akkor nem tudom, hogy itt mit töltöttem le"
Egy számodra - és legtöbbünk számára - teljesen felesleges extensiont.
Nem hiszem, hogy túl sokan lennének a topicban, akik a DevTools különböző verziói között váltogatnának.(#4716):
Google-t próbáltad már?
http://hu.wikipedia.org/wiki/Document_Object_Model
http://nyelvek.inf.elte.hu/leirasok/JavaScript/index.php?chapter=21
stb.Sk8erPeter Köszi a linkeket. Máskor elsőnek Google, mielőbb kérdezek.
-
adam_
senior tag
Itt megmondanátok, hogy a szkriptben az action="demo_form.asp" mire szolgál? Meg úgy általánosságban az action?
És kérlek erősítsétek meg, hogy jól gondolom-e, hogy ha röviden kéne összefoglalni a DOM-ot, akkor arról van szó, hogy a JS segítségével a html-em különböző objektumait "elemeit", tudom JS segítségével manipulálni (etc. értékeket változtatni stb..)?
-
adam_
senior tag
Fogalmam sincs, mi a neve annak, hogy ugyanazzal a típussal térj lehetőleg vissza.
Ez miért érdekes?(#4712) adam_:
Nem tudsz rosszul telepíteni semmit a DevTools-on, mivel a Chrome integrált része.Akkor nem tudom, hogy itt mit töltöttem le: [link]
Jim-Y: Hát igen, még ismerkednem kell vele az tény.
A Firebugba mi az a fjúcsőr, ami pl DevToolsban nincs, és igazán hasznos? -
Nem merheto szerintem. A Firebug, es a Chrome DevTools is nagyon jo. En a DevTools-t hasznalom.
Chromban így néz ki a DevTools? Vagy valamit rosszul telepítettem?
Mondjuk eddig ha ebből indulunk ki, és jól fut nálam is a DevTools, akkor eddig nekem a Firebug közelebb áll, talán egy picit "letisztultabb" számomra. -
adam_
senior tag
Feladat és leírás itt. Előre is köszönöm az észrevételeket.
Az oktatóprogi céloz is rá, hogy van rá megoldás, de sajnos nem találtam meg.
Think about how you might fine-tune this program to make sure it only finds exact matches for your name. Search the Internet to see if there are any built-in JavaScript string methods that can help!
-
Szerintem csak elírtad a visszatérő üzenetet, ezt már én is megcsináltam még korábban, és vissza tudtam keresni a kódot:
// Write your function below.
// Don't forget to call your function!
function sleepCheck( numHours ) {
if ( numHours >= 8 ) {
return "You're getting plenty of sleep! Maybe even too much!";
}
else {
return "Get some more shut eye!";
}
}
sleepCheck(10);
sleepCheck(5);
sleepCheck(8);FYI: ez egy kisebb anti pattern, ha minél jobb stílusban akarnánk megcsinálni a feladatot akkor csak egy darab return statement lenne a függvényben. http://jsfiddle.net/fgexxnjo/2/ Megjegyzem, ez nem mindig lehetséges, de törekedni kell rá.
Köszi, így már jó!
Amúgy kb. ez a legidegesítőbb hiba, hogy ugye szintaktikai és egyéb probléma nincs, de mégsem enged tovább. -
adam_
senior tag
Ami miatt egyáltalán nem fut le a kód, hogy ezt írtad:
console.log("Thank you! We should race at the next concert!);nincs lezárva a string, tehát ez helyesen:
console.log("Thank you! We should race at the next concert!");Az összehasonlítás if (feedback > "8") helyett első körben:
if (parseInt(feedback, 10) > 8)
Persze itt semmi értelmes ellenőrzés nincs, normális validáció során megnézed azt is, hogy mondjuk a feedback változó, ami egy string, nem tartalmaz-e nem megengedett karaktereket (pl. betűket, amikor csak számok megengedettek; jelenleg mondjuk ha beírod, hogy "9abc", akkor azt is parse-olni fogja 9-re, de mégsem ellenőrizted, hogy a felhasználó nem gépelt-e be általad nem elfogadott karaktereket, pedig illik, ennek megoldását rádbízom).
Működik az explicit parse-olás nélkül is, ha > "8" helyett > 8-at írsz, DE szerintem sokkal szebb és kezelhetőbb, ha egyértelműen jelzed a kódban, hogy mi is történik, tehát hogy egy stringből kotorsz ki egy egészszám-értéket.Szerk.: egyébként ha rákattintasz a JSHint gombra a jsFiddle-felületen, akkor segíteni is fog, hogy hol van jelenleg elrontva a kódod, érdemes használni, mert így nem akadsz el ilyeneken, hogy egy stringet elfelejtettél lezárni. Meg érdemes figyelni a szintaktika-kiemelésre, mondjuk jelen esetben könnyű volt elsiklani felette.
Sk8erPeter, Jim-Y Köszönöm, így már minden világos.
-
Vannak online elerheto konyvek, probalom ugy linkelni, amilyen sorrendben en olvasnam oket:
http://speakingjs.com/
https://github.com/getify/You-Dont-Know-JS
http://eloquentjavascript.net/
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
https://leanpub.com/understandinges6/read
http://read.humanjavascript.com/
---
http://www.javascriptenlightenment.com/
https://leanpub.com/javascript-spessore/read
https://leanpub.com/javascript-allonge/readhttps://github.com/vhf/free-programming-books/blob/master/free-programming-books.md#javascript
De vannak hasznos netes oktatoanyagok is, amiket most nem fogok belinkelni ugyse nezi meg senki
Köszönöm!
![;]](http://cdn.rios.hu/dl/s/v1.gif)
Láttam már pár hasonló online cv-nél az ötletet, és egyszerűen így tetszett meg. 
Új hozzászólás Aktív témák
- Gyúrósok ide!
- Kreatív előzetesen az Xperia 1 VIII
- Autós topik
- AMD Ryzen 9 / 7 / 5 7***(X) "Zen 4" (AM5)
- Forza sorozat (Horizon/Motorsport)
- Samsung Galaxy S25 Ultra - titán keret, acélos teljesítmény
- Futás, futópályák
- Sorozatok
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Mobilinternet
- További aktív témák...
- Új - MacBook Pro M5 Pro Chip 14" 15C / 16C / 24 GB RAM / 1TB SSD / Silver / Black - 27% Áfás
- Dell Precision 5560 i5 11500H 16GB 256GB SSD 1920x1200 Matt IPS
- Új - MacBook Pro M5 Chip 14" 10C / 10C / 16 GB RAM / 512 SSD / Silver / Black - 27% Áfás
- Új - MacBook Pro M5 Chip 14" 10C / 10C / 32 GB RAM / 1TB SSD / Silver / Black - 27% Áfás
- Micro - Fujitsu Esprimo Q958 (i5-8400, 8GB DDR4 RAM, 256GB SATA SSD)
- Asus RoG CROSSHAIR X870E APEX Alaplap!
- Fotó állvány eladó
- GAMER PC! Intel i9-12900KF / RTX 5070 / 32GB DDR4 /1TB Gen4 / B760 /1350w Platinum! BeszámítOK!
- iPhone 11 Pro 64GB 100% (3hónap Garancia) - AKCIÓ
- Új Lenovo T14 Thinkpad G5 WUXGA Ultra7 155U 12mag 32GB RAM 1TB SSD Intel iGPU Win11 Pro 4év Garancia
Állásajánlatok
Cég: Laptopműhely Bt.
Város: Budapest