Ha a szám kiírása a probléma, arra van Math.round(). Ha 2 tizedes jegy kell, tipikusan felszorzod 100-al, azt kerekíted, egészre, aztán visszaosztod. Egyik lehetőségként. Talán van valami tizedes jeggyel paraméterezhető round is, de áttekinthetőség végett én inkább szorzok, kerekítek, osztok. Kényelmesebb a szememnek. Ha nem akarod, hogy túl hosszú legyen a string, amit a js beír, hát rövidítsd le. Ha nem szám, hanem string, ott a length, és a substring.

A maxlength pontosan arra való, hogy a user-t korlátozza, és azt a feladatát el is látja.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Köszönöm, ennek utána nézek. Egyébként igen, numerikus a lehetőség.

But who is watching the guardians?

console.log(Math.round((10/3)*100)/100) - rövidebben

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Hello,

Buta kérdés, de nem jövök rá. Ezen a template-n szeretnék olyat csinálni, hogy a Portfolio oldalon az egyes képekre kattintva betöltsön egy oldalt a jobb oldali div-be. (Ez elvileg a fh5co-main).
Akármit csinálok, csak betölti a külső linket. Hogyan kell ennek nekiállni?

Mutogatni való hater díszpinty

Javascript, Iframe, ezeknek néznék utána a helyedben.

Én kérek elnézést!

Köszi, közben skerült. .load lett a vége...

Még azt kéne megoldani, hogy a kedvenc Single File PHP Gallery-m menjen. Valamiért a .php-t nem futtatja le.

Mutogatni való hater díszpinty

Szenvedek position-nel, néhány tanácsnak örülnék.

Sztori röviden. Fekete háttér elé (bármilyen széles legyen) egy fehér alapú oszlopot raknék középre (az fix széles), és abba csempéznék bele felülről lefelé. Az első csempe mindjárt egy kép lenne az oldal tetején, ami teljes oszlop szélesség, és amire rámozgatnék feliratokat.

És ott el is akadtam. Valami nagyon jó hasznát venném egy átfogó szakirodalomnak a html renderer működéséről, mit is művel a position-ök kapcsán. Könyv lenne jó, videók suxx. W3 meg mozilla site-on amit találtam, hát, hagynak maguk után kívánnivalót a részletességet és miértet illetően.

https://jsfiddle.net/uyw10pz8/

A példában relative position-ing van mindenütt. A div-ek színes kereteket kaptak a felismerhetőséget segíteni (mégha a külső keret miatt kicsit szét is van csúszva). Relative position-nel nem tudom rámozgatni a headline div-et a main_pic div-re. Ha átrakok mindent absolute-ra, akkor pedig a main frame center pozícióját nem tudom megőrizni. Sőt, a main frame háttér színe is eltűnik, ami arra utal, mintha a div-ben már nem lenne semmi, pedig a színes keretek ugyan úgy ott vannak a fekete háttér előtt. Szóval nem értem. Ott vagyok, ahol a part szakad

Örülök tanácsnak is ezt a példát illetően, de ha valaki tud egy nagyon jó könyvet html pozícionálásról kvázi 3d-ben, az lenne az igazi segítség.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Ezt nem inkább css grid-del vagy flexbox-al kellene megoldanod? A jsfiddle nagyon dícséretes, már csak azt nem értem, hogy hogy kéne kinéznie? Egy képet még az elvárt állapotról tudnál készíteni?

Én kérek elnézést!

Próbálnám rácsúsztatni azt a headline-t a main_pic-re anélkül, hogy szétesne a színezés meg a középre pozícionálás jellege. Könyvekből alap css-ről ilyen 2005-ből találok könyveket. Valami nagyon elavultnak hatnak. Jól sejtem, hogy hiába pörgetem őket?

A grid-ről eddig ezt a blogot találtam. Javíts ki, ha tévednék, de ez a grid nem tűnik beágyazhatónak nekem. Olyasmi inkább, amit csak egy szinten használhatok. Ha egy div-ből grid konténert gyártottam, minden div abban grid cella, és egy cella nem lehet újra grid konténer is egyben. Tévednék? A blogban van egy könyv is javasolva, azt még beszerzem és elolvasom. Épp csak jó lenne előre tudnom, ha falnak szaladni készülök, mert többet remélek, mint amit találni fogok.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Nem gondolom, hogy hiába pörgetnéd. Az alapok abban vannak benne

But who is watching the guardians?

Természetesen végignéztem az érdekes részeket, de nem találtam meg benne a magyarázatot arra, amit egy jelenkori böngészőben látok.

Fiddle link

A példa egy kiragadott részlet, de látni szeretném a div-ek önálló viselkedését, ezért áll összesen 4 div-ből, és nem csak 2-ből. Leírva talán kicsit hosszú, de igazából csak egy elemi részlet a kérdés.

A linkelt példa szerkezete. Fekete body-ban auto margin-nal középre van úsztatva egy fehér div (#div_main_frame), és abban van egy befoglaló div (#div_pic_bckgrnd, piros keret). A #div_pic_bckgrnd keretnek van a másik 2 div-re. Tartalomként #div_main_pic (zold keret) és #div_head_line (kék keret) vannak benne. A linkelt példában position: relative van mindenütt.

Amit csinálni szeretnék. Rá szeretném úsztatni a #div_head_line-t a #div_main_pic-re valahova középre a tetejéhez. Régi időkben fogták a Photoshop-ot, és ráírták a szöveget a fényképre. Én css-el szeretném azt kiváltani.

Ahogyan próbáltam. Átírom a #div_head_line formázásában a position-t absolute-ra. (A linkelt példában ott van mindkét position, az absolute kikommentezve.) Azt várnám, hogy a befoglaló piros keret (#div_pic_bckgrnd) bal felső sarkába ússzon a kék keret.

És amit nem értek. A kék keret továbbra is ott van a zöld alatt. Mintha ugyan úgy a normál flow helyezné el. Miért nem úszott fel a befoglaló piros keret (#div_pic_bckgrnd) bal felső sarkába? Mi tartja a zöld keret alatt?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Sziasztok!

Egy oldalon több helyen is használom ugyan azt az ID-t, mert a CSS-ben a képeknél így oldom meg, hogy egyformák legyenek. Működő dolog, eddig is ment.
Viszont, ha szeretnék hivatkozni rá JS-ben, akkor csak az oldal első adott ID-je alatt lévő tartalmat éri el, a többit nem. Azt hogyan lehetne megoldani, hogy mindegyikre vonatkozzon?

Több ID tudtommal nem adható egy elemhez, ha pedig document.getElementsByClassName-ként hívnám be, akkor nem csinál vele semmit, mintha el sem érné.

Itt egy JSFiddle példa, hogy ha nagyon zavaros lennék: LINK

Előre is köszönöm!

But who is watching the guardians?

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.

class-t használj!
Több ugyan olyan ID nem is lehetne az oldalon, nem valid!

A class-t pedig valamiért nem éri el a JS - LINK

But who is watching the guardians?

Relative container pipa, direkt azért volt ott a #div_pic_bckgrnd.

Magát a div mozgatást komolyan azért nem csinálta meg, mert nem adtam meg neki a top:0; és left:0; -t Én kezdő amatőr azt hittem vannak beépített default értékek, mint például nullás minden, és hogy számíthatok arra

A segítséget köszönöm

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

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?

[ Szerkesztve ]

Én kérek elnézést!

Ha class-t gyűjtesz le, akkor gyűjteményed van. For-al átírtam neked feketére, a foreach-hez js-ben nem értek https://jsfiddle.net/e2zx450b/

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Az a helyzet, hogy ez egészen addig jó, ameddig szövegszínt módosítasz. Az én célom .style.filter = lenne, arra átírva pedig nem csinál semmit, sajnos. Akkor maradt az, hogy mindegyik kap egyedi azonosítót...

But who is watching the guardians?

A példa arra van, hogy megmutassam, be tudod gyűjteni class alapján az összes elemet egy gyűjteménybe, és rájuk tudsz hívni valamit. Ha olyasmit hívsz rájuk, ami illegal, az egy egészen másik probléma, és azt önállóan kellene kezelni. Adj fiddle-t arra a style.filter-re is.

De nesze itt egy példa arra is

[ Szerkesztve ]

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Roppant érdekes... Amint megcsináltam a példát rá JSFiddle-ben, ott jó és működik... Valami árulás történt itt, már csak ki kell deríteni, hogy mi. Minden esetre, köszönöm

But who is watching the guardians?

Na, most összeraktam működőképesen. Erre néhány alkalom után az összessel végrehajtja, csak a legelsővel nem...

But who is watching the guardians?

Nyakamba szakadt a font választás kérdése. Tanácsot kérnék benne.

Ami blogokat első nekifutásra találtam, némelyik taglalta, hogy ami fontok alapból megtalálhatóak asztali gépen és mobil platformon, azokból érdemes választani, mert azok gyorsabban töltődnek be. Aztán elkezdett felsorolni halom fizetős fontot. Találtam olyan gyűjteményt is, ami ezernyi fontot sorolt fel. Találomra 3-nak néztem utána. Egyikről sem sikerült semmit sem találnom, ami minimum gyanús.

Szükségem lenne egy útbaigazításra, létezik-e normális lista valahol fontokról, amik üzleti célra ingyenesek, és általánosan találhatóak meg valamennyi platformon?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

A "minden rendszeren megtalálható fontok" listájának a neve "web safe fonts". Nem túl hosszú a lista, és én magam nem vagyok benne biztos, hogy tényleg minden eszközön megtalálhatóak:

[link]

Ingyenes webes fontok listája kezdetnek:

[link]

Forget your troubles, c'mon get happy

A web safe fonts listán túl kicsit részletesebben mit jelent az, ha egy font "nem található meg" egy platformon? Képesek a böngészők automatán letölteni és cache-elni font táblákat?

Edit: Hirtelen átnéztem a web safe font listát az első linkeden a második link listájához képest, és olybá tűnik, nincs ott egyik sem. A web safe fontok egyike sem free üzleti célra? Hogy a fenébe csinálják a mai weblapok? Minden létező mobilos weblap üzleti licencet fizet

[ Szerkesztve ]

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

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)

Én kérek elnézést!

Köszönöm a tippet. Ahogy pörgetem lefelé az oldalt "paid/commercial" mindegyik

Meg amit hirtelen találtam, totál nemzetközi zűrzavar az eltérő szabályozások miatt. Örülök neki.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Edit: második nekifutás

Szóval köszönöm a tippeket. A free fontokat illetően van esetleg tapasztalat arról, hogy valamelyiket sűrűn használod, és nincs velük weblap betöltésnél túl sok lassulás? Vag yakár kérdezhetném úgy is, hogy amivel riogatják weben a népet, hogy lassú a töltés, tényleg előfordul az valaha valahol is?

[ Szerkesztve ]

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

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).

Forget your troubles, c'mon get happy

Szintén font kérdés, most kicsit elvontabb.

Tegyük fel, nem állítom be a fontot egy weboldalon. Csak nem nyúlok hozzá. Amit találtam, hogy a default jellemzően az Arial. Az akkor tud megváltozni, ha a user átállítja. Némelyik font non-profit használatra ingyenes, üzleti célra már nem az. Amin a buksit töröm, hogy létezhet-e nyilvánosan hostolt webfont, amiért utólag a "referer" logból megállapíthatóan csekket küldenek a külső website üzemeltetőnek? Technikailag nem lehetetlen. De történt már olyan valaha a gyakorlatban?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

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

Én kérek elnézést!

Sziasztok!

Valami történt, amit nem értek!

Csinálok most egy Weboldalt, tele numerikus beviteli mezőkkel. Ugyan az a Class az összesnél és a beállítások is az alábbiak szerint vannak: <input type="number" id="x13" value="0">. Most raktam le a 16-at és ez nem olyan. Az előző 15 elfogadja a fél értékeket (2,25), de ez nem. Amint nyomok egy entert, kiírja, hogy érvénytelen érték.

Illetve ha nem kapcsolok hozzá JS-t, az előző 15 enter nyomására nem csinált semmit, ez meg újra tölti az oldalt...

[ Szerkesztve ]

But who is watching the guardians?

Elb@sztam egy form lezárását...
Megoldva

[ Szerkesztve ]

But who is watching the guardians?

Elvileg vannak editorok, amik rád szólnak, ha olyasmit hibázol. Például a notepad++. De természetesen én sem használom

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Flexbox-nál létrehozom a konténert, azt bekonfigolom, dobálom bele a child div-eket, és azt várom, hogy a layout automatán helyre tegye őket. Nyugodtan alhatok, hogy az úgy jogos elvárás lesz, vagy kell még valami hiba jelenségre is figyelnem, például hogy mindegyik böngésző verziónak más hibajelenségei vannak a flex konténerrel / tartalommal?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Nyugodtan alhatsz, hacsak nem célod ősi böngészőket is támogatni.

Én kérek elnézést!

Nincs olyan célom. De legalább chrome és safari nem kellene problémás legyen.

Még valami a flex boxba "dobálásról":

<div id="flexcontainer">
<div id="content1">akármi</div>
<div id="content2">akármi</div>
<div id="content3">akármi</div>
</div>

Kb ennyi?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Igen. Ne zavarjon meg, hogy gyanúsan egyszerűnek tűnik

Én kérek elnézést!

Sziasztok! (itt is)

A form-mal kapcsolatban lenne pár kérdésem:

Adott az alábbi form:
https://jsfiddle.net/kceyLghv/

A mögöttes JS-t nem raktam bele, annyit csinálnak, hogy ha beütök bármit a keresőmezőbe, akkor megjelenik jobb oldalon a keresési feltételek törlése gomb (searchtext-clear-link) (ami kitörli a szöveget), mellette jobbra maga a keresőgomb (search-link).
Erre a keresőgombra van beállítva maga a kereső funkció. Keresés után pedig megjelenik bal oldalon egy vissza nyíl (search-exit-link), amivel ki lehet lépni a keresési felületből.

Szóval nincs a standard submit gomb, mert csak az input textre van szükségem, azzal pedig a meghívott függvény dolgozik.

A problémám az, hogy az első indításkor, és csakis a legelső indításkor ha belekattintok a keresési mezőbe és entert ütök (beállítottam, hogy ha üres a mező, akkor ne hívja meg a keresési függvényt, szóval ebben az állapotában semmit sem kellene csinálnia), akkor újratölti az oldalt.

Miután újratöltötte, azt látom, hogy a címmezőbe beírta a link végére azt, hogy ?#. (https://oldalcime.hu/?#)

Ha ott van a végén a ?#, akkor hiába ütöm az entert az üres mezőre, "jól működik", nem tölti újra az oldalt. És ha eleve úgy nyitom meg a lapot, hogy beírom az oldal címe után a ?# karaktereket, akkor sem tölti újra az enterrel.

Láttam, hogy a # karakter az az "üres" form action miatt lehet ott: action="#", mert ha ezt a részt kitörlöm, akkor a link végén csak a kérdőjel (https://oldalcime.hu/?) van.

Olvastam, hogy alapból úgy működik a form, hogy Submit után úrjatölti az oldalt. Ez meg lehet akadályozni: event.preventDefault();
Viszont ugye mivel nincs submit gombom, így nincs mihez hozzá kapcsolnom. Pedig szerintem az enter az üres keresési mezőbe pont a submit-ot triggereli, az "üres" action-t (action="#").

Szerintetek hogyan lehet ezt megoldani?

Esetleg mégis legyen egy submit gombom, és azt alakítsam át valahogy egy keresési ikonná, és annak adjak valahogy egy onclick tag-et?

Vagy eleve felesleges így a form, és elég lenne valami más input field (nem a textarea), ha már úgyis külön gombbal és függvénnyel dolgozok?

Köszi.

A form után szúrd be ezt a kódrészt:

<script>
  document.getElementById("mainSearch").addEventListener("submit", function(event) {
      event.preventDefault();
  });
</script>

Forget your troubles, c'mon get happy

Azt hiszem, megtaláltam a megoldást:
<form onsubmit="return false;">

Ezzel már nem jön elő a bug, és a keresésnél már a címmezőbe sem ír se # se ? karaktereket.

Így is jó. A lényeg, hogy submit eseménye a formnak van, nem a submit gombnak. Akkor is, ha nincs submit gomb.

Forget your troubles, c'mon get happy

Köszönöm, szinte egyszerre írtunk.

Egyelőre amit találtam, úgy tűnik, működik, de ha újra előjönne a bug, akkor kipróbálom az általad javasolt módszert is.

Köszönöm szépen (a magyarázatot is)!

[ Szerkesztve ]

Mindkét megoldás jó. Az én verzióm akkor jobb, ha több dolgot akarsz submitnál ellenőrizni. Például, ha csak akkor akarod megakadályozni a submitot, ha a mező üres. Kényelmesebb, és áttekinthetőbb beírni egy többsoros kódot egy eseménykezelő függvénybe, mint egy html obsubmit attribútumba belezsúfolni.

Forget your troubles, c'mon get happy

Köszönöm a tanácsot.
Egyáltalán nem akarok submit-ot használni, de ha új form "kerül a rendszerbe" (akár másik weblapnál is később), ahol viszont már használnám, visszajövök és megkeresem a válaszodat.
Köszönöm.

De miért ehhez form???
Hidd el, a keresés akkor is fog működni, ha nem formozol. És akkor nem kell meghágni az onsubmit-ot sem, sem azon aggódni, hogy mi lesz, ha több form is lesz az oldalon
Mert ha jól gondolom, úgyis a gomb nyomására küldöd el az inputban lévő szöveget a szerver oldalnak ajax-al.
Ehhez nem kell form

[ Szerkesztve ]

Én kérek elnézést!

Az ok prózai: a vásárolt HTML template-ben a keresőmező form-mal volt elkészítve, így azt vittem tovább.

Jól gondolod, pont úgy működik, ahogy írod (és ahogy írtam én is, csak hát nem tudtam röviden. )
És írtam azt is, hogy a form talán felesleges:
"Vagy eleve felesleges így a form, és elég lenne valami más input field (nem a textarea), ha már úgyis külön gombbal és függvénnyel dolgozok?"

Mit lehetne helyette? Így néz ki most (illetve már nem így, mert belekerült az onsubmit return false is): https://jsfiddle.net/kceyLghv/

Flexboxnak tudok valahogy felső margin-t adni? A paraméterei között nem találtam meg. Vagy rakjak fölé külön div-et fix magassággal?

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Mondjuk egy sima div a form helyett?

Én kérek elnézést!