- Google Drive
- A franciáknak elege van abból, hogy minden gyerek mobilozik
- Szabadulnak a kínai eszközöktől az amerikai szolgáltatók, de ez sokba kerül
- Sokat fogyaszt az AI, egyre több az adatközpont, kell az atomenergia
- Windows 11
- Ingyenes vagy akciós szoftverek
- Apple Mac OS X
- Mesterséges intelligencia topik
- Gmail
- Synology NAS
-
IT café
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Silεncε
őstag
A serverless egy architektúra, igazából arról van szó, hogy nem a hagyományos értelemben vett backend szervert írsz, hanem a business logicot megírod mondjuk JS függvényekben, majd ezt odaadod a felhő providernek, hogy legyél szíves futtatni. Igazából neked az üzemeltetés részen semmit nem kell tenni, a provider intézi a scalinget, stb. Erre utal a serverless név.
-
Sziasztok!
22-es csapdába estem.
Adva van egy mező, nevezzük DIV-nek. Az alap CSS paraméterezése szerint ez asztali környezetbendisplay: block;
, míg mobil környezetbendisplay: flex;
.Csakhogy, ez a mező az oldal betöltésekor
display: none;
módon eltűnik és csak egy gombnyomással lehet visszahozni. A probléma a következő, JS oldalról:document.getElementByID("DIV").style.display = "block";
- ebben az esetben ugye megjelenik és asztali felületen kiváló, csak ugye BLOCK lesz az mobilnézetben is. Ugyan ez van természetesen fordítva is.Szeretnék egy olyan megoldást, ahol a JS figyelembe veszi, hogy a Weboldal mobilnézetbe van-e, vagy sem és eszerint jeleníti meg az adott mezőt. Van erre megoldás?
Előre is köszönöm!
[ Szerkesztve ]
But who is watching the guardians?
-
Taci
addikt
Én a mobilos dolgokra egészen egyszerűen ezt használom:
if (screen.width < 600){
}
Aztán persze ezt az értéket (szélesség pixelben) finomhangolhatod magadnak, de én is csak találtam, és nekem tökéletesen működik chrome dev tools-ban a különböző előre beállított képernyőfelbontásokra.
-
nevemfel
senior tag
Én így oldanám meg a mező elrejtését, és az eredeti display visszaállítását, legyen az block vagy flex, vagy bármi más:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#walami {
display: flex;
}
</style>
</head>
<body>
<form>
<input type="text" id="walami">
</form>
<script>
document.getElementById("walami").style.display = "none";
</script>
<input type="button" id="bazinga" value="Bazinga!">
<script>
document.getElementById("bazinga").addEventListener("click", function(event) {
document.getElementById("walami").style.display = "";
});
</script>
</body>
</html>Remélem, érthető a példa.
[ Szerkesztve ]
Forget your troubles, c'mon get happy
-
martonx
veterán
Az én javaslatom, ami szerintem A megoldás, még ha elsőre komplexnek is hathat a js-es barkácsmódszerekhez képest:
Egyrészt, ha mindent jól csináltál, akkor css media query-ket használtál, azaz tisztán css-ben dől el, hogy ez a div block vagy flex (ezen kicsit elmosolyodtam, hiszen a flex pont erre való, hogy ne kelljen media query-ket se használni, de te tudod, hogy miért jó hol block, hol flex-ként használni, szóval nekem már eleve itt bűzlik valami ).
A tisztán css-es megoldásból kiindulva, csak annyit kell tenned, hogy csinálsz egy css class-t, amit hívj mondjuk .hidden-nek, amiben egyetlen egy rule van: display: none !important;
Alapból oldal betöltésnél ezen a div-en legyen rajta ez a hidden class. Ezzel elérve, hogy betöltéskor ez az elemed nem fog látszódni. Ha minden igaz, akkor ezt eddig is így csináltad, ha viszont nem, akkor máris nem hiába koptattam a billentyűzetet.És amikor gombnyomásra vissza akarod hozni láthatóvá, akkor elég lesz csak ezt a class-t leszedni róla
document.getElementById("bazinga").addEventListener('click', event => {
document.getElementById("walami").classList.remove('hidden'); // fejből írtam, nem biztos, hogy hibátlan...
});és voilá, ekkor máris a tisztán css-ben, az adott szabályoknak megfelelő display lesz rá érvényes és így nem kell js-ben találgatni, hiszen a js nem erre való (függetlenül attól, hogy js-ben is meg lehet oldani). Separation of Concerns.
Én kérek elnézést!
-
coco2
őstag
Kérdés
display: none / block
-hoz,visibility: hidden / visible
-t használni helyette fog felvetni problémákat?@Silεncε:
Köszönöm a tippet. Ezeken a marketing vicceken én folyton elámulokកុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។
-
Húh, köszönöm mindenkinek a válaszokat, három remekül működő megoldás is született.
Azonban, mivel az oldal felépítésem úgy néz ki, ahogy lényegében martonx leírta, ezt a megoldást választom.But who is watching the guardians?
-
martonx
veterán
Szuper! Ráadásul ezzel lett egy könnyen újrahasznosítható megoldásod a hidden class-al
Viszont légyszi majd azt azért gondold át, hogy biztos jól használod-e a flex-et, mert nagyon gyanús, hogy csak mobilon flex, egyébként meg block az elem display propertyje.Én kérek elnézést!
-
-
-
Taci
addikt
Keresés eredményéhez akarom kijelölni a találatokon belül a keresett szavakat.
Erre a<mark>
tag-et használom.function markText(textContainer, textToMark){
return textContainer.replace(textToMark, "<mark>" + textToMark + "</mark>");
}
Így viszont nem tudom kezelni a kis- és nagybetűket.
Pl. arra keresek, hogy "máté". A szerver visszaadja találatnak a "Máté"-t (nagy kezdőbetűvel) tartalmazó találatokat is (ehhez kapcsolódóan amúgy a PHP topikban van egy nyitott kérdésem, és nagyon összezavarodtam vele, ha valakinek magabiztos tudása van a keresés mikéntjével PHP-ban/SQL-ben, kérem, nézzen majd rá), viszont a JS csak azokat jelöli be, amik pontosan megfelel a keresésnek.
És nem tudom, hogyan kellene úgy módosítanom a fenti függvényt, hogy ha a szövegben az van, hogy "Máté" (nagy kezdőbetű), a keresési szöveg az "máté" (kis kezdőbetű), a találatban lévő sztringben a nagy kezdőbetűs Mátét is vegye körbe <mark> taggel. (Ha csak a kezdőbetűt kellene figyelni, könnyű lenne, viszont ugye lehet olyan találat is, ahol csupa nagybetű, vagy csak a 3. karakter nagy stb. És nekem az kellene, hogy kijelölje, bárhogyan is találja meg a "máté"-t: máté, Máté, MÁTÉ, mÁtÉ, MáTé stb.)
Lehet, valami nagyon egyszerű, és amint elküldöm a hozzászólást, eszembe is jut - de egyelőre nem jövök rá.
Hátha ti már találkoztatok ilyen helyzettel.
Köszi.
-
Taci
addikt
Igen, ezzel valóban a jókat jelöli ki, viszont az a gond továbbra is, hogy ha csupa kisbetűvel írom be a keresőbe a szót (pl. "máté"), akkor hiába szerepel az eredeti tartalomban nagy kezdőbetűvel (pl. "Máté"), a keresési találatokban átírja a keresésben megadott formára.
Ha pl. a textContainer az, hogy
"Alszik Máté, mert elfáradt."
, a keresési kifejezés pedig az, hogy "mÁtÉ", akkor bár kijelöli a megfelelő sztringet, viszont ez lesz a megjelenített sztring:"Alszik mÁtÉ, mert elfáradt."
Így csináltam meg, legalábbis itt járok benne:
https://jsfiddle.net/j7qt4bva/Ha "normál kifejezésre" keresek (pl. "máté" vagy "apple"), tökéletesen működik, de rövidebbekre (pl. "a" vagy "az") végtelen cikulsba kerül valahol.
(Amúgy sanszos, hogy erősen túlbonyolítva csináltam meg...)
Az alapötlet az, hogy a keresett szó pozícióinak megkereséséhez csupa nagybetűssé alakítom a szöveget, amiben keresek, és a keresett szót is. Aztán ha megvan a pozíció (vagy pozíciók, több találatnál), akkor egy tömbbe szétvágom az eredeti sztringet a találat pozíciók végén. Majd ezeken belül megcsinálom az öleted alapján (RegExp "i") a <mark> tag hozzáadását úgy, hogy a már megszerzett pozíciók alapján kiszedem az eredeti karaktereket (így meglesz az a változat, hogy a kis- és nagybetűk az eredetiben vannak).
Aztán ezeket a tömbelemeket összefűzöm újra, és ezt adom vissza.Csak valahol rövid(ebb) karakterszámnál végtelen ciklusba futok.
-
martonx
veterán
Netán ha kaphatnánk működő konkrét példát html-el? Az mondjuk így ránézésre látszik, hogy amit tippre pár sor kóddal meg lehetne oldani, te 29 teleírt sorból oldottad meg.
Szóval komolyabban bele se néztem, mert ez így biztos, hogy nem jó és nem működő példa híján, hogy az 5 sor helyett, 29 sorban hol a hiba....Én kérek elnézést!
-
Taci
addikt
válasz martonx #8617 üzenetére
Persze, jogos minden gondolat.
Azért nem írtam eddig, mert egyszerűsítettem, mert az előző változat már ránézésre is túlbonyolított volt.
Így talán egy fokkal egyszerűbb, és van benne példa is:
https://jsfiddle.net/4awv16hg/3/ (konzolba logolással)
https://jsfiddle.net/4awv16hg/4/ (konzolba logolás nélkül, ha zavaró lenne a sok plusz sor)Itt csak 1 elemen futtatom,
if
használatával, arra szépen lefut. Amúgywhile
-lal akarom (mert ha ez a függvény meghívódik, akkor 1 találat már biztosan van, szóval egyszer mindenképp le kell futnia), csak az a baj, ha átírom az if-et while-ra, akkor lefagy egy időre (felteszem, ismét valahol infinite loop) (logolásnál látszik, hogy valami nem stimmel a loop-ban), a logolás nélküliben pedig a konzolban írja, hogy "Invalid string length at markText".Szóval valószínűleg a ciklusban hibázok valamivel, mert a logban látszik, hogy a textContainerLocal elkezd "önmagába írni" már azután is, hogy elvileg megtalálta mindkét bejegyzést.
-
dqdb
nagyúr
Ajánlott előtte a
textToMark
tartalmának escape-elése, ha véletlenül regex számára speciális karaktert tartalmazna.var textToMark = "a*b*c";
var textContainer = "xxxx A*B*C yyyy a*b*c zzzz";
var escapeRegex = new RegExp(/[.*+?^${}()|[\]\\]/g, "g");
console.log(textToMark);
var textToMark = "(" + textToMark.replaceAll(escapeRegex, "\\$&") + ")";
console.log(textToMark);
var replaceRegex = new RegExp(textToMark, "gi");
console.log(textContainer);
textContainer = textContainer.replaceAll(replaceRegex, "<mark>$1</mark>")
console.log(textContainer);tAm6DAHNIbRMzSEARWxtZW50ZW0gdmFka5RydIJ6bmkuDQoNClOBc4Ek
-
Taci
addikt
Készen is van az "ultimate kereső kijelölő"
https://jsfiddle.net/4awv16hg/16/
Rengeteg bug volt benne, de most már javítva vannak.
Illetve majdnem mind, mert ha vesszőre (",") keresek, meg infinte-loop-gyanús, pontnál (".") pedig kijelöl mindent mindenhol.
De látom, írt dqbd még valamit, ha visszajöttem, átnézem.
Köszi.
[ Szerkesztve ]
-
cstomee
tag
Csak egy észrevételt ha megengedsz... Túl hosszasan írod le hogy mit szerenél ahelyett hogy 4-6 kulcsszót beírnál a google-be. pl: javascript mark text non case sensitive
jsFiddle
Nem tudom hogy ez kell e neked mert őszintén bevallom nem olvastam végig amit írtál, TLDR;.
Szerk.:
Időközben a példa mondat majdnem hasonló lett Egy kicsit bonyi a tiéd, de ha működik akkor jó ...[ Szerkesztve ]
-
Taci
addikt
Ah, amit én ~50 sorban sem tudtam tökéletesen megoldani, te rendbe raktad ~10 sorban, úgy, hogy annak is a fele még logolás is...
Igazából kell még egy kis idő, hogy felfogjam, mi is történik itt... (Értve ezalatt a
$1
-et és a zárójelezést avar textToMark
-nál stb..)Ismételten köszönöm szépen mindenkinek!
@cstomee: Amikor ide írok, már túl vagyok nagyon sok keresésen, kutakodáson, utánajáráson. Próbálom ennek a fórumnak az eszét csak akkor igénybe venni, ha már tényleg nem találom a megoldást saját erőből.
És "sajnos" élettapasztalat, ha valamit már nem írok alaposan körbe az elején, akkor később magyarázkodhatok és pontosíthatok, elvesztegetve sok időt és energiát.
De köszönöm az észrevételt mindenképp, igyekszem a jövőben kevésbé regényesre ereszteni![ Szerkesztve ]
-
martonx
veterán
Egy kicsit tovább szépítve cstomee példáját: Edit fiddle - JSFiddle - Code Playground
Taci, az nem baj, hogy értelmesen leírod, hogy mit szeretnél, mert sokszor olyankor jön rá az ember, hogy még megfogalmazni sem tudja, nem hogy megvalósítani.
De egy működő jsfiddle példa száz szónál is többet érÉn kérek elnézést!
-
Taci
addikt
válasz martonx #8624 üzenetére
Na basszus, nekem pont ott törte a sort a böngésző cstomee válaszánál, hogy úgy tűnt, a "jsFiddle" még az előző linkhez tartozik, így fel sem tűnt, hogy az egy külön belinkelt példakód... Munka utána azonnal nézem is, a tiéddel együtt, martonx.
És megfogadom a tanácsot, ha újra elakadnék, linkelek példakódot mindenképp.
-
Sziasztok!
Értetlenül állok egy probléma előtt.
Készítettem egy témaváltó kapcsolót. A kapcsoló egy JS-t hív be a PHP fájlba, módosítja a szövegszínt, hátteret és a képeket is. Mindezt megfejeltem egy Local.Storage megoldással is, hogy megjegyezze a felhasználó kiválasztását és aszerint töltsön be legközelebb is az oldal.
Mindez remekül is működik, teszi a dolgát. Legalábbis, tesztoldalon.
Miután elkészült, beintegráltam ezt a kapcsolót a fő oldalba is (egyelőre csak Localhost). Ott már nem igazán akar menni a dolog. A váltás megtörténik, kivéve a képekkel. Ezen felül nem írja át a Local.Storage értékét. Ha a tesztfájlal módosítom, akkor a fő oldalon is megtörténik a módosítás, tehát hivatalosan mindent lát és használ is. Éppen ezért nem értem a dolgot.
Mi okozhatja, hogy ugyan az a funkció, ugyan olyan ID alatt lévő képekkel egyik oldalon megy, másikon nem? Illetve, hogy látja és használja is a Local.Storage-t mindkettő, de csak az egyik képes módosítani?
Mindkét oldalon PHP include-al van meghívva a komplett kapcsoló és JS include-al a hozzá tartozó JS.
Előre is köszönöm a válaszokat!
Ui.: JSFiddle elmarad, mert nem ott van a probléma, illetve PHP-t nem futtat.
[ Szerkesztve ]
But who is watching the guardians?
-
-
coco2
őstag
A js/php kommunikációt ha jsonokkal oldottad meg, én ellenőrizném a típus konverziót. Futottam már bele, hogy tömbnek hittem valamit, de a php objektumra fordította végül, és a js tömbként semmit sem látott belőle (gyakorlatilag nem ment át adat).
កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។
-
-
coco2
őstag
Ahogy @martonx említette, az ilyesmivel már mindenki maga szenved. Valami elírás lesz.
Az írás áll abból, hogy ráhívsz a local storage függvényre kulcs és adat párossal. Azokat logba tudod dobni. Debug jelleggel beraksz oda azonnal egy visszaolvasást is. Ha nem egyezik a kimenet a bemenettel, akkor elírtad a függvény nevet Ha egyezik, de a bemenet nem stimmel, akkor a programot írtad el.
កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។
-
martonx
veterán
A localStorage írás nem tud hibázni. Ráadásul faék könnyen ellenőrizheted, hogy mi van éppen a localstorage-ban, sikerült-e az írás.
Mivel semmit nem tudunk a rendszeredről, ezért azt sem tudhatjuk, hogy esetleg van-e valami ultraspéci jogosultsági probléma. Vagy hehe, a kódod el sem jut az írásig, csak te azt hiszed, hogy eljut. De ezt is csak te tudod ellenőriznilocalStorage.setItem('myKey', 'myValue');
Ha ez mindenkinél működik, csak éppen te vagy az egyetlen, akinél nem, akkor szerinted ebben ki tud neked segíteni?
Én kérek elnézést!
-
&martonx
Köszönöm a válaszokat, utána nézek a dolognak. Csak egy apró dolog még:
Ha nem egyezik a kimenet a bemenettel, akkor elírtad a függvény nevet Ha egyezik, de a bemenet nem stimmel, akkor a programot írtad el.
Mint említettem, ugyan azt a fájlt hívják be pontosan ugyan azzal az include kóddal.
But who is watching the guardians?
-
coco2
őstag
Ne vegyél rá mérget, hogy az ugyan az az tényleg ugyan az. Website-on ugyan azt a path-ot használod file behívásra, épp csak egy régebbi file verziót raktál oda, máris kész a "nem ugyan az" esete. Mikrokód-hibás-ez-a-vacak-CPU-filozofálás helyett már rég teleszórhattad volna az egész kódot console.log()-al orrvérzésig, és első nekifutásra kiderülne, mi sikerül félre.
កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។
-
Taci
addikt
válasz cstomee #8622 üzenetére
Belefutottam egy olyan hibába ezzel a kóddal, hogy amikor több szót is szeretnék kijelölni, és az egyik ezek közül a
mark
része (pl.ma
, vagy simán csak aza
betű), akkor a<mark></mark>
-ban lévő karaktereket is átírja, ezzel elrontva az egészet.A gond itt nyilván az, hogy már ugyanarra a sztringre hívom rá újra a kijelölő függvényt, amiben már benne vannak a mark tag-ek.
Ki lehet valahogy kerülni, hogy a kijelölő mark tag-eket is átírja? Mármint valami egyszerű módon.
Köszi.
-
Taci
addikt
Köszönöm szépen!
Ez a megoldás tuti eszembe nem jutott volna soha, főleg úgy, hogy csak sokadjára átnézve értettem meg, mi és hogyan is működik benne.Az escape-elést pedig már előtte megoldottam, ami keresőszavak a tömbbe bekerültek, azok már "tiszták".
Köszönöm még egyszer.
-
Chrystall
senior tag
Ha azt akarom, hogy Streaming videó reklámja ne álljon le ha átmegyek másik Tab-ra a böngészőben, akkor mit kell a konzolba beírni a fejlesztői eszközöknél? Az onvisibilitychange-el kellene mókolni valamit nem? Valaki tudna tippet adni?
-
Sziasztok!
Elméleti kérdést tennék fel, tehát nem kérek kódot, példát vagy iyesmit.
Vannak olyan játékok, hogy például elindul egy lézersugár és különböző tükrök módosítják annak útját, ha a felhasználó oda mozgatja az adott elemet. A kérdés az lenne, hogy egy ilyesmi számítás / megjelenítés kivitelezhető HTML + JS -el?But who is watching the guardians?
-
Taci
addikt
Egyből a biliárd játékok jutottak eszembe, és találtam is még tutorialt is hozzá:
JavaScript + HTML5 GameDev Tutorial: 8-Ball Pool Game
Van forráskód is, illetve maga a játék is a leírásban szereplő linkek alatt. -
Köszönöm a példát. Ez már okot ad, hogy bízzak benne, minden lehetséges
But who is watching the guardians?
-
-
-
Pala
veterán
Nézd meg YT-on vagy akárhol, hogyan kell egy Pong játékot canvasra leprogramozni, onnan tudsz meríteni ötleteket, praktikákat. Azért a Pongot említem, mert ott a falról/paddle-ről visszapattanó labda valamelyest párhuzamba állítható az általad említett lézeres-tükrös koncepcióval.
Én írtam játékot canvasra, arra készülj fel, hogy ez javarészt geometria + algoritmizálás.
[ Szerkesztve ]
-
Új hozzászólás Aktív témák
- The Division 2 (PC, XO, PS4)
- Google Drive
- Redmi Note 13 Pro 5G - nem százas, kétszázas!
- Foxpost
- Helldivers 2 (PC, PS5)
- Raspberry Pi
- Milyen monitort vegyek?
- antikomcsi: Való Világ: A piszkos 12 - VV12 - Való Világ 12
- Bugok, problémák a PROHARDVER lapcsaládon
- Konzolokról KULTURÁLT módon
- További aktív témák...
Állásajánlatok
Cég: Ozeki Kft.
Város: Debrecen
Cég: Promenade Publishing House Kft.
Város: Budapest