- Hamarosan megkezdődik a nubia 2,8K-s táblagépének szállítása
- Barátokká váltak az eddig rivális AI-óriások
- ASUS blog: Ideális olcsó utazós gép lett az új Vivobook S14
- Az Aura Displays hordozható monitorhármasa jól felturbózhatja a produktivitást
- Dual Mode-os IPS monitorral adott magáról életjelet a Gigabyte
-
PROHARDVER!
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
-
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.
-
Taci
addikt
Amit belinkeltél, ez egy CSS-ben összerakott "ablak". Viszont az alert() függvény az nem ez.
https://developer.mozilla.org/hu/docs/Web/API/Window/alert
Kipróbálható példával: https://www.w3schools.com/jsref/met_win_alert.aspAttól függ, hol és mire szeretnéd használni. Ha csak egy üzenetet megjeleníteni a weblapodon, ott csak a képzeleted szab határt, hogy milyen ablakot, animációt stb. készítesz.
Ha a beépített alert() függvényt akarod használni, akkor nincs nagy nyújtózkodási felületed, cserében viszont 1 sorban megvan hozzá a kódod. -
Taci
addikt
válasz
Silεncε
#8506
üzenetére
Köszönöm a részletes választ.
És persze elrontottam a kérdést, rossz példát hoztam fel, mert a gombokon, elemeken lévő onclick-függvényhívásokra akartam volna rákérdezni - azért is hoztam a félkövérre állítós példát mellé.
Szóval arra irányult volna eredetileg a kérdés, hogy van-e hátránya annak, hogy ha
onclick-ként állítom be magában a HTML kódban a gombra, mit csináljon (függvényhívás), azzal szemben, ha a gombnak csak meg van adva az osztály pl. hogyclass="btn-toggleDarkMode", aztán egy külső JS-ben pedig definiálva van hozzá egyaddEventListener, és ott történik a JS hívása?Nyilván szebb, tisztább a kód, ha csak egy class van megadva a gombnak, viszont emiatt ugye több kódolás is a háttérben.
A T-s dologra pedig nem reagálok.
-
Taci
addikt
Sziasztok!
Van annak valami hátránya, ha a HTML-kód tartalmaz direktben JS-hívást?
Sok oldal forrásábán találok
<script></script>tageket, viszont soknál pedig "el vannak rejtve".
Pl. itt a szerkesztőben a félkövérre állítás gombja:<button type="button" class="btn btn-light" title=""data-tmce-toggle="bold" data-original-title="Félkövér"><span class="fas fa-bold"></span></button>Itt ha jól sejtem, a
data-tmce-toggle="bold""mögött" van a JS.Melyik a jobb megoldás? Már ha jobb bármelyik is.
Ha most megnézem a kezdőlapom kódját, ott van az elején pl. hogy:
<script>setDarkModeFromLocalStorage();</script>Ez jelent bármilyen hátrányt? Támadhatóbb az oldal emiatt?
Ha esetleg igen, mi a jó mód a "javításra"?Köszi.
-
Taci
addikt
Jobb megoldás híján maradtam transform-piszkálásnál.
Én így oldottam meg, ha esetleg később valaki ilyen problémával találkozna:
function scrollSidePanelScrollContent(yToScroll){var sidePanelScrollContent = document.getElementsByClassName("scroll-content")[0];var transformCurrentValue = sidePanelScrollContent.style.transform;var translate3DValueOfYpx = transformCurrentValue.split(",")[1];var translate3DValueOfY = translate3DValueOfYpx.replace("px", "");var scrollToY = parseInt(translate3DValueOfY) + yToScroll;leftSidePanelScrollContent.style.transform = "translate3d(0px, " + scrollToY + "px, 0px)";}(Nyilván profibban is lehet, de így átlátható, mit-miért, alapnak tökéletes lehet.)
Ha valaki azért tudja a "rendes" megoldást erre a problémára, írjon majd.
Köszi. -
Taci
addikt
Sziasztok!
(Bocsánat, csak ilyen hosszan leírva tudom elmagyarázni, mi is a probléma.)
A template-ben amit használok (Bootstrap-alapon), van egy JS, ami a scroll-ozásért felel:
smooth-scrollbar.jsEzeket az infókat látom róla benne kommentelt sorokban, hátha segít beazonosítani, hátha valami általánosabb JS:
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License")
* cast `I.Scrollbar` to `Scrollbar` to avoid error
*
* `I.Scrollbar` is not assignable to `Scrollbar`:
* "privateProp" is missing in `I.Scrollbar`
*
* @see https://github.com/Microsoft/TypeScript/issues/2672Ahogy látom, ez a szkript a sidebar-ban van használva. Úgy találtam rá, hogy van a sidebar-ban pár elem, ami
data-toggle="collapse"segítségével "bont ki" és "zár össze" tartalmakat (hogy több/kevesebb tartalmat mutasson), és most jött elő a következő hiba:Ha a sidebar alján lévő gombbal (
data-toggle="collapse") bontom ki a tartalmat, és legörgetek a kibővített lista aljára, és az ott lévő gombbal bezárom ezt a listát (szinténdata-toggle="collapse"), akkor nem scroll-oz vissza, és ha mondjuk egy oldalnyi plusz tartalmat mutatott pluszban, és most azt zárom be, akkor a sidebar kvázi üres lesz, mert a tartalmat már elrejtette, viszont az összezárt tartalom feljebb van, és már csak az üres területet mutatja. Aztán amint egy picit is scroll-ozok, ugrik egy hathalmasat, pontosan onnan folytatva, ahol a kibontás előtt állt.Ezen a ponton kezdtem el keresgetni, mi-hol is történik, és ekkor találtam rá, hogy a
smooth-scrollbar.jsvégzi ezt a scroll-ozós számításokat.Azt találtam, hogy létrehoz egy
scroll-contentnevű class-t/osztályt, aminek folyamatos számítások alapján állítja be a transform stílust, konkrétan ezzel mozgatva a tartalmat, srollozás gyanánt.Ha a tetejére scroll-ozok, akkor:
<div class="scroll-content" style="transform: translate3d(0px, 0px, 0px);">Ha a jelenlegi ablakméret aljára, akkor:
<div class="scroll-content" style="transform: translate3d(0px, -291px, 0px);">
Ha kibontom a tartalmat, és az aljára scroll-ozok, akkor:<div class="scroll-content" style="transform: translate3d(0px, -988px, 0px);">
Tehát kb. 700 pixellel lejjebb visz/vagyok.Aztán itt jön a probléma, mert amikor összezárom a tartalma a
data-toggle="collapse"segítségével, akkor konkrétan lent hagy az alján,-988px-en marad a transform, míg a tartalom már azt a kb. 700 pixelt visszazárta, így ott marad kb. 700 pixelnyi üres terület.
Aztán ha egy picit is görgetek felfelé, akkor nem-988px-elről kezdi felfele a görgetést, hanem az azelőtti értékről, a-291px-ről.Szóval az a változó amit figyel, hogy meddig tart a tartalom alja, az már visszaállt a helyes értékre, a
-291px-re, viszont atransform: translate3d()-vel nem "megy utána".
Ezért arra gondoltam, hogy oké, akkor "utána küldöm" én:document.getElementsByClassName("scroll-content")[0].style.transform = "translate3d(0px, 0px, 0px)";És itt jött az a gond, hogy alapból nem akartam ezzel sokat vesződni, mert akkor mindig azt kéne néznem, hogy honnan indult a kibontás, mennyi pixelről, és oda küldeni vissza. Ehelyett inkább egyből a tetejére dobtam vissza (0px, 0px, 0px).
Viszont itt láttam, hogy hiába a transform, attól még a
-291pxvan bejegyezve, hogy ott állt meg legutóbb a scroll-ozás, így hiába dobom a tetejére, ha kicsit görgetek, újra-291px-elről folytatja.Van valakinek tapasztalata ezzel esetleg? Meg lehet ezt oldani valami egyszerű módon?
Remélem, ez valami általánosabb JS (bár én sosem láttam még), és esetleg más is találkozott már ilyen "jelenséggel", így nem túl specifikus a kérdésem.Köszi!
-
Taci
addikt
válasz
martonx
#8392
üzenetére
Ismételten köszönöm szépen, innen már minden tiszta, rajtam áll csak, köszönöm a türelmet és a sok választ!
@nevemfel: Köszönöm a tippet. Csináltam infinite scroll-t, egyszerre 4 elemet tölt be, aztán a a 4. tetejéhez érve újabb 4-et és így tovább. Csak abban nem vagyok most biztos, hogy az összeset letölti-e akkor is, ha mint az őrült scrollozni kezdek lefelé. De mivel én csináltam, és olyat nem raktam bele, hogy ha már nincs képen, ne töltse tovább, ezért biztosan letölt mindent, nem áll meg. De akkor beleírom ezt is. Köszi.
-
Taci
addikt
válasz
martonx
#8390
üzenetére
Köszönöm a linket, úgy látom, ez (elsőre) egy nagyobb lélegzetvételű téma, de érdekel, és hátha valóban ez a jó megoldás, úgyhogy mindenképp végig olvasom és értelmezem.
Meg ő tudja is magáról, hogy szar a netje és türelmesen kivárja
Ezt azért tudjuk, hogy sajnos nem (mindig) így működik.A CDN-téma viszont teljesen ismeretlen számomra. Van esetleg ajánlott szolgáltató? Jó lenne, ha üzemelne még jó pár évig, és nem baj, ha fizetős, csak legyen próba verziója, hogy tesztelni tudjam.
Köszi!
-
Taci
addikt
Igen, köszönöm, ez a megoldás egy része lehetne az elejének, hogy minden felhasználó megkapja a kisebb felbontású képet.
Viszont utána a lassú kapcsolaton lévőknél annak nem lenne értelme, hogy még azoknak a képeknek a nagy változatát töltse, amiken már rég túlpörgetett, miközben az újak, amik már szem előtt vannak, már töltődni kellene, de még mindig a korábban már túlpörgetettek nagyobb változatát tölti.
Ezért gondoltam egy szétválasztásnak sebesség szerint.
-
Taci
addikt
válasz
martonx
#8375
üzenetére
De valahogy akkor is tudnom kell, hogy melyik kliensnek adjam a lebutított (460x230-as) képet, és melyiknek a normál (1000x500-as) képet. (Akár saját tartalommal, akár máshonnan.)
Nem akarok én persze sebességméréssel bajlódni, egyetértek veled teljesen, de akkor hogyan tudom egyszerűbben ketté ágaztatni ezt, hogy a lassabb ezt kapja, a gyorsabb meg azt? Rendszer szinten van definiálva valami változó/függvény, amit ehhez fel lehet használni?
Pl. egy mobil rendszer (Android, iOS) tudja, hogy milyen kapcsolaton van. És a Windows is. A böngészők tudják? Meg lehet kérdezni tőlük? Ha igen, hogyan? -
Taci
addikt
martonx és sztanozs: Köszönöm a tanácsokat, utána nézek ezeknek a megoldásoknak.
Azt még meg tudnátok mondani, a lap betöltésének melyik pontján tudom mérni a sebességet úgy, hogy a lap más elemeinek töltése ne kavarjon be? Mert így most csak az első teljes betöltés utánra tudok gondolni, de jó lenne még az elemek töltésének megkezdése előtt, hogy csak akkor kezdje el, miután sebességet mértem. Ezt a JS-hívást hova kell raknom, vagy hogyan kell meghívnom, hogy így működjön? Köszi.
-
Taci
addikt
válasz
martonx
#8366
üzenetére
Ezt nem értem.
Mármint azokat a képeket egyáltalán nem célom tárolni semmilyen formában. Viszont ha nem tárolom, átméretezni sem tudom őket. A megjelenített méreteit meg tudom változtatni, így át tudom "méretezni", de ettől a fájlméret még nem változik, nekem pedig most csak az számít. (Bár szerintem egyről beszélünk, csak én vagyon nagyon fáradt.)Ez a példa amit írtál azt jelenti, hogy letöltöm, átméretezem, aztán hivatkozok rá, hogy honnan van(?) (&source=).
Vagy valahogy mégis meg lehet oldani, hogy a kliens úgy kapjon kisebb felbontású (és így fájlméretű) képet, hogy én ezt nem tárolom? Ez lenne a "/kepatmeretező?width=460&heigh=230"? Egy kód szerver oldalon (php)? Hogyan működik? Minden képletöltésnél átméretez, és azt "adja oda"? De akkor minden egyes kép minden egyes letöltésekor ez lefut és dolgozik? Letilt a szolgáltató.
Ezt optimalizálni úgy lehetne, hogy tárolom az átméretezett képeket, de ez nem opció.Kérlek, írd le picit pontosabban, milyen megoldásra is gondolsz. Vagy ha van neve a megoldásnak, az is elég, ha megírod, és rákeresek. De egyelőre ez így nem világos, mert az előbb végig logizákozott vonal forráspazarlásnak tűnik csak.
Köszi.
-
Taci
addikt
válasz
martonx
#8362
üzenetére
Nem tárolok egyetlen egy képet sem (csak a blank, "kitöltő" képeket, amiket gyenge kapcsolatnál adnék vissza). Az összes többi csak link, RSS-ből kiszedve, nem én tárolom, így méretezni sem tudom. Muszáj vagyok számolgatással és sebességméréssel szétválasztani a terített tartalmat.
-
Taci
addikt
válasz
sztanozs
#8360
üzenetére
(Ne haragudjatok, hosszú lett, "hangosan gondolkodom", offba is rakom, de tanácsot szívesen elfogadnék, van pár kérdésem benne.)
Ötletem sincs, mik lehetnek a jó mérőszámok, de ezeket a kategóriákat szeretném lefedni:
1) Gyenge hálózati kapcsolat
3G és alatta2) Közepes sebességű hálózati kapcsolat
3G és 4G között, 4G-t is beleszámítva, mert 1-2-5 MB-os képeket én sem szeretnék 4G-n töltögetni, hiába lejönne hamar. (több 10-100 db képről is szó lehet, attól függően, mennyit scroll-ozik a user).
Sőt, lehet, hogy ebbe a kategóriába kerülne minden mobileszközös kapcsolat.3) Gyors hálózati kapcsolat
Ezt meghagynám az asztali böngészőknek (LAN, otthoni vagy céges wifi, ahol nincs korlát az adatmennyiségre) a nagy fájlméretek miatt.Ezekhez akkor hogyan lehetne jól belőni a számokat? Amiket példának mondtál, azokat lehet is használni? Mindjárt nézem a hálózati sebességeket.
Preset,download(kb/s),upload(kb/s),RTT(ms) GPRS,50,20,500 Regular 2G,250,50,300 Good 2G,450,150,150 Regular 3G,750,250,100 Good 3G, 1000,750,40 Regular 4G, 4000,3000,20 DSL 2000, 1000,5 WiFi 30000,150000,2kB-ban:
- erős 2G: 56 kB/s
- átlagos 3G: 94 kB/s
- erős 3G: 125 kB/s
- átlagos 4G: 500 kb/sEgy fontos kérdés ezen a ponton: Az oldal többi elemét is tölti, nyilván nem 1 szálon dolgozik. Viszont a sebességmérésnek csak akkor van értelme, ha a teljes sávszélesség az övé (mármint más alkalmazások is használnak, de legalább az oldalam más elemeinek betöltése ne lassítsa, amíg sebességet mér.)
Ezt melyik ponton tudom a legbiztosabban kivitelezni? a document onload nem jó, mert addigra már az első 4 elemet betöltötte. Ha előtte indítom, akkor párhuzamosan tölti a többi elemet is (css, js stb.).
Erre mi a jó megoldás, hol van a "jó mérési pont", ahol csak ez a szál futhat?Tegyük fel, hogy ez megvan (nincs, tanácsot kérnék ide is - de csak hogy a gondolatmenetet folytatni tudjam).
Egyszerre 4 képet tölt be az oldal - persze ha a user scroll-oz mint az őrült, akkor végtelen + 4-et. De nézzük azt, hogy egyszerre csak 4-et tölt be.
Ahogy néztem, egy átlagos, jó minőségű kép, amik a feed-ekben vannak általában 100 és 250 kB között vannak. Ezeket a képeket adnám a 2-es kategóriának.
Tehát ha 4 ilyen képet tölt egyszerre, és mind 250 kB, akkor 1 MB-ot kell betöltenie egyszerre (csak a képeket számolva).Na és itt elakadtam... Milyen számokat adjak meg a három kategória határétékeinek?
Mi számít elfogadható betöltési sebességnek?Ez ugye 4G-n 2 mp / betöltés (4 db kép). Ez rendben van, bőven belefér.
Erős 3G-n ez már 8 mp / 4 db kép. Tehát betölt az első adag, scrollozol lefel kicsit, és tölt a következő adag. 8 db képre ez már 16 mp. Túl sok, ez biztos.
Talán képenként 1 mp még belefér. 250 kB/s.Az 1)-es kategóriába akkor tartozna a 250 kB/s alatti sebesség.
A 2-es kategória lenne mondjuk akkor 250-500 kB/s között, így az átlagos méretű (250 kB) képekkel számolva 2-4 mp alatt töltene be egy-egy 4-es képcsoport.
Illetve valahogy ide kell szűrnöm az akár gyorsabb kapcsolattal, de mobilon netezőket, mert azért az adatcsomagot nem szeretném "leenni" róluk. Erre is biztosan van valami módszer, hogy kiszűrjem - keresek is majd.
Mobilon nyilván wifi-n is lehet netezni, és ott nem számít az adatmennyiség. Szóval nem mondhatom minden mobilról érkezőnek, hogy ti csak a 2)-es kategória képeit kapjátok. Bár gondolom, ez egy egyszerű IF-ág lesz (HA mobilról ÉS a sebessége a 2-es kategóriában)A 3)-as kategóriába pedig a nem mobil eszközről (hanem PC-ről) érkezők. Vagy HA mobilról ÉS a sebessége gyorsabb mint... na egyelőre ezt sem tudom, itt milyen sebességekre szűrjek.
Túl sok gondolat ez így egyszerre, leírom, aztán ha kifújtam magam, visszanézek majd.
Bocs, hogy ilyen hosszú lett. -
Taci
addikt
Sziasztok!
Arra gondoltam, hogy a kliens hálózati sebességétől teszem függővé, hogy milyen (vagy milyen minőségű) képeket küldök ki az eszközre (ezeket természetesen felülbírálhatja, ha szeretné).
Ha gyenge a kapcsolata (pl. 3G), akkor csak 1-2 ismétlődő "template" kép, cache-li, és nyilván ugyanazt tölte be újra és újra. Ha jobb kapcsolata van (4G pl.), akkor már jöhetnek mondjuk a 250kB alatti képek is. Ha pedig mondjuk LAN-on van, akkor akár az egészen nagy képek is.
Így lenne 3 kategória, csinálnék az oldal betöltésekor egy sebességtesztet, és ehhez mérten adnám a tartalmat.
A kérdés csak az, hogyan lehet legjobban ezt a sebességtesztet elvégezni. Amilyen megoldásokat találtam, azok úgy működnek, hogy van 1 fix fájl (kép), annak adott a mérete byte-ban, azt letölti a kliens, és ahhoz mérten, hogy mennyi idő alatt szedi le, abból számolja ki a hálózati sebességet.
Pl.: [link]Ez kisebb fájlokkal is működik? Mert mondjuk ha adott egy rossz lefedettségű 3G kapcsolat, nyilván nem fogom azzal kezdeni az oldal betöltését, hogy rádobok egy 5 MB-os fájlt, hogy megnézzem, mennyit bír.
Elég egy 100kB-os is? Valós (használható) eredményt ad?Vagy van erre jobb módszer, hogy megállapítsam a kliens hálózati sebességét?
Köszi!
-
Taci
addikt
válasz
lanszelot
#8288
üzenetére
Mivel a JavaScript-topikban tetted fel a kérdést, így feltételezem, a JS érdekel.
Ajánlani tudom ezt az oldalt, egészen az alapoktól elvisz egy magabiztos alap tudásig, tele példákkal és ellenörző kérdésekkel is:
https://www.w3schools.com/js/DEFAULT.aspHa elakadsz, szívesen segítünk.
Amúgy a példádnál maradva:
Inni szeretnél egy pohár vizet. Ehhez a következő függvényekre lesz első körben szükség (csak a példád miatt magyar nevekkel, és ilyen szerkezetben):
- poharKeres();
- csaphozVisz();
- csapMegenged();
- csapFolyat();
- poharEltorol();
stb.Aztán ezeket persze később megírhatod máshogy is, bevezethetsz paramétereket.
Pl. csinálsz egy függvényt, aminek az a funkciója, hogy valamit keres. Ennek paraméternek átadod, hogy mit keressen (poharat):
- keres(pohar);Ugyanígy azt is, hogy a csaphoz vigyen valamit, pontosabban hogy valahova (csaphoz) vigyen valamit (poharat):
- visz(csap, pohar);Aztán persze utána (illetve nyilván előtte) össze kell szedned, hogy mit csinál a keres() függvény. Lehet, úgy csinálod meg, hogy lesz benne 10 másik függvényhívás 20 változóval.
Ez már teljesen rajtad áll, hogyan alakítod, mire lesz szükséged benne.Kezd kicsiben (első körben a tanulós oldallal), és azt kezdd el bővíteni. Azután pedig határ a csillagos ég.
-
Taci
addikt
A disy68 és az általad leírt között félúton (vagyis inkább közös halmazban) van a megoldásom.
<body><script>setDarkModeFromLocalStorage();</script><div id="loading"><div id="loading-center"></div></div>Egy loader/splash screen a logóval.
És így pont jó, mert a sötét témát erre is alkalmazni tudtam. Szóval így (tűnik) kerek(nek). Köszönöm!
-
Taci
addikt
A sötét mód váltásához állítottam most be egy változót local storage-ban, hogy ha már korábban átváltott a felhasználó, akkor az oldal eleve sötét módban induljon.
Maga a váltás így van megoldva, ez van triggerelve a dark mode ikonra való kattintáskor is:
document.body.classList.toggle("dark-theme");Ezt pedig csak így tudtam megcsinálni, hogy local storage-ból kiolvasva a változó értékét beállítsa a sötét témát:
<body onload="onLoadBody();">function onLoadBody(){const DARKMODE = "darkMode";const storedDarkModeEnabledState = localStorage.getItem(DARKMODE);if (storedDarkModeEnabledState == 1){document.body.classList.toggle("dark-theme");}}Viszont így egy pillanatra betöltéskor még az alap, világos téma látszódik, kvázi bevillan, és csak utána tölt be a sötét.
Hogyan tudnám megoldani, hogy egyből a sötéttel indítson?
Korábbra már nem tudom tenni a hívást, hiszen ott még nincs body. -
Taci
addikt
Írtam elé egy hosszú szöveget, hogy ezt a változatot használtam még a legelején a sötét témás váltáshoz, viszont csúnya volt, ahogy váltásnál "ugrált". (Csak aztán ezt kitöröltem, mert a kérdéshez és válaszhoz irrelevánsnak tűnt végül.) Így végül én is úgy csináltam meg, hogy egy CSS-ben van a két stílus, és úgy váltogatom.
Csak a Mr. Y által írt kódrészletben két CSS fájl van, ezért írtam válasznak végül ezt. De egyetértek, szebb, gyorsabb, egyszerűbb, ha egy fájlban van a két stílus. -
Taci
addikt
Próbáld meg esetleg így:
<HTML><link href="styles1.css" rel="stylesheet" id="themecss"><div id="kiskacsa">Szöveg</div><button onclick="change()">Változz át CSS2-re</button></HTML>És hozzá a JS:
const themecss = document.querySelector("#themecss");function change() {if (themecss.getAttribute("href") == "styles1.css") {themecss.href = "styles2.css";} else if (themecss.getAttribute("href") == "styles2.css"){themecss.href = "styles1.css";}}Nyugodtan javítsátok, ha így nem pontos. Meg persze lehetne switch-csel is, szebb is úgy talán. De nagyjából így működnie kellene.
-
Taci
addikt
Mivel még nem vagyok az oldal szerkezetével teljesen kész, nem foglalkoztam a cookie-kkal. Az időjárás-modul optimális működéséhez viszont letárolom a kliensen az eszköz koordinátáit, ezt local storage-dzsal oldottam meg.
"Cookies are primarily for reading server-side, local storage can only be read by the client-side."Viszont amit írtál legutóbb, amiatt kérdezném, hogy ez rendben van-e így?
"Adatkezelési tájékoztatót írni róla alkalmasint jogi rémálom, ha oda személyes adatokat pakolnál. Rendesen csúnyán fog kinézni adatbiztonsági kockázatként."
Ha így nem jó (cookie szerverrel való kommunikációhoz, local storage, ha csak lokálban kell adattal dolgozni), mi alapján tudom eldönteni, hogy mit-hol tárolhatok? Mi a "GDPR-kompatibilis irányelv"?A saját eszközén tárolni a saját helyadatait az adatbiztonsági kockázat?
-
Taci
addikt
Az csak a skeleton loader-ben van úgy megcsinálva, viszont azt túl sok idő lett volna a mostani formátumra ráhúzni.
Végül arra jutottam, hogy a template-be beraktam az feed image-khez, hogy ha betöltött, távolítsa el a háttérért felelős osztályokat:
onload="removeLoadingBackground(this);"function removeLoadingBackground(element){if (element.classList.contains("loading-bg")){element.classList.remove("loading-bg");}if (element.classList.contains("loading-logo")){element.classList.remove("loading-logo");}if (element.classList.contains("loading-img")){element.classList.remove("loading-img");}}Csak az a biztos tényleg, ha nem hagyom ott pörögni, ki tudja, melyik böngésző hogyan kezeli (vagy nem kezeli).
Nem a legszebb megoldás, ellenben működik.
Köszönöm a gyors választ amúgy mindenkinek.
-
Taci
addikt
Nem igazán szeretnék sok időt elvesztegetni annak a kezelésére, hogy amíg nem töltenek be a képek a feed item-eknél, addig is látszódjon "valami".
Már megkapták a betöltendő kép méretét, így a helyük "le van foglalva".
Arra gondoltam először, betöltök valami pörgő-forgó ikont, de aztán azt bénának találtam.
Aztán jött az, hogy akkor megcsinálom rendesen egy loading skeleton-nal. Ez el is készült: https://codepen.io/pasztorlaszlo/pen/VwmBKpmViszont sajnos nem úgy kezdtem megcsinálni az oldal felépítését, hogy ezt könnyen be tudnám építeni, így arra gondoltam, leegyszerűsítem a dolgot, és ezt az (ill. ehhez hasonló) animációt simán beállítom a feed item template-jébe háttérnek. Amíg töltődik a kép, megy az animáció, nem "üresen" vár a user, látja, hogy oda töltődni fog valami, aztán betöltődik a kép és kész.
A kérdésem az lenne, hogy "okosak" annyira a böngészők, hogy ha "rá töltődik" a háttére a kép, (azt nyilván teljesen eltakarva), akkor az animációt leállítják, vagy ez a végtelenségig fut a háttérben is tovább, pörgetve a cpu-t, és kezelnem kell valahogy?Köszi!
-
Taci
addikt
Ha már feljött a window load event témája:
Az oldalamon infinite scroll-lal töltöm be a tartalmat. Egyetlen egy oldal, ahol görgetéssel jön az újabb és újabb tartalom.
Amikor betölt az oldal, ott meg tudom jeleníteni a töltő ikont addig, amíg az oldal teljesen be nem tölt.
document.readyState === "complete" vagy akár a window.onload is. (A logból és a leírásból látom, hogy a window.onload adja a pontosabb állapotot, de ez mindegy is most.)document.onreadystatechange = function() {if (document.readyState !== "complete") {spinnerShowHideToggle("spinnerShow");} else {spinnerShowHideToggle("spinnerHide");}};A gondom az, hogy mivel ugye az oldal maga már betöltött, ezért ahogy folyamatosan fűzöm hozzá az újabb és újabb tartalmakat, az már nem számít bele az oldal betöltésébe, így a fentieket egyáltalán nem triggereli.
Hogyan tudom az így pluszban hozzá fűzött tartalmaknál is megjeleníteni a töltő ikont addig, amíg az elemekhez tartozó képeket be nem tölti teljesen?
Van egy sablon html feed_item, azt tölti fel a szükséges adatokkal minden új elemnél újra és újra. Ezeket az img tageket kellene valahogy figyelnem? Vagy mi ennek a jó módja?
Vagy van valami event, amit lehetne figyelni?Köszi!
-
Taci
addikt
válasz
Silεncε
#8196
üzenetére
Ah, nagyon szépen köszönöm!!! Így végre úgy működik, ahogy szeretném! Köszönöm!
Annyi ideget megettem vele - persze ez az én hibám, még nem teljesen tiszta, mi-hogyan működik. De azért kérdezek, hogy gyakorolhassak, megértsem, fejlődjek, tanuljak. A példakód alapján már 1 fokkal érthetőbb, mi történik.
Ahogy látom, ez a megoldás querySelector-ral "behúzza" a megfelelő Class-t, aztán az ahhoz tartozó attribútumoknak új értékeket állít be a kiválasztott városok alapján. Majd ezután meghívja a JS-ben (widget.min.js) lévő inicializáló __weatherwidget_init() függvényt.A JS-kód tetején a pen-ben írja, hogy van egy újabb, jobb változat is:
https://codepen.io/weatherwidget/pen/vvPrRN
Ez már egy fokkal bonyolultabb (számomra így elsőre), de nekikezdek és próbálom felfogni, mi-merre.
Viszont az egyből feltűnt, hogy nincs benne az előző megoldásban lévő függvényhívás a JS-ből (widget.min.js). És nem is tölt újra, ahogy az előző megoldásban, itt csak simán lecseréli az adatokat, a tartalmat, és nem távolítja el és tölti be újra az egész widget-et.Erre esetleg kérhetnék egy magyarázatot? A jövőre nézve, a saját szkriptjeimre, hogy tudjam, mi-miért működik így az első változatnál (miért kell az ..._init() függvényhívás), és miért működik így a második változatnál függvényhívás nélkül.
Köszönöm! (Már eleve ezt a példakódot is!
) -
Taci
addikt
Egyszerűen nem értem, hogyan (nem) működik ez a szkript. (https://weatherwidget.io/js/widget.min.js)
Már csak a widget miatt az ezt tartalmazó HTML részt kiszerveztem külön, mert utólag nem tudtam működésre bírni, hogy betöltsön (ezt segítettél megérteni múltkor). A HTML részt betöltötte (ami igazából csak a link az időjárási adatokra a város nevével, de az utána következő grafikus részt, amiért a JS felel, azt már nem. Csak akkor töltötte be, ha az ezt tartalmazó HTML részt az aktuális városadatokkal együtt generáltatom, és ezt töltöm be.
Ugye ezt is írtad: "a böngésző nem fogja kiértékelni a script tag-ekben lévő kódot, amit innerHTML-ként megadsz biztonsági okokból." Ez világos.
Viszont direkt ezért ezt a HTML "panelt" egy külön JS generálja és tölti be, működik szépen. Most viszont néha újra be kell tölteni, és hiába adom ismét hozzá a frissen generált HTML "panelt", így már nem működik. Pedig pontosan ugyanazt a JS függvényt hívom meg. Pontosan ugyanazt. Elsőre működik, másodikra nem. Az elsőt az oldal betöltések hívja meg, az lekér pár adatot adatbázisból, aztán beadja a widgetnek, és betölti. Működik.
De aztán pont ugyanezt a függvényt hívom meg, csak más adatokat kap, de a JS ugyanaz, csak más paraméterekkel dolgozik, és így már nem fut le a widget JS része.Miért nem? Hogyan lehet ezt megoldani? Biztosan kell rá megoldásnak lennie.
Pl. itt van a widget készítőjének weboldala: https://weatherwidget.io/
Ott akárhányszor megadok egy városnevet, mindig újra és újra generálja a modult. Nem tölti be külön a HTML részt, nem tölti újra az oldalt, mégis, milliószor is betölti, lefut, kirajzolja, működik szépen.
Ezt hogyan kell elérni? Hogyan lehet a weboldal egy adott részén lévő JS-et újra és újra lefuttatni más és más adatokkal? Utólag nem lehet hozzáadni és futtatni, de ha már ott van, hogyan lehet új adatokkal újra és újra futtatni, kiértékeltetni?Remélem, érthetően írtam le, nagyon lefárasztott már, egyszerűen nem értem.
Tuti alap dolog kell hogy legyen, hisz' az ő weboldalukon is gond nélkül működik.
Átírom én a kódomat bármilyenre, csak működjön.Lekérem az aktuális koordinátákat, adatbázisból lehívom hozzá a városnevet, ahhoz megvan a forecast7 link, és meg is van minden a widget új adatokkal való betöltéséhez.
<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>A vastagon szedett és aláhúzott elemeket kell csak cserélnem.
Hogyan lehet ezt a friss adatokkal újra és újra betölteni, úgy, ahogy pl. az ő weboldalukon is működik?
Köszönöm előre is!
-
-
Taci
addikt
Adott egy szépen működő HTML, benne egy időjárás widget ( [link] ), ami szintén szépen működik. Ez egy "beégetett" szkripttel működik a HTML kódon belül, <script></script> tagek között.
Ez a widget egy olyan területen van, ahova dinamikusan kell tartalmat beszúrnom. Ezért ezt a területet teljesen "kiszerveztem" egy külön html fájlba, amit indításnál, betöltés előtt egy JS behúz a szerverről a megfelelő adatokkal.
Az oldal más részein már működő kóddal csináltam, szépen be is húz mindent, és minden szépen működik - kivéve a JS-et.Megpróbáltam egy tök egyszerű logolással is, de hozzá sem nyúl.
<script>console.log("almafa");</script>
Megpróbáltam külső JS fájlból behúzni függvényként ugyanezt, szintén hozzá sem nyúl.Van tippetek, hogy az így behúzott, HTML kódban lévő JS-kódot miért nem dolgozza fel se így, se úgy?
Köszi!
-
#8184
Taci
addikt
instantwater
#8183
Taci
addikt
válasz
instantwater
#8183
üzenetére
Köszönöm szépen a tanácsot!
De nem csak CDN verzió van?
https://github.com/axios/axios
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Mármint itt más különbséget nem látok, csak hogy melyik szerveren van.
-
Taci
addikt
válasz
martonx
#8176
üzenetére
Amúgy ha már külső library: hogyan érdemes használni őket?
A fejlesztőtől kapott elérési utat használva (pl.<script src="https://unpkg.com/axios/dist/axios.min.js"></script>), vagy pedig lokálba leszedni, és onnan linkelni? (És időként ránézni, frissült-e, és ha fontos dolgokban, akkor manuálisan frissíteni.) -
Taci
addikt
válasz
sztanozs
#8178
üzenetére
Mármint jó kérdés még mindig hogy mit és hol szeretnél csinálni.
Azt a részét már megoldottam. Azt akartam csak elérni, hogy míg az eredeti (ettől is kezdetlegesebb ) megoldásomban szerver oldalon (PHP) generálódott a komplett tartalom (a bejegyzésekhez (feed) kapcsolódó változók, és az azokat körbefogó HTML kódot is ott raktam össze, és ezt kérte le a kliens JS-tel), az új módszerrel a szervertől már csak a bejegyzésekhez (feed item) kapcsolódó változók érkezzenek, az azokat körbefogó HTML kódot pedig a kliens rakja össze "helyben". -
Taci
addikt
válasz
martonx
#8176
üzenetére
A HTML-es kérdést már megoldottam, simán csak áthoztam a fájl tartalmát. (Axios.get-tel, de amúgy igen, sima fetch vagy xhr is jó lett volna.)
Azért kérlek, ne nagyon szabdaljatok fel.
XHR-rel kezdtem, de a PHP topikban "rám szóltak" (nyilván jó szándékkal), hogy az múlt századi megoldás, használjak Axios-t. De abban én is egyetértek, hogy arra a minimális feladatra amúgy még az XHR is jó volt, (viszont tök kezdő vagyok, így hallgatok a tapasztaltabbakra). De ha jól látom, akkor az arany középút talán a fetch.Annyi az előnye a dolognak mindenképp, hogy már van tapasztalatom így mással is.
-
Taci
addikt
válasz
martonx
#8171
üzenetére
Pont most álltam át. (Oké, nem volt nagy kódolás, de akkor is, mire rájöttem (abszolút kezdőként), hogy mi-merre. Aztán így persze már látom, nem volt nagy ördöngösség.)
Persze abszolút nyitott vagyok, de miért jobb a Fetch mint az Axios? Illetve mit jelent az, hogy nincs rá szükség 2021-ben? Szeretném megérteni, hogy tudjam.
Ezt találtam összehasonlításnak: https://blog.logrocket.com/axios-or-fetch-api/Azt látom, hogy ami elérhető egyikkel, elérhető a másikkal is, szóval igazából könnyen át tudom írni ezt a pár sor kódot Axiosról Fetch-re, ha arról van szó.
Köszi.
-
-
Taci
addikt
Sziasztok!
Tudnátok abban tanácsot adni, kérlek, hogy JS-tel hogyan tudnám egy külső HTML fájl tartalmát "behúzni"?
Jelenleg (ideiglenesen, és csak a teszt szerveren - nagyon kezdő vagyok még, így számomra egyelőre még mindig csak ideiglenes és teszt) szerver oldalon generálódik (SQL, PHP) a tartalom (töltődik fel adatbázisból tartalommal ez a külső HTML, és ez megy a kliensnek), de szeretném áthozni kliens oldalra, hogy csak a feltöltendő/kiegészítendő adatokat kelljen küldeni, a fix HTML kód a kliensen generálódjon.
Axios van használatban a PHP topikban tanácsoltak hatására. (@instantwater: Köszönöm!)
jQuery is van használatban - de csak a használt HTML template miatt, én még nem igazán használtam magamtól semmire.Illetve @instantwater: Javasoltad, hogy
Igen, célszerű az adatot JSONban leküldeni a kliensnek, és kliens oldalon React/Vue vagy valami hasonlóval generálni a HTMLt.
De a HTML már készen van, így gondolom, már nem tudom / nem kell használnom ezeket a keretrendszereket. Igazából ha kikerülhető, pár sor HTML kódért nem szeretnék (még) egy új keretrendszert bevezetni, ha nélküle is megoldható.Ahogy "elképzeltem", úgy "kellene" hogy működjön, hogy megy a request a szerver felé, az visszaküldi az adatokat, aztán a JS fogja ezt a HTML kód "template"-et, belerakja az előbb kapott adatokat, aztán megjeleníti. Minden egyes feed elemnél újra és újra. És így a szervertől az ismétlődő fix HTML kódot már nem kellene mindig eljuttatni, csak a változó részeket.
Viszont ez mind egy feed-be megy, ahol akár több 100-szor is kellhet egymás után, szóval vagy csak egyszer kellene betöltenem a feed item HTML template-jét, vagy pedig eleve JS-ben generálni. (Bár akkor pedig az ajánlott React vagy Vue lehet, amit használnom kellene? Csak igazából nem használnék egy külön keretrendszert, ha JS-ből is megoldható. )
Szerintetek hogyan lenne jobb?
Illetve ha van megoldási javaslatotok, megtámogatnátok egy-egy (kéznél lévő) példával?Saját keresésből erre futotta eddig (jQuery load() ), semmi más használhatót nem találtam:
https://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-load.php
Viszont itt azt nem értem, hogy hogyan adom meg neki a HTML fájlt. Mármint talán előbb azt is le kell kérni (Axios get)?Nagyon nem vagyok jártas ezekben, és hiába vannak meg az alapok, ez már nem alap dolog, így nem igazán látom át, most hogyan lehetne tovább menni.
Vannak csúnya megoldásra ötleteim, de jó lenne valami időtállóbba energiát fektetni. Ehhez kérném a segítségetek.Köszönöm!
Ezt optimalizálni úgy lehetne, hogy tárolom az átméretezett képeket, de ez nem opció.
Új hozzászólás Aktív témák
Hirdetés
- Synology NAS
- Vezetékes FEJhallgatók
- ASUS notebook topic
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- exHWSW - Értünk mindenhez IS
- Motorolaj, hajtóműolaj, hűtőfolyadék, adalékok és szűrők topikja
- PlayStation 5
- Mr Dini: Mindent a StreamSharkról!
- AMD Ryzen 9 / 7 / 5 / 3 5***(X) "Zen 3" (AM4)
- Gumi és felni topik
- További aktív témák...
- Dell Inspiron 5406 2-in-1i5-1135G7 16GB DDR4 3200 512GB NVME 14" FHD Érintőkijelző W11Pro
- Eladó MacBook Pro 14" M1 Pro (2021) 16/512 99% akku Makulátlan állapotban!
- Újszeru GIGABYTE G5 - 15.6" FullHD 144Hz - i7-13620H - 48GB - 1TB - RTX 4050 - Win11 - 1,5 év gari
- Eladó garanciás,új állapotu projektorom kihasználatlanság miatt!
- Acer Nitro V ANV15 - 15.6"FHD IPS 144Hz - i5-13420H - 16GB - 512GB - Win11 - RTX 3050 - 2,5 év gari
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: PC Trade Systems Kft.
Város: Szeged