Hirdetés

Keresés

Új hozzászólás Aktív témák

  • martonx
    veterán

    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.

    Nem kétlem, hogy valamicske időt belefektettél a kódok innen-onnan összegubrincsolásába. Viszont szerintem te is látod, hogy ez nem egy olyan egyszerű dolog, mint megtanulni fát vágni. A kérdésekkel semmi baj nincs, amint azok egy fórum keretein belül pár mondattal, pár sornyi példa kóddal megválaszolhatóak.
    Esetedben viszont nem ez a helyzet. X órát elszórakoztál netről innen onnan leszedett cuccokkal, és most ezeket mutogatva várod, hogy valaki csinálja meg (mert azok a kódok simán kukázhatóak, nem 1-2 sorral van bennük baj, hanem koncepcionálisan), magyarázza el, tanítson meg téged. Ez így nem fog menni. :(

    Mindenesetre ha utána nézel a Fetch API-nak, async, await-nek, Promise-nak, akkor meg fogod tudni oldani amit szeretnél.

  • btz
    addikt

    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.

    Illetve azt sem vártam el senkitől sem itt, sem máshol, hogy hűde sürgösen helyettem rakjon össze egész weboldalakat, így ezt az atomerőműves példát sem tudom behelyettesíteni az én esetemre.
    Nekem bőven az is elég ha támpontot ad valaki egy egy problémára, (ahogy például te is tetted a fenti DOM Content Loadedes példával, ami sajnos nem hozott eredményt ugyan, illetve már a kérdés feltevése előtt is próbálkoztam vele, mégis hasznos megközelítése a segítségnyújtásnak). Nem várom el senkitől hogy helyettem dolgozzon,helyettem írja meg a kódot. Szóval úgy gondolom rosszul látod a dolgot.

  • martonx
    veterán

    Szerintem pedig belefér a fórum keretei közé egy egy probléma JavaScriptel való megoldása. A programozás is azért van, hogy problémát oldjon meg, nem önmagában azért, hogy az unalmas perceinket ezzel töltsük ki.
    Én úgy érzem, hogy hogy lehet így is megtanulni a dolgot, problémák megoldása közben. Hidd el, hogy az elmúlt pár hónapban mióta komolyabban foglalkozom programozással, nagyon sokminden megértettem megtanultam, nem csak a kosz ragadt rám.
    A fenti példából is sokat tanultam és utána is olvastam pár dolognak. Nem ezzel foglalkozom napi 8 órában, nem ez a fő profilom, így idő hiányában lassabban haladok, mint ha egy tanfolyamon napi 8 órában, vagy a teljes munkaidőmben ezzel tudnék foglalkozni
    Sajnos a jelenlegi gazdasági helyzetben nem fér bele százezrek kiadása tanfolyamokra, szakértőkre. Abból kell gazdálkodni ami van.

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

  • martonx
    veterán

    Amúgy ha akarok több .html fájlt is beszúrni akkor mindegyik elé kell egy callback konstans?

    <script>
    const callback = () => {
    ....
    };
    includeHTML("content.html", "content", callback);

    const callback2 = () => {
    ....
    };
    includeHTML("content2.html", "content2", callback2);
    </script>

    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.

  • btz
    addikt

    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 :D
    Köszi a segítséget :)

    Amúgy ha akarok több .html fájlt is beszúrni akkor mindegyik elé kell egy callback konstans?

    <script>
    const callback = () => {
    ....
    };
    includeHTML("content.html", "content", callback);

    const callback2 = () => {
    ....
    };
    includeHTML("content2.html", "content2", callback2);
    </script>

  • disy68
    aktív tag

    [HTML beágyazott kód QuerySelector működés]

    Közben felmerült a kérdés, hogy ha a content.html output2 elemébe nem klikk eseménykor, hanem betöltéskor, akarok berakni valamit, akkor azt hogyan tehetem meg. Sajnos csak ilyen csúnya megoldás jutott eszembe:

    setTimeout(function() {
    var output2var = document.getElementById("output2");
    output2var.innerHTML = "OUTPUT2 IS WORKING";
    }, 1000);

    TELJES KÓD

    Azaz setTimeoutal megvárom a teljes betöltést. Elég gány.

    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

  • martonx
    veterán

    [HTML beágyazott kód QuerySelector működés]

    Közben felmerült a kérdés, hogy ha a content.html output2 elemébe nem klikk eseménykor, hanem betöltéskor, akarok berakni valamit, akkor azt hogyan tehetem meg. Sajnos csak ilyen csúnya megoldás jutott eszembe:

    setTimeout(function() {
    var output2var = document.getElementById("output2");
    output2var.innerHTML = "OUTPUT2 IS WORKING";
    }, 1000);

    TELJES KÓD

    Azaz setTimeoutal megvárom a teljes betöltést. Elég gány.

    Ez kell neked: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

    A SetTimeOut-os megoldás bénácska, és megbízhatatlan. Nem erre való.

  • btz
    addikt

    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>

    A működő kód

    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"

    [HTML beágyazott kód QuerySelector működés]

    Közben felmerült a kérdés, hogy ha a content.html output2 elemébe nem klikk eseménykor, hanem betöltéskor, akarok berakni valamit, akkor azt hogyan tehetem meg. Sajnos csak ilyen csúnya megoldás jutott eszembe:

    setTimeout(function() {
    var output2var = document.getElementById("output2");
    output2var.innerHTML = "OUTPUT2 IS WORKING";
    }, 1000);

    TELJES KÓD

    Azaz setTimeoutal megvárom a teljes betöltést. Elég gány.

  • dqdb
    nagyúr

    Üdv!
    Random számokat szeretnék kiíratni X darabot, de azt szeretném, hogy az X darabon belül ne legyen kétszer ugyan az a szám kiírva. Mondjuk ha az 5 egyszer már volt, akkor az ne legyen mégegyszer abban a körben. Ha mondjuk a random csak 0-9 ig terjedő számok közül választhat, de X 15-el egyenlő, azaz 15 darab kellene, akkor is csak 10 szám legyen random sorban (a nullával együtt ugye), azaz a fontosabb prioritás az legyen, hogy ne ismétlődjön egy körben a random szám, mintsem az X értéke.

    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, egy A-tól B-ig vagy A-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ől shift() 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, hogy O(1) időt igényel O(n) helyett, de a generálás már legjobb esetben is O(n×log n) lesz O(1) helyett.

  • btz
    addikt

    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>

    A működő kód

    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 🙂

  • disy68
    aktív tag

    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>

    A működő kód

    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"

    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

  • cattus
    addikt

    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>

    A működő kód

    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"

    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ént click esemé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 a click esemény végigfolyik a DOM elemein.

  • btz
    addikt

    Ü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>

    A működő kód

    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"

  • cattus
    addikt

    De pont így lesz a benne lévő érték '450px', nélküle csak 450px lenne.

    document.getElementById('demo2').innerHTML = `'${height250}px'`;
    Demo2-be bele is írattam, hogy lássam, milyen érték lesz belőle

    Neked egy string kell, aminek az értéke 450px, nem pedig '450px'. A backtick-es kifejezésből automatikusan string lesz, nem kell hozzá az extra idézőjel.

  • dqdb
    nagyúr

    var height = 200;
    var height250 = 200+250;
    var x = `'${height250}px'`;
    var x = '450px';
    document.getElementById('demo').style.paddingTop = x;

    Ha az alsó var x-et használom, beállítja demo element paddingtop-ját 450px-re , ha kikommentelem az alsó var x = ''450px'-et, akkor nem. Pedig a felső var x értéke ugyan az kell, hogy legyen.

    JSFiddle

    Vagy `, vagy ', de nem egyszerre a kettő.

  • Doink
    aktív tag

    Van X db képem. A példában most legyen 1538, és ezt Y darabszámban szeretném megjeleníteni. A példában legyen ez 200.

    var allpicture = 1583;
    var pictureperpage = 200;
    var actualpage = 1;

    Készítettem egy változót ami kiszámolja, hogy hány lapon fér el X kép:
    var totalpage = Math.ceil(allpicture / pictureperpage);

    Mi az első és utolsó kép száma az N. lapon.
    if (actualpage == 1) { var firstpiconpage = 1; } else {
    var firstpiconpage = ((actualpage - 1) * pictureperpage) + (actualpage - 1); }
    if (actualpage == 1) { var lastpiconpage = firstpiconpage + (pictureperpage-1); } else {
    var lastpiconpage = firstpiconpage + pictureperpage;
    }

    if (firstpiconpage > allpicture) { var firstpiconpage = allpicture; }
    if (lastpiconpage > allpicture) { var lastpiconpage = allpicture; }

    Kérdésem a szokásos. Van e valamilyen forumla, amivel egyszerűbb lehet a kód?
    JSFiddle DEMO

    var firstpiconpage = (actualpage - 1) * pictureperpage + 1;
    var lastpiconpage = (actualpage - 1) * pictureperpage + pictureperpage;

    Az if-ek nem kellenek.

  • martonx
    veterán

    Van X db képem. A példában most legyen 1538, és ezt Y darabszámban szeretném megjeleníteni. A példában legyen ez 200.

    var allpicture = 1583;
    var pictureperpage = 200;
    var actualpage = 1;

    Készítettem egy változót ami kiszámolja, hogy hány lapon fér el X kép:
    var totalpage = Math.ceil(allpicture / pictureperpage);

    Mi az első és utolsó kép száma az N. lapon.
    if (actualpage == 1) { var firstpiconpage = 1; } else {
    var firstpiconpage = ((actualpage - 1) * pictureperpage) + (actualpage - 1); }
    if (actualpage == 1) { var lastpiconpage = firstpiconpage + (pictureperpage-1); } else {
    var lastpiconpage = firstpiconpage + pictureperpage;
    }

    if (firstpiconpage > allpicture) { var firstpiconpage = allpicture; }
    if (lastpiconpage > allpicture) { var lastpiconpage = allpicture; }

    Kérdésem a szokásos. Van e valamilyen forumla, amivel egyszerűbb lehet a kód?
    JSFiddle DEMO

    Tulbonyolitod, de mobilról nem fogok tudni többet segíteni. Abból indulj ki, hogy hanyadik lapot akarod megjeleniteni, illetve egy lapon hány képet akarsz megjeleniteni. Mindegyik képet berakod egy tömbbe, és pont azokat veszed ki, amik kellenek.

  • cattus
    addikt

    Igen ezzel csökken az a terület, ami undefinedet ad, de magára az ikonos részre kattintva továbbra is undefined. De ha például nem is kell majd valahol szöveg, csak az ikon a gombon?

    De úgy néz ki, hogy a régi tradicionális módszer esetén nem lenne gond.

    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;

  • cattus
    addikt

    Sziasztok!

    Ismét egy Javascript probléma. (Ezzel mindig csak probléma van, de az is lehet hogy csak velem :D )

    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)

    A gomb szövegét a </i> után rakjad.

  • cattus
    addikt

    Biztos erre is van szebb kód, ami nem anti-pattern és 2020-ban is megállja a helyét:
    Kiválasztott checkbox elemek kiíratása. A példakódban Alert-be és Console.log-ba
    A kiválasztott elemeket vessző, majd szóköz választja el a megjelenített ablakban, de az utolsó elemnél is megjelenik ez a vessző és szóköz, ami nem kell. Ezt úgy oldottam meg, hogy a kapott elemlista stringből levágok két karaktert, ami a vessző és a szóköz.

    function printChecked(){
    var items=document.getElementsByName('acs');
    var selectedItems="";
    for(var i=0; i<items.length; i++){
    if(items[i].type=='checkbox' && items[i].checked==true)
    selectedItems+=items[i].value+", ";
    }
    var str = selectedItems.substring(0, selectedItems.length - 2);
    alert(str);
    console.log(str);
    }

    JSFiddle Demo

    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ább document.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).

  • martonx
    veterán

    "jsfiddle-nek a html részébe erőltetted bele a javascriptet :D "

    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. :D

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

    "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 volna :)

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

  • martonx
    veterán

    Például a nagy kék felugró boilerplate bar miatt (Talán csak a GDPR felugrók az idegesítőbbek nála), a becsukhatatlan menük miatt (Egy kódokkal foglalkozó oldalon ilyen?) stb... Volt egyszer olyan nyűgje is hogy teljesen kifagyasztotta a gépet mikor a forkra kattintottam egy kódnál (De legalább ez már jó). Mobileszközön egy az egyben használhatatlan.
    A codepent viszont jobban szeretem, de igazából a böngésző ablakot preferálom. Kódot mutogatni viszont végül is mindegy, hogy melyiket használja az ember.

    "A kódod egyébként borzalmas"

    Pontosan mi az ami borzalom rajta? Formailag oké, ezt most csak így összedobtam, de van esetleg más borzalom is benne?

    Jim-Y is összeszedett párat, amin alapból kiakadtam, hogy jsfiddle-nek a html részébe erőltetted bele a javascriptet :D
    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". :D

  • Jim-Y
    veterán

    Például a nagy kék felugró boilerplate bar miatt (Talán csak a GDPR felugrók az idegesítőbbek nála), a becsukhatatlan menük miatt (Egy kódokkal foglalkozó oldalon ilyen?) stb... Volt egyszer olyan nyűgje is hogy teljesen kifagyasztotta a gépet mikor a forkra kattintottam egy kódnál (De legalább ez már jó). Mobileszközön egy az egyben használhatatlan.
    A codepent viszont jobban szeretem, de igazából a böngésző ablakot preferálom. Kódot mutogatni viszont végül is mindegy, hogy melyiket használja az ember.

    "A kódod egyébként borzalmas"

    Pontosan mi az ami borzalom rajta? Formailag oké, ezt most csak így összedobtam, de van esetleg más borzalom is benne?

    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

  • martonx
    veterán

    Ösztönből utálom a Jsfiddlet, de a kedvedért most használtam :)

    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 :U É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 :D

  • martonx
    veterán

    Üdv!

    Van egy <a> link,aminek van két data értéke bookID és bookName. Erre rákattintva egy felugró ablak megjelenik az adott értékekkel. JQuery-s megoldásom van, de érdekelne, hogy simple Javascriptel meg lehet e oldani? Mindenhol ahol keresgéltem, csak Jquery-s megoldások vannak.

  • disy68
    aktív tag

    Úgy érted, hogy funkción kívül? De akkor meg nem lesz start funkcióm.

    Egy másik példa:

    Ha nem funkcióban van a változó, akkor megy:
    https://www.w3schools.com/code/tryit.asp?filename=GENNHPYKDWUR

    Így viszont már nem:
    https://www.w3schools.com/code/tryit.asp?filename=GENNKLS0GE1L

    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)

  • dqdb
    nagyúr

    Üdv!
    Van egy modal.js-em. Nem akar stoppolódni!

    ...
    function startCallback() {
    var startCB = window.setInterval(myCallback, 500, -1);
    }

    function stopCallback() {
    console.log('TRY TO STOP');
    window.clearInterval(startCB);
    console.log('STOPPED');
    }

    function myCallback(a)
    {
    plusSlides(a);
    }
    ...

    Start onclickre el kezdi cserélni a képeket a slider, de stopra ezt a hibát kapom:
    modal.js:44 Uncaught ReferenceError: startCB is not defined
    at stopCallback (modal.js:44)
    at HTMLAnchorElement.onclick

    A startCB-t lokális változóként definiálod.

  • btz
    addikt

    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.

  • nevemfel
    senior tag

    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.

    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:

    [link]

  • martonx
    veterán

    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.

    Ember, szokjál már rá a jsfiddle-re

  • cattus
    addikt

    Nem bele szeretném, hanem mellé helyezni. Az első Iframe a megjelenítési minta. Tehát az user ebből látja, hogy fog kinézni a kód eredménye, amit az inputból kimásol.
    Az input azért kell, hogy a felhasználó könnyen ki tudja jelölni és másolni belőle az Iframe kódot, majd azt beilleszteni máshová, például a saját weboldalába, a megfelelő magassági értékkel együtt. Ekkor már a JavaScript-et el is hagyhatja, mivel olyan Iframe kódot másol ki, ami tartalmazza az Iframe contentjének magasságát. De ez nem is kéne, ha valahogy találnék egy lehetőséget gombnyomásra be másolni az user vágólapjára az Iframe kódot. Mivel ez a cél, hogy az user könnyedén copyzza.

    Vágólapra másolás: [link]

  • sztanozs
    veterán

    Pontosan hogy is tudnám a "var innertomydiv" változómat végigfuttatni ezzel? Bocsi, de én már hosszú ideje kezdő vagyok Javascriptben, így ez egy kicsit magas, hogyan is tudnám ezt alkalmazni, de akár az előző BA változós példához is jó lenne, tudnom, hogyan is varázsolhatom bele, illetve hogyan nyerhetem ki, mondjuk egy új változóban?

    Emoik nem lesznek benne, csak a példában is látott input mező benne az input mezőben lévő iframe html kód a magassági értékkel együtt ami a v1data változóban van tárolva.

    var innertomydiv = '<input style="width: 100%;" type="text" id="frame" name="frame" value="&lt;iframe src=&#039;https://website.com/embed/id&#039; id=&#039;iframe&#039; name=&#039;iframe&#039; scrolling=&#039;no&#039; frameborder=&#039;0&#039; style=&#039;width: 100%; height: ' + v1data + ';&#039;&gt;&lt;/iframe&gt;">';

    UPDATE:
    A kimásolandó kód értékét elrontottam, mert id="iframe" name="iframe" helyett csak id="frame" name="frame" van az input mezőben.

    Amúgy az még jobb lenne, ha valami buttonnal az egész értéket a vágólapra is lehetne tenni. Ennek még utánanézek.

    Nem igazán értem, miért akarasz egy iframe-be beilleszteni egy input mezőt, aminek a tartalma egy iframe elem html-kódolt kódja...

  • sztanozs
    veterán

    Így már sikerül továbítani a variablet, de az egész oldalt felülírja

    Ez van az IFRAME-lendő oldalban.
    var MYGLOBAL = 'MYGLOBAL okkéé';
    parent.postMessage({v1: MYGLOBAL}, "*"); 

    Ez pedig abban, amiben az Iframe is
    <iframe src="https://weboldal.ahol.var.MYGLOBAL.ad.egy.erteket/" id="iframe" scrolling="no" frameborder="0" style="width: 100%;"></iframe>

    <script type="text/javascript" >
    addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
     var BA = (event.data.v1);
    document.write(BA);
    }</script>

    Eredmény hogy fehér lapon meglkapom, hogy "MYGLOBAL okkéé" de ez eltünteti magát az Iframet.

    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á egy escape-et html 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)+";"})}

  • btz
    addikt

    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.

    Így már sikerül továbítani a variablet, de az egész oldalt felülírja

    Ez van az IFRAME-lendő oldalban.
    var MYGLOBAL = 'MYGLOBAL okkéé';
    parent.postMessage({v1: MYGLOBAL}, "*"); 

    Ez pedig abban, amiben az Iframe is
    <iframe src="https://weboldal.ahol.var.MYGLOBAL.ad.egy.erteket/" id="iframe" scrolling="no" frameborder="0" style="width: 100%;"></iframe>

    <script type="text/javascript" >
    addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
     var BA = (event.data.v1);
    document.write(BA);
    }</script>

    Eredmény hogy fehér lapon meglkapom, hogy "MYGLOBAL okkéé" de ez eltünteti magát az Iframet.

  • btz
    addikt

    Ü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;" vagy onclick="location.href='#children';"értéket adok , de akkor is a parent divben megadott onclick="location.href='#';" érvényesül, azaz "bezáródik" div.

    Ötletek esetleg?

    Közben megtaláltam a kellő működésű popupot, ráadásul teljesen CSS, nem kell Javascriptes dolgokat sem használni hozzá
    Azért még érdekel, hogy JavaScript alapon hogyan lehetne kivitelezni.

  • btz
    addikt

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

  • cattus
    addikt

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

    Bocsi, elrontottam, a
    window.addEventListener("load", loadDiv);
    sort cseréld ki erre:
    document.addEventListener("DOMContentLoaded", loadDiv);

  • btz
    addikt

    Ü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 DEMO

    Előre is köszönöm a válaszokat!

    A kódnak ebben a változatában kicseréltem a

    $("#cookiebutton").click(function() {
    $("#cookie-check").load(" #cookie-check > *");
    });

    funkciót

    $("#cookiebutton").click(function() {
    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 />";
    }
    });

    funkcióra.
    Így most az első klikk hatására visszaírja a divet a megfelelő tartalommal, de még egy kattintást már nem enged, másodjára nem változik a div a gombnyomásra.

  • cattus
    addikt

    Ü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 DEMO

    Előre is köszönöm a válaszokat!

    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. :D

    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.

  • #57018880
    törölt tag

    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.

    <div id="myDiv">
    1234567890 ABCDEFG abcd efg
    123
    </div>

    Ezért "nem működik" elsőre, valójában működik, ha teljesen egy sorba írod akkor nem lesz ott extra karakter amit törölhet.

    //látom közben meglett :)

  • btz
    addikt

    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.

    Á, tudtam én hogy az ebédszünet meghozza a megoldást, ha nem gondolkodom rajta, egyből beugrik. Az enter az utolsó karakter és e lezáró div között. Azt törli ki elősször.
    Így mostmár hibátlan 🙂

  • petyus_
    senior tag

    Köszönöm a megoldást. Így már működik, amit szeretnék.
    Egyetlen gond van vele, hogy az első klikknél nem csinál semmit, csak a második kattintás után kezdi törölni a div tartalmát.

    Valószínűleg van a végén whitespace, és azt vágja le először, hívja rajta egy trim()-et.

    (viszont akkor a spacek alapból mindig törölve lesznek, nem tudom ez gond-e).

  • Csepe
    aktív tag

    Ez a verzió pedig egyszerűen nem működik és nem értem, hogy miért?

    <div id="myDiv">
    1234567890 ABCDEFG abcd efg
    123
    </div>
    <p>This is a paragraph outside the div.</p>
    <script>
    function myFunction() {
    var txt = $('#myDiv');
    txt.val(txt.val().slice(0, -1));
    }
    </script>

    <button onclick='myFunction()'>TÖRLÉS</button>

    Szia!

    A .val() az input elemek value értékét kéri le, ha egy div elem szövegét akarod módosítani, akkor a .text(), vagy a .html() metódusokat lehet használni.

  • petyus_
    senior tag

    Nem fontos az animáció. A lényeg az lenne, hogy törölhető legyen a div tartalma gombnyomásra, csak a gombnyomás nem az egész div contetntet törölné, hanem csak egy egy karaktert gombnyomásonként. Egyfajta backspaceként működne.

    $(document).ready(function(){
    $("button").click(function(){
    const div = $('#myDiv');
    div.text(div.text().substring(0,div.text().length-1))
    });
    });

  • mobal
    nagyúr

    Hogyan tudnám törölni egy div tartalmát karakterről larakterre a végéről indulva?

    https://codepen.io/bzozoo/pen/xoXNXG
    Így törli a div tartalmát, de csak egyszerre.

    Animációt akarsz kvázi?

  • Jim-Y
    veterán

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

    Ugyanez amit csinaltal, csak szebben megoldva szeparalava a kodot. https://jsfiddle.net/3ky9chug/

  • cattus
    addikt

    Őöö..... hova is kell beilleszteni pontosan?
    A content = this.nextElementSibling helyére?

    Updata:
    Ah megvan.
    Így már működik.
    Köszi. 🙂

    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 a this.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.

  • cattus
    addikt

    Javascriptel szeretnék bezárni egy szövegrészt vagy egy egész divet egy bezár gombbal és magát a bezár gombot is el akarom tünteni.

    A dialogal már próbálkoztam és működik is, de azt írják, hogy nem valami standard cucc, ezért szeretnék valami mást. A másik problémám még vele, hogy bezáráskor a tartalom az oldal tetejére ugrik, ami nem biztos, hogy jó, ha a felhasználó egy hosszú lap alján van.

    Jelenleg van egy ilyenem. Ez bezárja ugyan a szöveget de magát a bezár gombot nem. És ha a gombot alulra teszem, akkor még azt sem.

    Érdekelne, hogy milyen lehetőségek vannak még erre.

    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';

  • btz
    addikt

    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. :D

    https://www.w3schools.com/code/tryit.asp?filename=G4TBCOXG2KV4

  • #57018880
    törölt tag

    Hosszas kinlódás után sikerült gányolnom egy Javascript popup alapú contentgate-t :D
    Készítettem róla egy kis dokumentációt, hogy a későbbiekben is meglegyen egyhelyen, ne kelljen annyit coderkedni :DDD
    Itt megtekinthető.
    Szivesen várom az alternatívákat egy jobb kódra :D

    Hát, meg kell hagyni túlbonyolítottad amennyire csak lehetett :)

Új hozzászólás Aktív témák

Hirdetés