Új hozzászólás Aktív témák
-
nevemfel
senior tag
Már bocs, de annyira nem ismered még sem a js-t, sem a DOM-ot, hogy levonhass belőle olyan tanulságokat, hogy mit kellene kijavítani rajta és hogyan. Vannak classok a js-ben is az ES2015 óta, a többség nem nagyon használja, olyan is lett az implementáció, amilyen, Valójában típusokra, interfészre lett volna szükség, satöbbi, ehelyett kaptunk classokat, meg generátorokat, amiket nagyjából senki nem akart, hurrá.
Az meg a másik része a dolognak, hogy a webprogramozásban a legtöbb problémát nem is a js produkálja, hanem az elcseszett böngésző API, azaz a DOM szerkezete.
-
martonx
veterán
Pont, hogy marhára nem az osztályokon, és a js szintakszison múlik. Mostanra pl. egész jól lehet js-ben is OOP elveket használni, nem ettől szar még mindig. Hanem az egy szálon futástól, meg a html bindolási lehetőségek teljes hiánya miatt (bár már ez sem teljesen igaz, mióta kijött a Webcomponent js-be).
-
nevemfel
senior tag
A függvényből úgy tűnik, hozzátold egy kódból felépített div-et a document.body-hoz. És az a része nem fér a fejembe. Azt a látvány produkálni én azt hittem, azonos keretbe kellene foglalni mindent a body-ban vagy 3 rétegben, és z-indexekkel előtérbe hozni a modális ablakot, míg kettő közé egészben letakarni a body-t egy átlátszó div-vel, hogy ne lehessen a háttér elemre rákattintani.
Mi ebben a furcsa? Azt írod, nem érted, mit appenddel a bodyhoz, majd leírod, hogy kell egy plusz div, ami eltakarja a bodyt, plussz z-indexszel egymás fölé kell pozicionálni a megfelelő rétegeket. Mi a kérdés? Bizonyára a takaró-, meg a modált tartalmazó divet appendeli, abszolut pozicionálja és z-indexeli, többek közt.
-
martonx
veterán
Uh, a react még mindig mennyire undorító szintaktikájú (számomra legalábbis, tudom másoknak meg pont ez a katyvasz fos jön be)
Ráadásul ez a példa is de béna, már miért kellene mindent annyiszor leírni react nélkül, ahány todo elemet jelenítünk meg
Ettől még bőven van létjogosultsága a reactnak, csak ezen a konkrét magyarázaton röhögök, -
#7546
BigBlackDog
veterán
coco2
#7544
BigBlackDog
veterán
Igen, ez is volt a gond, hogy a lenyitott elem sorában, a többi oszlopban megjelent egy üres terület az elemek között.Ha több flex box van használva, ha jól értem egymásba ágyazva, akkor mi fogja garantálni, hogy reszponzív lesz? Tehát a képernyő szélesség változásakor átáll egyoszlopos, vagy kétoszlopos megjelenítésre? Ilyenkor a második és harmadik oszlopban (flex boxban) lévő elemek
-
#7543
BigBlackDog
veterán
coco2
#7542
BigBlackDog
veterán
+ #7541martonx: Gridet próbáltam, de nem volt tökéletes. Ha pl. a második oszlopban lévő elemet "kinyitottam" (magassága megnőtt), akkor az utánna lévő elemeket eltolta és volt olyan elem, ami átkerült a harmadik oszlopba. De lehetséges, hogy én csináltam valamit rosszul.
Illetve amit még nem írtam, hogy balról jobbra, majd fentről lefelé kéne az elemeknek elhelyezkednie.
-
Habár érthető, amit leírtál, mégis inkább inspirált egy új ötlethez, hogyan oldhatnám meg saját módszerrel. Mert soha nem használtam, és nem is fogok használni mások által generált motorokat vagy frameworköket!
A saját öltet, ami most jött, a window.localStorage-ra épül. És biztosan működni fog
martonx: Valójában a lementés módja lett volna kérdéses.
-
Szerintem félre értettük egymást. Amit te küldtél, az egy megnyitott oldalon belüli ugrálás. Én viszont arra gondoltam, mikor egy teljesen új oldalt nyit a link (target="_blank") és azon az oldalon ugrik.
martonx: Ezt eddig is gondoltam, engem a működése érdekelne, hogy mit kell hozzá használni, hogy a webtulajdonos lássa az adatokat.
-
cstomee
tag
A body-n van alapból 8px (?) margin, ez default.
Keress rá arra hogy: normalize css - ez egy css reset, lenulláz meg módosít pár dolgot.
Nézd át hogy pontosan miket csinál, ha nem tetszik akkor csak azt használd ami neked kellhet...
Ezt nyílván a saját style-od elött töltsd be.
Amúgy ha megnyitod a DevTools-t akkor bal oldalt az első ikon az Inspect,
(Windows-on: Ctlr + Shift + C) és kijelölöd a body-t akkor mutatja jobb oldalt a rá vonatkozó stílusokat... -
Taci
addikt
A
margin: 0 auto;viszi középre (vízszintesen), ha jól gondolom.De amúgy mekkora margin van bal oldalon? Mert ha 720px a hely, és 710px-nyi tartalmat akarsz rátenni, akkor 5 pixelnyi margint kell balra beállítanod, hogy a másik oldalon is annyi maradjon, kvázi középre kerüljön.
-
martonx
veterán
Ez pontosan így van, nem véletlenül külön ágak a backend, frontend, designer a webfejlesztésen belül. Én mondjuk fullstack vagyok, de aki azt mondja, hogy úgy fullstack, hogy mindenhez IS ért, az vagy nem tudja miről beszél, vagy hazudik
Azért nagy szerencséd, hogy az utóbbi 1-2 évben drasztikusan fejlődött a böngészők kompatibilitása, illetve maga a CSS is. Pár évvel ezelőtt CSS-ezni full agyfasz volt.
Bonyolult esetekbe még manapság is bele lehet persze szaladni, de egyre ritkábban. -
martonx
veterán
Átalakítottam ilyenre: Edit fiddle - JSFiddle - Code Playground
Nem jó gyakorlat br-t használni távtartásra. Illetve ne használj mindenre id-t, mikor másféleképpen is tudsz rá hivatkozni.
A magyarázat pedig itt van leírva: display - CSS: Cascading Style Sheets | MDN (mozilla.org)
Nem szégyen dokumentációt olvasni (egyébként én se tudom a választ, nem vagyok egy nagy CSS guru, én is MDN-ből szoktam puskázni ). -
martonx
veterán
Mindegyik fontnál van lassulás. Ez alól az egyetlen kivétel a web safe fontok. Mivel azokat letölteni sem kell
Viszont ezekkel a lassulásokkal azért együtt lehet élni (mármint a variable fontokéval, a normál web fontok engem zavarnak).Vannak azért ingyenesek is: Variable Fonts: A 101 Introduction (+ Free Variable Fonts to Try) | Design Shack
-
nevemfel
senior tag
A google fonts elég megbízható, de le is lehet tölteni a fontokat saját kiszolgálóra. Nem nagy fájlokról van szó, főleg nem a woff2 formátumnál.
Általában nem az szokott lenni a probléma, hogy a font túl nagy, hanem hogy nehezen olvasható, pláne ha a színek is rosszul vannak összeválogatva, vagy hogy nincs benne minden karakter (őűŐŰ, jellemzően).
-
martonx
veterán
2021-et írunk. Csakis Variable Fontokkal fuss neki bárminek is. Ezek előnye, hogy a böngészőnek csak egyszer kell letöltenie, és utána kedvedre gyurmázhatod.
Az egyéb normál fontokat ugyan kicsivel kisebb méretűek, mint egy variable font, viszont ezekből kismillió verziót kell letöltenie a böngészőnek.
Pl. variable font 200kbyte, ezt egyszer kell letölteni. Sima font csak 150kbyte de külön le kell tölteni a 150kbyte-ot, normál szöveghez, dőlt szöveghez, vastagított szöveghez stb...A web safe fontok is jó választás lehet, viszont borzasztó limitált az olyan font, ami minden gépen ott van.
variable font választó pl: Variable Fonts (v-fonts.com)
-
-
martonx
veterán
Ez így vajon milyen? Edit fiddle - JSFiddle - Code Playground
Flex-el igazítottam, meg kicsit a html struktúrát is átdolgoztam, olyan fura, hogy ha egy elemen belülre akarsz rakni valamit, és te hozod létre a html struktúrát, akkor miért nem rakod bele ténylegesen a belerakandó div-et? Miért vele egy szintre rakod, és utólag pozícionálgatod? -
cstomee
tag
jsFiddle
-A position: absolute a relative container-en belűl tudod igazítani!
-absolute az csak egy dolog, lehagytad magát a pozícionálást: top right bottom left, ezeknek nézz utána hogy hogy működnek.
- az absolute elem bal felső sarkát igazítod, tehát a top: 50% left: 50% nem középre teszi az elemet, hanem az elem bal felső sarkát teszi oda, ennek is nézz után. Negatív margin magasság és szélesség felével tudod igazítani, vagy amit linkeltem abban transform translate-et használtam. Ennek is nézz utána. -
Ha arra gondolok, amire gondolsz, akkor a következőképpen:
Megnyitod az adott oldalt/oldalad. Nyomsz egy F12-t a billentyűzeten, vagy jobb klik - vizsálat, vagy netán Ctrl + Shift + I, mindegyik ugyan azt csinálja. Jobb oldalt megjelenik a vizsgálati mező, aminek a tetején, bal oldalt találsz egy ikont, egy Tablet, előtte egy telefon. Arra kattintasz.
Ezután a képernyő tetején megjelenik egy sáv, benne a Responsive szó, mellette az aktuális felbontás. Itt tudod kézzel húzni, nyújtani, folyamatosan fogja jelezni a felbontást, de manuálisan is beírhatod ott felül.
Ha a Responsive feliratra kattintasz, akkor lenyílik egy lista, különböző, előre definiált eszközökkel, melyekre ha kattintasz, azok alapértelmezett beállításaival fog dolgozni a böngésző.Ennél egyszerűbb megoldást nem tudok hozzá.
-
martonx
veterán
Pedig ideje lenne elkezdeni
Találtam egy ilyen oldalt, ha nem is a legnaprakészebb, de elég jó átfogó képet ad a mobil eszközök felbontásaihoz:
Viewport Size by Device / Phone Screen Dimensions | Viewport Sizer ToolEnnek a megoldásnak az energiakímélés, gyorsabb működés a lényege. A telefonnak elég csak pl. 360X640-es felbontáson kiszámolnia, hogy hogyan is fog kinézni az adott weboldal, és utána ezt felskálázza a fizikai megjelenítőre. Könnyű belátni, hogy mennyivel gyorsabban ki tud renderelni 360X640 pixelt, mint 1440X2560 pixelt (hogy a linkem legelső példájánál maradjunk).
-
róland
veterán
Szerintem a mobil képernyőhöz jó útmutatót adnak a Bootstrap töréspontjai. A mai mobiltelefonok kijelzőinek felbontásai - típustól függően - a small-large töréspontok között vannak. (Egyre ritkább az olyan okostelefon, amelyik felbontása ne érné el minimum a HD-t.)
-
cstomee
tag
Erre gondolsz? Lehet félreértem mit szeretnél...
selector :hover
jsFiddle#7432 coco2
Én a swiperJS használtam, elég jól testreszabható, bár ez lehet egy kicsit overkill lesz neked... Tényleg sok minden van benne!
Ha ez nem jó akkor keress rá hogy: js slider lightweight -
Pontosan ezaz. Ezeket már mind elvégeztem és nincsen különbség. Tudom, hogy mi hogyan működik és hogyan épül fel, ezért is megfoghatatlan ez számomra. Főleg, mint korábban írtam, elég csak a kiterjesztést módosítani és máris működik...
Lehet, hogy valami időleges sz•patás, vagy valami módosítás zajlik az éterben, nem tudom. Megnézem holnap is, hogy mit csinál.
-
Ezt eddig értem, ezzel nincs is baj. Azzal viszont igen, és érthetetlen előttem, hogy megcsináltam próbaképpen egy 58 tagú menüt, amiből az Apache szerverem csak 46-ot jelenít meg. Feltettem a Weboldalamra, ott is csak 46. De a komplett kódot bemásolva JSFiddle-be ott van az összes, mind az 58.
Erre már nem tudom, mit lehetne mondani. Miért képes megjeleníteni az egyik, ha a többi nem, vagy miben különbözik? CTRL+C CTRL+V volt az egész próba, tehát abszolút nincsen különbség közöttük, kivétel a megjelenítendő név, ami alapján látom, hogy ugyan azt a 12-t nem rakja ki egyik sem...
Közben nézem, hogy ha PHP helyett HTML kiterjesztést adok neki, akkor mind az 58 ott van... És ezt végképp nem értem. Vagy működjön az egész PHP-ben, vagy semennyi. De miért pont az a random 12?
-
martonx
veterán
A head-be rakni bad practice. Miért?
Mert a script feldolgozás mindig lassú, és addig az egész utána következő html feldolgozás, css alapján rendering beblokkolódik. Mondjuk ez az async defer kapcsolókkal elvileg kezelhető. De ha több scripted van, amiknél fontos lenne az egymásra épülés, akkor az async defer-el csak megszívatod magad.
Szóval az a tuti, ha a body végére rakod a scriptjeidet. Ettől még az async defer-t ekkor is érdemes lehet használni.
De ettől még nyilván teheted head-be, nem depreciated, csak a fentiek alapján rossz gyakorlat. -
gyulank
addikt
Tőled tanultam, hogy oktatni kell a népet. Láthatod, hogy engem igazolt a valóság, nem téged. A felhasználók pont olyanok, amilyennek leírtam őket. Normálisan feltettem a kérdést, lehülyéztek, majd közöltem, hogy nem is tudja, miről beszélek, és ez csak azért lehetett, mert nem tudták beírni a keresőbe, hogy userstyles. Tehát kellett volna róla videó nekik, de látod, hogy hogy felháborodtak, ahogy előre megjósoltam. Na, ugyanez lenne, a fordítós videóval is. Ja igen, hozzátéve, hogy ahogy most előadtad, hogy én akarom tudni... abban az esetben meg azt adnák elő, hogy én akarom, hogy elolvassák az oldalt.
-
Csak Firefox alatt ennyire egyszerű, más böngészőkben nem.
Chrome, Edge, etc. példa:
body::-webkit-scrollbar {width: 12px;}
body::-webkit-scrollbar-thumb {background-color: red;}Érdemes lehet még ezt hozzátenni, különben a piros csúszkának fekete lesz a háttere:
body::-webkit-scrollbar-track {background: white;}Firefox példa:
body {scrollbar-color: red white;} -
-
martonx
veterán
Ja, hogy még mindig ez a baj?
Egyrészt a Facebooknak van egy egész jó tool-ja, amivel meg tudod nézni, hogy mit fog látni FB a belinkelt oldaladból: Sharing Debugger - Facebook for Developers
Másrészt, miért lenne már broken az og:image? Ha szétnézel, mindenhol ezt használják, FB is ezt használja, neked is ezt kell használnod. De ez szépen fog látszódni a fentebb linkelt FB Sharing Debuggerrel.
Ez amit most használsz: og:image:secure_url szerintem sehova nem kell.
-
-
martonx
veterán
Szólok, hogy már jó pár éve nem a Microsoft miatt kell aggódni, hanem az Apple miatt. Azaz, amit Chrome-ra fejlesztesz, szinte biztos, hogy az újabb Edge-ekben szépen menni fog. Ellenben, amikor megnézed iphone-on, akkor jön a bazdmegelés.
A Safari korunk Internet Explorere. -
róland
veterán
Nagyot változott a Microsoft, szinte teljesen eltűnt ez a "csak azért is másként csináljuk" hozzáállásuk. Sőt, mostanában elég korrekten fejlesztenek (pl. jelenelg a Linux legnagyobb hozzájárulói).
Konkrétan az új Edge esetében meg felismerték, hogy saját megoldásuk nem rúg labdába a piacon. Okosan beálltak a piacvezető termék nyílt platformja mögé és ahhoz járulnak hozzá. -
TGWH
őstag
Még nagyon régen olyanok voltak, hogy ie alatt nem is működött. Helyre kellett valahogy pofozni, sok idős, vagy hozzá nem értő ember is szeretné használni.
Azért hosszú idő telt el, nem foglalkoztam folyamatosan honlapszerkesztéssel, lehet már nem így van.
Most a minimál design a menő, arra meg könnyebb grafikát tervezni, lehet még külső program sem kell régen fireworks-el készítettem a képeket, azt sem tudom van-e még ilyen program 
-
Egyet tudok érteni martonx-el. Kísérletekhez javaslom ezt ez oldalt.
Azonban, az index-ekkel való játszadozáshoz, nem reklám célból, egy korábbi, már ebben a formában nem létező oldalamat tudom megmutatni, hogy tanulj belőle. Nézd meg a forráskódot.Egyébként ha az elsőnek javasolt oldalon beírod a bemutatott kódodat, látod te is, hogy bizony több sebből vérzik.
-
Nem is olyan régen csináltam hasonlót, itt megnézheted. Az egyik kép GIF-nek tűnik, de nem az. Nézd meg a forráskódot és láthatod, hogyan oldottam meg, szinte minden képnél meg van határozva, mennyi ideig jelenjen meg. Illetve azt is láthatod benne, hogy mikor kifogynak a képek, nem előről kezd, hanem visszafelé kezdi lejátszani.
Remélem valami ilyesmire gondoltál. -
martonx
veterán
Fogsz egy képet, ami mondjuk egy gif. Alapból elrejted (display: none; ). Ha várni kell megjeleníted. A megjelenítés 1 sor javascript.
document.getElementById('valami').style.display = 'block';
Ha pedig már nem kell várni, megint elrejted:
document.getElementById('valami').style.display = 'none';
Nem tudom, ez mennyire számít programozásnak, szerintem ennél egyszerűbb megoldás nincs.
-
Sajnos elvárás a csempék megfelelő sorrendezése is. Végül JS kellett hozzá (egész pontosan Java kód GWT miatt), de így ablaméret változáskor átrendeződik 1-2-3 oszlopba a szélességtől függően.
Új hozzászólás Aktív témák
Hirdetés
- i3-8100 + ASUS H310M alaplap + 8GB RAM egyben (félkonfig)
- Asztali PC , R5 5500 , RX 6700 XT , 32GB RAM , 512GB NVME , 1TB HDD
- Sony PlayStation 5 Fat 825 GB eredeti doboz, gyári kontroller
- Dell XPS 3K Érintős,core i7,16GB RAM,256-512GB SSD,ÚJ AKKU,ÚJ TÖLTŐ,Szép állapot
- AKCIÓ!!!Acer V3,FullHD core i5 6200u(4X2,8Ghz),8GBRAM,nVme
- Eladó szép állapotban levő Huawei P30 Pro kék 6/128GB 12 hónap jótállással!
- ÁRGARANCIA!Épített KomPhone Ryzen 7 7800X3D 32/64GB RAM RX 9070 16GB GAMER PC termékbeszámítással
- Azonnali készpénzes nVidia RTX 2000 sorozat videokártya felvásárlás személyesen / csomagküldéssel
- BESZÁMÍTÁS! Gigabyte B760M i5 14600KF 64GB DDR4 512GB SSD RTX 3080 10GB Corsair 4000D Airflow 1000W
- Samsung Galaxy S22 Ultra 128GB, Kártyafüggetlen, 1 Év Garanciával
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest