- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Fejhallgató erősítő és DAC topik
- A Linux megnégyszerezte magát a Steamen — a Microsoft ismét ígérget
- AMD vs. INTEL vs. NVIDIA
- Először kombinálja a Full HD-t az 1000 Hz-cel egy monitor
- AMD Navi Radeon™ RX 9xxx sorozat
- Projektor topic
- Speciális kiadású AMD-s alaplapot villantott az ASUS a 20 éves ROG-jubileumra
- Apple MacBook
- AMD FX
-
PROHARDVER!
PROHARDVER!
Új hozzászólás Aktív témák
-
Nem értem teljesen a mondandód lényegét. Jól működő kódokkal minek jönnék a fórumra? Egy fórumra általában nem működő, nem jól működő kóddal, vagy valamilyen problémával szoktak jönni az emberek. Olyan példával jöttem ide, ami szemlélteti a problémám jellegét, így könnyebben meg tudom rá kapni a választ. Ez meg is történt. Siker. Keresgéltem is a probléma miatt nem keveset, többek között az általad javasolt [DOMContentLoaded] - el is próbálkoztam sikertelenül. Szóval nem látod jól, hogy 0 időt fektetek bele. Nem sok időm van rá ez tény, de szánok a dologra időt azért.
Nem érzem úgy hogy itt akarom megtanulni a programozás alapjait, de én úgy látom, hogy rengeteget tanulok egy egy probléma megoldásából. Ha lesz rá keret és idő, akkor majd elvégzek valamilyen tanfolyamot, mert amúgy érdekel a dolog, mégha néha úgy is jön le, hogy csak kényszerűségből foglalkozom ezzel.
Azzal pedig nem értek egyet, hogy én itt bárkivel atomerőművet szeretnék építetni. Ha így lenne akkor nem példakódot készítettem volna a problémámról, hanem kiírtam volna, hogy "légyszives rakjátok már össze az egész oldalamat A-Z-ig Kösz" Nem emlékszem, hogy ilyennel jöttem volna itt bármikor is.
Ha mindenki értene mindenhez, akkor nem lenne szükség a fórunokra, mert mindenkinek meg lenne oldva a problémája. Maximum arról lehetne diskurálni, hogy a mai nap is milyen könnyen ment, nem volt probléma egy szál se. -
Nyilván, csak amit látok, hogy még az időt se fekteted bele. Majd amikor jól felkészült összeszedett, működő jsfiddle, codepen, bánomisén milyen példákkal jössz, akkor lesz értelme az akár hülyének is tűnő kérdésekkel foglalkozni. Gyanítom mire megcsinálnál egy ilyen működő példát, közben utána olvasnál kényszerűségből ennek annak, hirtelen tárgytalan lenne a kérdésed is. Mert ez így csak időpocsékolás, hogy hirtelen kell neked valami, de olyan hirtelen, hogy értelmesen még kérdezni sincs időd. Ráadásul olyan ez mintha egy atomfizika topikban elkezdenéd kérdezgetni, hogy na és akkor hallottam, azokról az atomokról, erőművet szeretnék építeni, írjátok már le pár sorban gyorsan, hogy mit és hogy, 5 percem van rá, lehetőleg ne kelljen semmin módosítanom, csak átemelem a leírást, és máris termelje az áramot.
Az meg, hogy ki mit csinál főállásában, és kinek mire van ideje, abszolút nem tartozik ide. Ha nincs időd ezzel foglalkozni, akkor ne foglalkozz
-
Szerintem egy fórumnak nem feladata (nem is lehet ilyen formában) nulláról megtanítani valakit programozni, aki ráadásul szemlátomást megoldást akar, nem tanulni. Hiszem, hogy a kérdéseid helyett, ha elvégeznél egy udemy javascript kurzust, vagy vennél egy minimális fáradtságot, és végigcsinálnál pár netes tutorialt, máris magadtól meglelnéd a válaszokat.
Vagy ha ennyire nem akarsz foglalkozni a témával, akkor fizessetek valakinek aki megcsinálja nektek amit szeretnétek.
-
Igazából nem az én kódomhoz lesz ez és nem is ez az eredeti éles kód. Amit ide kiraktam kódot az csak tesztelés céljából van. Akiknek kell a megoldás, azok szakvámban a w3school.com scriptjét használják, ezért úgy voltam vele, hogy ahol csak lehet, "nem bántom az alapkódot" elvet követem. Közben jött pár megoldás, amivel megkaptam amire vágytam, nem kellett pluszban átírni a w3scool scriptet, mindenki happy volt, amíg fel nem merült az igény, hogy az oldal betöltésekor is ez az amaz jelenjen meg az includeolt oldalrészen is, eközben ez a megoldás ki is ment a fejemből, de most forkoltam a kódod, így biztos helyen van
Sajnos nem lesz megúszva a w3 kód átalakítás 
Köszi a segítséget -
Továbbra is az a gond, hogy nem a korábban ajánlott irányba mész. Az include html-es függvényednek adjad át callback-ként, amit akarsz csinálni miután betöltött az ajax kérés. Ez teljesen mindegy, hogy egy eseménykezelő megadása vagy valami extra html hozzáadása valamihez. codesandbox
Igazából nem az én kódomhoz lesz ez és nem is ez az eredeti éles kód. Amit ide kiraktam kódot az csak tesztelés céljából van. Akiknek kell a megoldás, azok szakvámban a w3school.com scriptjét használják, ezért úgy voltam vele, hogy ahol csak lehet, "nem bántom az alapkódot" elvet követem. Közben jött pár megoldás, amivel megkaptam amire vágytam, nem kellett pluszban átírni a w3scool scriptet, mindenki happy volt, amíg fel nem merült az igény, hogy az oldal betöltésekor is ez az amaz jelenjen meg az includeolt oldalrészen is, eközben ez a megoldás ki is ment a fejemből, de most forkoltam a kódod, így biztos helyen van
Sajnos nem lesz megúszva a w3 kód átalakítás
Köszi a segítséget -
Ha az
[A, B]intervallumot szeretnéd véletlen sorrendben felsorolni (mert amit leírtál, az nem véletlenszám-generálás, hanem véletlensorrend-generálás), akkor készíts egy tömböt[A, A+1, A+2, …, B-1, B]elemekkel, egyA-tólB-ig vagyA-tól(A+B+1)/2-ig menő ciklussal cserélj ki két elemet, ahol a két sorrendet véletlenszám-generátorral határozod meg. A generálás pedig mehet a tömbbőlshift()metódussal, amíg van benne valami.Másik lehetőség, hogy gyűjtöd egy listába az eddig kisorsolt számokat. Ha a lista hossza megegyezik a
B-A+1értékkel, akkor nem tudsz visszaadni semmit sem, mert elfogytak a lehetőségek. Ha rövidebb a lista, akkor addig generálsz véletlen számot, amíg az nem lesz benne a listában. A visszaadott számot hozzáfűzöd a listához. A módszer hátránya a másikkal szemben, hogy induláskor igaz, hogyO(1)időt igényelO(n)helyett, de a generálás már legjobb esetben isO(n×log n)leszO(1)helyett. -
Közben másik fórumon sikerült megoldani a problémát.
Ez az eredeti nem működő kód CODESANDBOX
Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
<script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>Ebben az alábbi kód szerepel
<script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"
-
Közben másik fórumon sikerült megoldani a problémát.
Ez az eredeti nem működő kód CODESANDBOX
Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
<script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>Ebben az alábbi kód szerepel
<script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING"Közben kaptam egy újabb jó megoldást 🙂
Amúgy szép látni, hogy egy egy probléma megoldására milyen sokféle megoldás létezik 🙂 -
A te példádban az a legfőbb gond, hogy az ajax hívás aszinkron (XMLHttpRequest) és amikor hivatkoznál a testclick id-jú elemre, az még nincs benne a dom-ban. Az után tudsz csak rá hivatkozni, hogy az ajax kérés lefutott.
Erre az egyik lehetőség egy callback lehet, ami akkor lesz meghívva, amikor a content már bekerült a dom-ba.
Hogy legyen más is mint a korábbi minta, a lekérést átírtam fetch api-ra, meg kiszedtem a fölösleget, hogy átláthatóbb legyen: link
-
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t
Két dolog miatt. Egyrészt, mert az egész
document-re raktad rá az event listener-t, tehát az minden egyes, az oldalon történtclickeseményre (attől függetlenül, hogy mire kattintottál) le fog futni. (Ezt alapvetően én nem nagyon ajánlanám, jobb az, ha az egyes event listener-eknek csak akkor futnak le, ha szükséges)
A másik dolog pedig a JavaScript event capure mechanizmusa, amivel aclickesemény végigfolyik a DOM elemein."Ezt alapvetően én nem nagyon ajánlanám, jobb az, ha az egyes event listener-eknek csak akkor futnak le, ha szükséges"
Értem, és milyen módosításokat tudnék elvégezni ebben a helyzetben, tehát csak akkor fusson amikor szükséges, ne minden esetben? Talán szűkítsem le egy adott ID-vel rendelkező divre? Viszont akkor működni fog?
''a JavaScript event capure mechanizmusa"
Köszi. Megpróbálom elolvasni és értelmezni
-
Üdv
Ezzel a w3-as módszerrel van beillesztve html a html-be. Ez működik is remekül, kivéve, hogy addEventListener-el szeretnék a content.html fájlban egy click vagy change eventre funkciót, az nem reagál. Ha a content.html fájlt önmagában (direktben) megnyitom, akkor működik, reagál a kattintásra és az select mező cseréjére is.
Példakódot délután majd rakok fel.
Szerintetek mi lehet a gond? Találkoztatok e már hasonló problémával?Közben másik fórumon sikerült megoldani a problémát.
Ez az eredeti nem működő kód CODESANDBOX
Az ebben lévő addEventListener nem tudta elérni a #testclick ID-jű elemet.
<script>
let output = document.querySelector("#output");
let testclick = document.querySelector("#testclick");
testclick.addEventListener("click", testclickevent());
function testclickevent() {
output.innerHTML = "TEST CLICK IS WORKING";
}
</script>Ebben az alábbi kód szerepel
<script>
document.addEventListener("click", function(e) {
var elem = e.target;
if (elem && elem.id == "testclick") {
output.innerHTML = "THIS SOLUTION IS WORKING";
}
});
</script>
Teljesen még nem tiszta, hogyan is képes látni ez a content.html-ben lévő button ID-t, de működik. Gombnyomásra kiírja, hogy "THIS SOLUTION IS WORKING" -
Igen, ugye az a probléma, hogy az event handler-ben a bubble-capture miatt a target az az ikon lesz. Egy potenciális fix, ha kicseréled a
const editbutton = e.target;sort erre:const editbutton = e.currentTarget;Hát ez tényleg "easy" megoldás volt.
Még annyit változtattam rajta, hogy ezt
const editbuttons = document.querySelectorAll('.x > button');
kicseréltem erre:const editbuttons = document.querySelectorAll('.editbuttons');
így az egész az class x div-től is független lesz, akár el is hagyható lenne.Köszönöm a gyors bugfixet
-
btz
addikt
Sziasztok!
Ismét egy Javascript probléma. (Ezzel mindig csak probléma van, de az is lehet hogy csak velem
)Jim-Y által ajánlott querySelectoros kódból szeretnék Camera Name/Path editort.
A gombokon FontAwesome edit ikont használnék. A probléma az vele, hogyha rákattintok, akkor csak magára a gombra kattintva jelenik meg a popupban az adat, ha az ikon részre kattintok, akkor undefined-et kapok.
Az első gombnál megcsináltam, hogy a "data-...." infókat beletettem a buttonon kívül az <i> tagbe is, így:<button class="buttonact yellowbtn editbuttons" data-camNum="A" data-camId="1" data-camName="CAMERA1" data-camPath="/CM/PATH1/">
<i data-camNum="A" data-camId="1" data-camName="CAMERA1" data-camPath="/CM/PATH1/" class="fa fa-pencil-square-o" style="font-size:20px">CAM1</i>
</button>
De ezzel duplikálni kell a sorokat.
Ide kattintva jó...
Ide kattintva undefined....(B)JSFiddle DEMO(/B)
-
Engedelmeddel írnék néhány feedbacket a kódhoz:
HTML:
A `big` HTML tag obsolete, nem javasolt a használata
<input type="button" /> helyett inkább használjunk <button>-t.
Nem szerencsés, ha a `name` attribútom ugyanaz több input elemnél is, mivel esetleges szerveroldali feldolgozásnál ez azonosítja az egyes elemeket.JS:
var helyett ajánlott let vagy const használata
Személyes preferencia, de szerintem nem mindegy, hogy JS-ből milyen módon kérdezed le a DOM elemeket. Pl. te class alapján teszed, én ezt akkor tenném, ha pl. a class-t akarom módosítani. Ebben az esetben inkábbdocument.querySelectorAll('input[type="checkbox"]')-ot használnék (így pl. már eleve ki van szűrve minden input, ami nem checkbox).A for ciklus helyett megcsináltam array műveletekkel: fiddle
+1: érdemes jól formázottan tartani a kódot, sokat segít az olvashatóságon (a JSFiddle tudja automatikusan a jobb felül lévő Tidy gombbal).
Természetesen épp ezért raktam fel, hogy lássak egy jobb megvalósítást, mert az előző példákból már látszott, hogy ez is sokkal rövidebben, szebben, modernebben megoldható. És jól sejtettem...
Köszönöm a kódot. Ha másnak is van alternatívája, azt szívesen fogadom 🙂
-
"Datasetet? Úgy tudom azt én nem is használtam az első verziós kódban. Vagy de?"
Hát éppen ez az, hogy nem használtad, de nagyon kellett volnaES6-7-2020-nak nézz utána, mert ez a jelen, az ES5 a rég múlt, ami a jquery-vel együtt elmúlt.
Elhiszem, hogy nem te találtad ki a myfunction nevet, de ha ez egy open popup-ot csinál, akkor illene e szerint elnevezni, ahogy fura módon a close popup egész értelmes név volt. -
Jim-Y is összeszedett párat, amin alapból kiakadtam, hogy jsfiddle-nek a html részébe erőltetted bele a javascriptet
Aztán a js-ben dataset-et nem használtad jól. Meg klasszikus es5 js volt, ami így 2020-ban, nem borzalmas, csak nem jó látni. Béna metódus elnevezés (MyFunction WTF?), meg igaziból kb. minden sornál meg lehetett volna állni, és kifejteni, hogy mi miért nem jó úgy ahogy van.
Ettől függetlenül persze működött, és tudjuk: "A működő kód, jó kód"."jsfiddle-nek a html részébe erőltetted bele a javascriptet
"Merő lustaság, ahogy az inline style és a <br /><br /> is. Sorry
"Aztán a js-ben dataset-et nem használtad jól."
Datasetet? Úgy tudom azt én nem is használtam az első verziós kódban. Vagy de?
" klasszikus es5 ...Béna metódus elnevezés (MyFunction WTF?) "
Hallottam már valamit ES6-ról de lövésem sincs amúgy mi az, ennek utána kéne olvasnom.
Tutorialokat olvasgatva férceltem össze a kódot. És amikor ilyeneket csinálok, akkor meghagyom az eredeti elnevezéseket, amíg mással nem ütközik. Amúgy sok netes tutorialban a myFunction() elnevezést használnak a példakódban. Nem én találtam ki."minden sornál meg lehetett volna állni, és kifejteni, hogy mi miért nem jó"
Természetesen minden új infót szívesen veszek (mi miért nem jó, hogy lehetne jobb), mert abból tudok tanulni és fejlődni. Nem végzek semmilyen webfejlesztői sulit, a netről szedem össze a tudást, ami néha nem biztos hogy a jó irányba visz, épp ezért vagyok ezen a fórumon is, mert itt vannak a témában tapasztaltabb fórumozók.
-
Nem borzalmas, mert megcsinalja amit kell, viszont sok anti-pattern van benne, mondjuk, ugy, hogy nem tul elegans a kodod es igy biztos elbuknal egy ilyen minosegu koddal egy allasinterjun.
https://codesandbox.io/s/modest-brown-be2zn?file=/index.html
Kis magyarazat a readme fileban -> https://codesandbox.io/s/modest-brown-be2zn?file=/readme.md
Üdv!
Állásinterjúra szerencsére nem kell mennem ezzel, mert van jelenleg (nem programozás). Csak saját jellegű projektekhez van szükségem némi Javascript tudásra (aztán ki tudja, hogy később hol veszem hasznát még)
Ettől függetlenül köszi az építő jellegű kritikát és tanácsokat -
Nagyon dícséretes! És miért utálod a jsfiddle-t? Amúgy meg ott van a codepen.io mint alternatíva, ha az jobban bejön
Én totál leszarom, hogy mit használsz, de lássuk be rengeteg eset van, amikor működő, más által is módosítható kódot kell mutatni a segítség kéréshez, márpedig erre nem tudok jobb alternatívát ezeknél.
A kódod egyébként borzalmas, de legalább működik, és jquery mentes.
JQuery-t 2020-ban használni emberiség ellenes bűntett -
Már hogy a fenébe ne lehetne? https://www.w3schools.com/howto/howto_css_modals.asp
Az oké is volt számomra, ez a link már a könyvjelzőim között volt modal témában, de nekem pontosan az kellett, hogy a benne lévő input értékek a data szertint változzanak. Erre találtam, is megoldást JQueryset, de mivel kerülöm ezért akartam simple Javascriptesíteni.
De időközben rajta voltam a témán és ezt sikerült megalkotnom
<button onclick="myFunction(this)" data-book-id="123" data-book-name="Test Book 1">Open Popup Book1</button><br />
<button onclick="myFunction(this)" data-book-id="456" data-book-name="Test Book 2">Open Popup Book2</button><br />
<button onclick="myFunction(this)" data-book-id="789" data-book-name="Test Book 3">Open Popup Book3</button><br />
<br /> <br />
<script>
function myFunction(thisbook) {
var bkID = thisbook.getAttribute("data-book-id");
var bkNam = thisbook.getAttribute("data-book-name");
document.getElementById("myBookId").value = bkID;
document.getElementById("myBookName").value = bkNam;
document.getElementById("book-update-popup").style.display = "block";
}
function closeBookModal() {
document.getElementById("book-update-popup").style.display = "none";
}
</script>
<div id="book-update-popup" style="display: none; margin: 5px; padding: 10px; border: 1px solid;">
BookID: <input type="text" id="myBookId" value="">
BookName: <input type="text" id="myBookName" value="">
<br /><br />
<button onclick="closeBookModal()">Close</button><br />
</div> -
Az indított interval azonosítóját tárolod a változóban, legyen elérhető onnan, ahonnan használni szeretnéd, ez már jó. Viszont amikor újra hívod a startot, akkor a korábbi interval még futni fog, ameddig le nem lövöd. Magyarul azzal kell kezdeni, hogy hívsz egy clearInterval-t akorábbi interval azonosítójával mielőtt újat indítasz. A gomb elrejtés/mutatás teljesen jó irány az egész mellé. Mintafiddle (szétszedtem a html/js-t, egyéb kulcsszavak: arrow function/lambda function, const/let, addEventListener)
Köszönöm a segítségeteket. Így már tökéletes a működés.
Egy kicsit átvariáltam, hogy a start() ne legyen alapértelmezett
https://codepen.io/bzozoo/pen/YzyLLZv -
Az első példádat simán betettem a html oldalba, script tagok közé, és a firefox erre ezt írta:
A document.execCommand('cut'/'copy') megtagadva, mert az nem egy rövid ideig futó, felhasználó által generált esemény kezelőjéből lett hívva.
Ezután beraktam az egészet egy eseménykezelőbe, így már működik:
-
Ezt próbálgattam már. Nálam nem működik (szokás szerint)
Először így próbáltam:
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Ekkor a textAreaEle.value = text; érték nem volt definiálva így készítettem neki egy változót. var text = "tesztszöveg";
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
// Reset styles
textAreaEle.style.border = '0';
textAreaEle.style.padding = '0';
textAreaEle.style.margin = '0';
// Set the absolute position
// User won't see the element
textAreaEle.style.position = 'absolute';
textAreaEle.style.left = '-9999px';
textAreaEle.style.top = `0px`;
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.body.appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
document.body.removeChild(textAreaEle);
}
</script>Hiba: Uncaught TypeError: Cannot read property 'appendChild' of null.
Beraktam bodyba a scriptet, utána semmit nem csinált, viszont a hiba megszűnt.
Aztán a document.body részt cseréltem document.getElementById("mainContent").appendChild(textAreaEle);-re. Így már megjelenik a textarea, benne a tesztszöveg felirattal. (A kódból kitöröltem azt a részt ami elrejti a textarea-t).<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
// Focus and select the text
textAreaEle.focus();
textAreaEle.select();
// Execute the "copy" command
try {
document.execCommand('copy');
} catch (err) {
// Unable to copy
} finally {
// Remove the textarea
//document.body.removeChild(textAreaEle);
}
</script>
</body>
<html>Viszont nem másol semmit a vágólapra.
Nos. Végre megy. Kitöröltem a számomra felesleges sallangokat. Létrehoztam egy copy funkciót és egy Copy Buttont:
<html>
<body>
<div id="mainContent">
MAIN CONTENT<br />
</div>
<br />
<button id="btnCopy">COPY</button>
<script type="text/javascript" >
// Create a fake textarea
const textAreaEle = document.createElement('textarea');
var text = "tesztszöveg 3333";
// Set the value
textAreaEle.value = text;
// Append the textarea to body
document.getElementById("mainContent").appendChild(textAreaEle);
btnCopy.onclick = function () {
textAreaEle.select();
textAreaEle.focus();
document.execCommand('copy');
};
</script>
</body>
<html>Aztán az eredeti saját kódomat így módosítottam:
</head>
<body>
<b>AZ EMBED kód előnézete:</b><br />
<iframe src="https://parentdomain.com/embed/id" id="iframe" name="iframe" scrolling="no" frameborder="0" style="width: 100%; height: 600px;"></iframe>
<br /><br />
<div id="myDiv">0</div>
<script type="text/javascript" >
function receiveMessage(event) {
var ifrheig = (event.data.v1) + 'px';
document.getElementById("iframe").style.height = ifrheig;
var v1data = (event.data.v1);
var textNode = document.createTextNode(v1data);
document.body.appendChild(textNode);
var toCopy = '<iframe src="https://parentdomain.com/embed/id" id="iframe" name="iframe" scrolling="no" frameborder="0" style="width: 100%; height: ' + v1data + 'px;"></iframe>';
var innertomydiv = '<b>Embed kódja:</b><textarea rows="5" style="width: 100%;" type="text" id="code" name="code">' + toCopy + '</textarea><button id="btnCopy"><b>COPY</b></button>';
document.getElementById("myDiv").innerHTML = innertomydiv;
btnCopy.onclick = function () {
document.getElementById("code").select();
document.getElementById("code").focus();
document.execCommand('copy');
};
}
window.addEventListener("message", receiveMessage, false);
</script>
</body></html>Így a böngészőben megjelenik az Embed előnézete, alatta egy Textarea mezőben az Iframe kód (Jobb mint az input mező) a magassági értékkel, egy működő Copy gomb, ami vágólapra másolja a Iframe embed kódot, végül teszt gyanánt a magassági érték, de ez a publikus kódban már nem lesz benne.
-
fn helyesen
function encodeHTML(e){return e.replace(/./g,function(e){return"&#"+e.charCodeAt(0)+";"})}bár ez széttöri az emoji-kat (és vsz más komponens karaktereket is)
igazázából lehet elég ez is:function encodeHTML(e){return e.replace(/[<>]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} -
document.write(BA);
Ez felülírja az egész dokumentumot. Keress egy HTML objektumot (pl egy DIV-et) vagy illessz be valahova az oldalba, és add át az innerHTML értékének a kapott adatot (legjobb, egyébként ha fogadó oldalon dobsz rá egyescape-ethtml konvertert*, hogy véletlenül se lehessen szkriptet beinjektálni az oldalba).*
function encodeHTML(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} -
document.write(BA);
Ez felülírja az egész dokumentumot. Keress egy HTML objektumot (pl egy DIV-et) vagy illessz be valahova az oldalba, és add át az innerHTML értékének a kapott adatot (legjobb, egyébként ha fogadó oldalon dobsz rá egyescape-ethtml konvertert*, hogy véletlenül se lehessen szkriptet beinjektálni az oldalba).*
function encodeHTML(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} -
Egy IFRAME-ből ptóbálom kiszedni "a" változó értékét.
<iframe src="https://weboldal.ahol.var.a.ad.egy.erteket/" id="iframe" scrolling="no" frameborder="0" style="width: 100%;"></iframe>Négyféle variációt próbáltam.
1.
var check=document.getElementById("iframe").contentWindow.a;
document.writeln(check);
2.var check=document.getElementById("iframeid").contentDocument.a;document.writeln(check);3.
var b;
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', function(e) {
b = e.data[1];
}, false);
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8
window.attachEvent('onmessage', function(e) {
b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc
});
}
document.writeln(b);ebben az esetben kell egy ilyen kód is az iframe-mel lekért oldalba
window.parent.postMessage(['varA', a], '*');4.
var myFrame = window.frames[0].window;
document.writeln(myFrame.a);Természetesen miért is működne bármelyik is. Mindegyik eredménye Undefined, kivéve a 4. eset, ott semmi. Különböző és azonos domainen lévő Iframe-mel próbálva.
-
Üdv!
Egy popupot szeretnék megoldani, ami kattintásra megnyílik, a benne lévő gombbal bezáródik, illetve azt szeretném, hogyha mellé kattintok, akkor is záródjon be, de ha magára a popupra (a popup területére), akkor ne történjen semmi (ne záródjon be)
Odáig jutottam, hogy a popup szinte csak CSS alapon működik. Piros területen van egy link, arra ha rákattintok, akkor megnyílik a popup div (zöld színnel). A bezárást úgy oldottam meg, hogy a szülő divnek (piros színnel) adtam egy ilyen értéket, hogy:
<div id="parent" onclick="location.href='#';">
Ezzel az a gond, hogy a popup területén is érvényesíti magát.[A kód és a működés itt tekinthető meg]
Próbáltam azt is hogy a children divnek
onclick="return false;"vagyonclick="location.href='#children';"értéket adok , de akkor is a parent divben megadottonclick="location.href='#';"érvényesül, azaz "bezáródik" div.Ötletek esetleg?
-
IV. Verzió
Sajnos még mindig bugos. Nem adja vissza a cookie-t (már eleve azt írja, hogy van, pedig frissen megnyitott böngészőben alapból nem létezhetne) és nem is akar frisssülni a div.Az ötös verzióban visszaraktam a if (document.cookie.indexOf('tesztkuki') == -1 ) értéket és így most úgy néz ki, hogy tökéletes és a funkciójának megfelelően működik
Nem tudom pontosan, hogy az document.cookie.includes miért nem volt jó ehhez, ha ez is azt figyeli, hogy létezik e, majd utána olvasok, ha időm engedi.
Köszönöm a segítséget -
Az első hibát ott véted, hogy a givebackCookie függvényben nem nullázod a cookie értékét, így az if-ednek mindig ugyanaz az ága fog lefutni.
A div újratöltését kezelő kódot meg inkább nem kísérlem meg megérteni és debugolni, meg amúgy is jQuery-t már nem illik 2019-ben használni.
Működő kód:
function wantCookie() {
document.cookie = "tesztkuki=Létezik";
loadDiv();
}
function givebackCookie() {
document.cookie = "tesztkuki=; expires=Thu, 18 Dec 2013 12:00:00 UTC";
loadDiv();
}
window.addEventListener("load", loadDiv);
function loadDiv() {
if (document.cookie.includes('tesztkuki')) {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-want'>Press the button, if you want a cookie<br /><button id='cookiebutton' onclick='wantCookie()'>I want a cookie</button><br /></div> <br />The cookie now DOES NOT exist !";
} else {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-give-back'>Press the button, if you want give back the cookie<br /><button id='cookiebutton' onclick='givebackCookie()'>I give back the cookie</button><br /></div> <br /><br />The cookie now exist !<hr />";
}
}Itt minden cookie változtatás után újratölti a div tartalmát. A
window.addEventListener("load", loadDiv);pedig azért felel, hogy az oldal betöltésekor is fel legyen töltve a div.indexOf helyett használj includes-ot, ha csak annyit akarsz megtudni, hogy tartalmazza-e az adott dolgot.
Továbbá ahogy most a div tartalmát kitöltöd, az nem túl elegáns / karbantartható / error-safe. Használj createElement-et és appendChild-ot.
A fenti kódodat megfixáltam, de erősen ajánlom a fentiek figyelembevételét. Sok későbbi szenvedést tudsz megspórolni.
+1: Ha nem kötelező cookie-t használni, akkor ajánlom inkább a localStore-et.
Szia!
Megpróbáltam a kódot, nem tudom mit rontottam el, de nem működik a codepenben.
Utána nézek az általad írt javaslatoknak, még kezdő vagyok a javascriptben, ezért sokmindennek kell még utánajárnom.
-
Üdv!
<div id="cookie-check">
</div>Tartalmát ez a javascript kód "tölti fel":
if (document.cookie.indexOf('tesztkuki') == -1 ) {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-want'>Press the button, if you want a cookie<br /><button id='cookiebutton' onclick='wantCookie()'>I want a cookie</button><br /></div> <br />The cookie now DOES NOT exist !";
} else {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-give-back'>Press the button, if you want give back the cookie<br /><button id='cookiebutton' onclick='givebackCookie()'>I give back the cookie</button><br /></div> <br /><br />The cookie now exist !<hr />";
}Ha a süti létezik akkor az egyik document.getElementById('cookie-check').innerHTML = fut le, ha nem létezik, akkor a másik.
Van benne gomb, ami amellett, hogy onclick esetén végrehajtja a wantCookie() vagy a givebackCookie() funkciót újratölti a cookie-check id-vel rendelkező divet, ami üres, ezért újratöltés után üres lesz. Én azt szeretném, ha újratöltés után, újra felülírná a javascript a divet a megfelelő tartalommal a fenti if else utasítás szerint.A div újratöltéséért ez a kódrész felel:
$("#cookiebutton").click(function() {
$("#cookie-check").load(" #cookie-check > *");
});A teljes demo itt található:
CODEPEN DEMOElőre is köszönöm a válaszokat!
-
Viszont most kaptam egy ilyen kódot egy másik fórumról
<div id="myDiv">
1234567890 ABCDEFG abcd efg
123
</div>
<div id="button">
<button onclick="myFunction()"><-DEL</button>
</div>
<script>
function myFunction() {
var txt = document.getElementById("myDiv").innerHTML.slice(0,-1);
document.getElementById("myDiv").innerHTML= txt;
//txt.slice(0,-1);
//var txt = $('#myDiv');
//txt.val(txt.val().slice(0, -1));
}
</script>Ez is az első clickre nem történik semmi (legalább is látszólag) betegségben szenved.
-
btz
addikt
Közben találtam egy ilyent is.
Némi átalakítással csináltam belőle egy tartalom felett megjelenő bezárhatzó popup-ot
Van belőle animated verzió is. Nagyon cool
-
Annyit azért hozzáfűznék ehhez a kódódhoz, hogy bár működik, de még bőven van benne hibás működés. Pl. az alábbi sor:
var content = this.parentNode.style.display = 'none';Itt bár a div-et eltűnteni, de a content értéke
true(ami athis.parentNode.style.display = 'none';kifejezés eredménye) lesz, nem pedig maga a tartalom. Ezért az utána lévő display állítás sem fog lefutni. Ha megnézed a console-t látod, hogy hibát dob. Javaslom nézz utána, hogy hogy működnek ezek az alap dolgok (értékadás, visszatérési értékek, callback és hasolnók.Plusz a w3schools-os editor helyett szerintem inkább használj jsfiddle-t az ilyen kis kódokhoz, itt van külön HTML, CSS és JS rész, jóval átláthatóbb az egész, plusz van benne automatikus kódformázás is.
Dehát azt a részt pont te javasoltad, hogy tegyem bele vagy én értettem félre valamit és beletettem, utána elkezdett úgy működni ahogy nekem kell.
Közben találtam a dologra egy végtelenül egyszerű és purritán megoldást. Szóval feleslegesen bonyolítottam az egészet 😃
Remélem ez széles körben standard dolog és a legtöbb böngésző támogatja.Ismerem a jsfidle-t és néha használom is, de ilyen purritán kódnál, az ágyúval verébre kategóriának érzem a használatát, főleg a külön szekcióba szedést (HTML, CSS, JS).
-
Persze, hogy nem tünteti el a gombot, ugyanis nem nyúlsz hozzá a kódodban. A második esetben azért nem történik semmi, mert a
var content = this.nextElementSibling;a gomb utáni, vele egy szinten lévő elemeket választja ki, és ha a gombot a paragrafus után rakod, akkor nem lesz ennek megfelelő DOM elemed. Szerintem itt a jó megoldás az lenne, ha a gombot és a szöveget összefoglaló elemet rejtenéd el. Erre egyszerű megoldás, ha az eventlistener callback-jébe ezt írod:this.parentNode.style.display = 'none'; -
Van egy ilyen dialogom:
https://www.w3schools.com/code/tryit.asp?filename=G4TB4HP92PJ0
Hogyan oldhatnám meg, hogy a dialog tartalma már a betöltéskor megjelenjen és a close gombal bezáródjon?
Jelenleg az van, hogy a dialog alapból nem jelenik meg.
Kellett megkérdeznem, mire megkérdeztem, eszembe jutott egy módszer.
https://www.w3schools.com/code/tryit.asp?filename=G4TBCOXG2KV4
Én totál leszarom, hogy mit használsz, de lássuk be rengeteg eset van, amikor működő, más által is módosítható kódot kell mutatni a segítség kéréshez, márpedig erre nem tudok jobb alternatívát ezeknél.
Új hozzászólás Aktív témák
- Huawei Watch Fit 5 Pro - jó forma
- Formula-1
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Honor Magic7 Pro - kifinomult, költséges képalkotás
- exHWSW - Értünk mindenhez IS
- Forza sorozat (Horizon/Motorsport)
- Milyen autót vegyek?
- Álláskeresés, interjú, önéletrajz
- Fejhallgató erősítő és DAC topik
- A Linux megnégyszerezte magát a Steamen — a Microsoft ismét ígérget
- További aktív témák...
- 24 magos AMD Threadripper alapú munkára kiváló félgép, 128GB RAM-mal
- HP ZBook Fury 15 G7 i7-10850H 32GB 512GB SSD Quadro T2000 4GB FHD HUN bill, szép állapotban eladó
- Eladó MacBook Pro 16,1 2019 CTO
- új 0 km es garanciás lenovo loq rtx 5050 8gb
- Eladó teljesen újszerű karcmentes Samsung Galaxy Watch Ultra
- Dell Latitude 5310 2-in-1,13.3",FHD,i5-10310U,16GB DDR4,256GB SSD,WIN11,LTE KÁRTYA,TOUCH
- ThinkPad X1 Yoga Gen 6/2 év garancia
- HIBÁTLAN iPhone 12 Pro Max 256GB Graphite -2 ÉV GARANCIA - Kártyafüggetlen, MS4520
- ÚJ! Lenovo Yoga PRO 9 Ultra 9 285H 32GB RAM 2x1TB SSD RTX 5060 8GB 16" QHD+++ OLED 3év Prémium GAR
- GYÖNYÖRŰ iPhone 14 Pro 256GB Deep Purple -2 ÉV GARANCIA - Kártyafüggetlen, MS4775, 100 AKKSI
Állásajánlatok
Cég: Laptopműhely Bt.
Város: Budapest