[GELOEST] Wie Div mit anderem Div tauschen (replace)

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Matthias

Mitglied
15 April 2017
98
0
6
31
Hallo,

ich habe mir ein Tool gekauft, das einen kurzen Webseiten-Code enthält.

Der Code ist als solches recht einfach. Geändert werden kann der Code über ein Dashboard, dass einige Veränderungen zulässt, wie
z.B. Farbe und Überschrift.

Allerdings möchte ich die Webseite in einer anderen Sprache nutzen. Leider kann über das Dashboard nicht der gesamte Text verändert werden.

Es geht um folgenden Div:

HTML:
<div style="border-radius: 4px; background-color: #f5f5f5; padding: 25px; margin-bottom: 15px; ">

                        <div style="margin-bottom: 10px;">Deine Position in der Warteschlange: <strong class="queue-number" style="color: #2196f3;">0</strong></div>

                        <div>Voraussichtliche Wartezeit: <strong class="queue-time" style="color: #2196f3;">0 Minuten</strong></div>
Dass "Deine Position in der Warteschlange: " sowie "Voraussichtliche Wartezeit: " möchte ich auf Spanisch übersetzen. Nach etwas umhersuchen habe ich herausgefunden, dass Javascript eine replace Möglichkeit gibt.

Kann mir jemand einen solchen Code hier posten, da ich so gut wie keine Javascript-Kenntnisse habe und es mich wohl Tage kosten würde, bis ich so eine kleine Änderung hinbekomme.


Hier mal der gesamte Body Code:

HTML:
<body style="overflow-x: hidden; background-color: #3c7fff;color: #444;">

    <div id="row-im6pgjas" class="" style="padding-top: 21px; padding-bottom: 0px; background-color: rgb(255, 255, 255); box-shadow: 2px 4px 30px 5px rgba(0, 0, 0, 0.05); border-radius: 10px; max-width: 500px;width: calc(100% - 30px);margin-top: 20px;margin-bottom: 30px;padding: 25px;margin-left: auto;margin-right: auto;background-color: #fff;font-size: 16px;font-weight: 500;" data-parallax-enabled="true">
        <div class="container" style="">
            <div class="row">
                <div class="col-md-12">
                    <div style="margin-bottom: 25px; text-align: center;">
                        <img src="" style="max-height: 125px;">
                    </div>
                    
                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center;">
                        Espera por favor
                    </div>

                    <div style="margin-bottom: 35px;">
                        Das ist ein Test.
                    </div>

                    <div class="progress" style="margin-bottom: 35px; box-shadow: none;">
                        <div class="progress-bar" style="padding: 0; background-color: #2196f3;"></div>
                    </div>

                    <div style="border-radius: 4px; background-color: #f5f5f5; padding: 25px; margin-bottom: 15px; ">
                        <div style="margin-bottom: 10px;">Deine Position in der Warteschlange: <strong class="queue-number" style="color: #2196f3;">0</strong></div>
                        <div>Voraussichtliche Wartezeit: <strong class="queue-time" style="color: #2196f3;">0 Minuten</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="row-P7YpktjW" class="" style="border-style:solid;border-width:3px;border:none;border-radius:0;outline:none medium;outline-color:initial;outline-style:none;outline-width:medium;padding-bottom:0;padding-top:6px;">
        <div class="container" style="border-style:solid;border-width:3px;border:none;border-radius:0;background-attachment:fixed;background-size:cover;margin-bottom:0px;outline:none medium;outline-color:initial;outline-style:none;outline-width:medium;padding-top:0px;">
            <div class="row">
                <div class="col-md-12">
                    <div id="element-HaNkPfng" class="editor" style="font-size:12px;color:#b3b3b3;">
                        <div>
                            <p style="text-align: center;">
                                
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="https://page.convertload.io/js/page.js"></script>



</body>
Vielen Dank
 

basti1012

Senior HTML'ler
26 November 2017
1.312
131
63
39
Minden
sebastian1012.bplaced.net
Geht das nur um die beiden Sätze?
Wenn das eine ganze Seite ist gebe es andere möglichkeiten eine Webseite Mehrsprachig zu machen.
Bei deinen beiden Sätze würde ich ehr beide Sprachen ins Html schreiben und die Container ein und aus blenden.

Habe sowas mal letztes Jahr gemacht weil das schon mal ein Thema wahr
Das ist jetzt ohne JS.
Das könntest du genau so machen.

´Jenachdem wie die Umschaltung bei dir ist kann man die Container auch mit JS ein und ausblenden wenn CSS Lösung nicht geht oder gewollt ist.
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Danke für die Hilfe.

Ja, es geht nur um die beiden Sätze.
Leider kann ich das HTML des Bodys nicht direkt bearbeiten. Mir bleibt nur Zugang zum Header und Footer.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Verstehe. Versuche dies Javascript im Footer:
Code:
    <script>
        const pos = document.querySelector('strong.queue-number').parentNode;
        const textNodePos = document.createTextNode("tu posición en la cola ");
        pos.replaceChild(textNodePos, pos.firstChild);
        const time = document.querySelector('strong.queue-time').parentNode;
        const textNodeTime = document.createTextNode("tiempo de espera esperado ");
        time.replaceChild(textNodeTime, time.firstChild);
    </script>
Wahrscheinlich müsste dann auch das "Minuten" ersetzt werden, aber versuche erst Mal dies.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Das wird jetzt wahrscheinlich etwas aufwändiger, weil dieser Text sicher dynamisch eingetragen wird, so eine Art Countdown, nicht wahr? Man würde dann am besten einen Mutation Observer verwenden.
 

basti1012

Senior HTML'ler
26 November 2017
1.312
131
63
39
Minden
sebastian1012.bplaced.net
Kann man die Texte nicht bei der Convertload Software ändern ?
Mein Bildschirm ist leider nicht der größte deswegen kann ich das auf den Video nicht erkennen was man da alles einstellen kann ?
 

Matthias

Mitglied
15 April 2017
98
0
6
31
Leider kann dieser Teil in Convertload nicht bearbeitet werden.

Ja, die Minuten/Sekunden scheinen mir mittels

Code:
<strong class="queue-time" style="color: #2196f3;">0 Minuten</strong>
dynamisch erzeugt zu werden.

Ich würde mich aber auch mit einer statischen Anzeige "Segundos" zufrieden geben.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Versuche dieses Javascript mit Mutation Observer:
Code:
        const pos = document.querySelector('strong.queue-number').parentNode;
        const textNodePos = document.createTextNode("tu posición en la cola ");
        pos.replaceChild(textNodePos, pos.firstChild);
        const time = document.querySelector('strong.queue-time').parentNode;
        const textNodeTime = document.createTextNode("tiempo de espera esperado ");
        time.replaceChild(textNodeTime, time.firstChild);
        const cont = document.querySelector('strong.queue-time');
        function replaceUnits() {
            cont.innerHTML = cont.innerHTML.replace('Minuten', 'minutos').replace('Sekunden', 'segundos');
        }
        replaceUnits();
        const observer = new MutationObserver((mutations) => {
            console.log(mutations);
            if (cont.textContent.indexOf('Minuten') != -1 || cont.textContent.indexOf('Sekunden') != -1)
                replaceUnits();
        });
        observer.observe(cont, { characterData: true, childList: true });
Wurde hiermit getestet:
Code:
<!DOCTYPE HTML>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Replace Text</title>
    <style>
    </style>
</head>

<body style="overflow-x: hidden; background-color: #3c7fff;color: #444;">

    <div id="row-im6pgjas" class=""
        style="padding-top: 21px; padding-bottom: 0px; background-color: rgb(255, 255, 255); box-shadow: 2px 4px 30px 5px rgba(0, 0, 0, 0.05); border-radius: 10px; max-width: 500px;width: calc(100% - 30px);margin-top: 20px;margin-bottom: 30px;padding: 25px;margin-left: auto;margin-right: auto;background-color: #fff;font-size: 16px;font-weight: 500;"
        data-parallax-enabled="true">
        <div class="container" style="">
            <div class="row">
                <div class="col-md-12">
                    <div style="margin-bottom: 25px; text-align: center;">
                        <img src="" style="max-height: 125px;">
                    </div>

                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center;">
                        Espera por favor
                    </div>

                    <div style="margin-bottom: 35px;">
                        Das ist ein Test.
                    </div>

                    <div class="progress" style="margin-bottom: 35px; box-shadow: none;">
                        <div class="progress-bar" style="padding: 0; background-color: #2196f3;"></div>
                    </div>

                    <div style="border-radius: 4px; background-color: #f5f5f5; padding: 25px; margin-bottom: 15px; ">
                        <div style="margin-bottom: 10px;">Deine Position in der Warteschlange: <strong
                                class="queue-number" style="color: #2196f3;">0</strong></div>
                        <div>Voraussichtliche Wartezeit: <strong class="queue-time" style="color: #2196f3;">0
                                Minuten</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="row-P7YpktjW" class=""
        style="border-style:solid;border-width:3px;border:none;border-radius:0;outline:none medium;outline-color:initial;outline-style:none;outline-width:medium;padding-bottom:0;padding-top:6px;">
        <div class="container"
            style="border-style:solid;border-width:3px;border:none;border-radius:0;background-attachment:fixed;background-size:cover;margin-bottom:0px;outline:none medium;outline-color:initial;outline-style:none;outline-width:medium;padding-top:0px;">
            <div class="row">
                <div class="col-md-12">
                    <div id="element-HaNkPfng" class="editor" style="font-size:12px;color:#b3b3b3;">
                        <div>
                            <p style="text-align: center;">

                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button id="change">Change</button>
    <script>
        const pos = document.querySelector('strong.queue-number').parentNode;
        const textNodePos = document.createTextNode("tu posición en la cola ");
        pos.replaceChild(textNodePos, pos.firstChild);
        const time = document.querySelector('strong.queue-time').parentNode;
        const textNodeTime = document.createTextNode("tiempo de espera esperado ");
        time.replaceChild(textNodeTime, time.firstChild);
        const cont = document.querySelector('strong.queue-time');
        function replaceUnits() {
            cont.innerHTML = cont.innerHTML.replace('Minuten', 'minutos').replace('Sekunden', 'segundos');
        }
        replaceUnits();
        const observer = new MutationObserver((mutations) => {
            console.log(mutations);
            if (cont.textContent.indexOf('Minuten') != -1 || cont.textContent.indexOf('Sekunden') != -1)
                replaceUnits();
        });
        observer.observe(cont, { characterData: true, childList: true });

        // Nur zum Test:
        let val = 1;
        document.querySelector('#change').addEventListener('click', () => {
            cont.innerHTML = val + ' Sekunden';
            val++;
        });
    </script>
</body>

</html>
 
  • Like
Reaktionen: Matthias