Kartendienst erst nach Zustimmung laden

1 Lena567

Ein Kartendienst soll erst geladen werden, wenn der Nutzer auf eine bestimmte Schaltfläche klickt.
Siehe hier:
http://lena91567.bplaced.net/Karte

Ich möchte es jedoch so haben, dass der Text
Unsere Datenschutzerklärung mit Infos zum Kartendienst finden Sie auf der Seite Datenschutz.
Nicht zu Schaltfläche gehört, sondern nur der Text
wenn Sie die Datenschutzerklärung akzeptieren die Karte laden möchten, dann klicken Sie bitte hier.

Das ganze soll wie bisher angeordnet sein.

Habe mir gedacht, dass sich das den folgenden Abschnitt in der CSS

#map {
	position: relative;
	height: 500px;
	background: #F4F4F4;
}
#map .opt-in-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	max-width: 20rem;
	padding: 13px;
	border-radius: 0.5em;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	background: #E3E3E3;
	font-size: 17px;
	color: #333;
	cursor: pointer;
}
#map .opt-in-button:hover {
	background: #FFF;
}

folgendermaßen ändere

#map .opt-in-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    max-width: 20em;
}
#map .opt-in-button-wrapper .info {
    color: #333;
    padding: 0 0 19px 0;
}
#map .opt-in-button-wrapper .button {
    color: #333;
    background: #E3E3E3;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 0.5em;
    cursor: pointer;
    font-weight: 700;
}

Aber wie ich das im Skript zu ändern habe, das weiß ich leider nicht.

Wie muss ich denn das Skript abändern, damit das Ganze wie gewollt gelingt?
http://lena91567.bplaced.net/Karte/js/opt-in.js

2 Jörg Kruse

Der Text wird in dieser Zeile der opt-in.js dem Button zugeordnet, dort kannst du ihn auch entsprechend kürzen:

button.innerHTML = 'Unsere Datenschutzerklärung mit Infos zum Kartendienst finden Sie auf der Seite Datenschutz.<br>wenn Sie die Datenschutzerklärung akzeptieren die Karte laden möchten, dann klicken Sie bitte hier.';

3 Lena567

Hallo Jörg,

Das war mir schon klar, dass ich den Button-Text einfach kürzen könnte.

Ich möchte es aber so haben, dass direkt über der Schaltfläche der Text
Unsere Datenschutzerklärung mit Infos zum Kartendienst finden Sie auf der Seite Datenschutz.
Steht. Hierzu sollte ein div mit der Klasse info generierte werden, in welchem der Text steht.
Und eben dann direkt darunter die Schaltfläche mit dem Text:
wenn Sie die Datenschutzerklärung akzeptieren die Karte laden möchten, dann klicken Sie bitte hier.
Hierfür sollte ein div mit der Klasse button erstellt werden, in dem der Text steht.

Und diese beiden div sollten in ein Div mit der Klasse .opt-in-button-wrapper

Wie aber setzt man das um?

4 Jörg Kruse

Zur Erklärung - hier wird ein <div> mit dem Bezeichner button erstellt, welches die Klasse "opt-in-button" erhält:

var button = document.createElement("div");
button.setAttribute("class", "opt-in-button");

Hier wird der Text-Inhalt in button eingefügt:

button.innerHTML = '...';

... danach wird button als Kind-Element dem Element mapContainer (mit dem Selektor "#map") zugeordnet:

mapContainer.appendChild(button);

Stattdessen könntest du erst einmal div.opt-in-button-wrapper mit dem Bezeichner wrapper erstellen und dieses als Kind-Element von mapContainer definieren:

var wrapper = document.createElement("div");
wrapper.setAttribute("class", "opt-in-button-wrapper");
mapContainer.appendChild(wrapper);

Danach erstellt du das Info-Div und hängst es als erstes Kind-Element in wrapper ein:

var info = document.createElement("div");
info.setAttribute("class", "info");
info.innerHTML = '...';
wrapper.appendChild(info);

... danach das Button-Div als zweites Kind:

var button = document.createElement("div");
button.setAttribute("class", "opt-in-button");
button.innerHTML = '...';
wrapper.appendChild(button);

5 Lena567

Hallo Jörg, danke für deine Antwort.

Werde mich daran versuchen.
Meine jüngsten beiden versuche waren die folgenden:
http://lena91567.bplaced.net/Karte/index1.html
http://lena91567.bplaced.net/Karte/index2.html

6 Jörg Kruse

Wenn du button in buttonDiv umbenennst, ist dieser EventListener verwaist:

        button.addEventListener("click", function () {
            button.parentNode.removeChild(button);
            loadMapApi(loadScript);
        }, false);

Da wir eine Ebene dazwischengeschaltet haben, muss hier außerdem noch eine Anpassung erfolgen: vom Großvater mapContainer muss nach dem Klick das Kind wrapper entfernt werden:

        button.addEventListener("click", function () {
            button.parentNode.parentNode.removeChild(wrapper);
            loadMapApi(loadScript);
        }, false);

7 Lena567

Hallo Jörg,

Zu deinem Post mit der Nummer 4:
das habe ich hinbekommen.
http://lena91567.bplaced.net/Karte/index5.html
habe auch den folgenden Code ergänzt, damit Info-Container nach dem Klick auf den Button entfernt wird

            button.parentNode.removeChild(info);

darüber hinaus habe ich noch einen Link im Info-Container gesetzt

Zu deinem Post mit der Nummer 6:
das habe ich nicht hinbekommen, obwohl ich Verschiedenes probiert habe
http://lena91567.bplaced.net/Karte/index22.html
macht aber nichts, weil das oben wie gewünscht funktioniert. Dank dir!

Wieder mal vielen herzlichen Dank lieber Jörg für deine Hilfe!

8 Jörg Kruse

Zu deinem Post mit der Nummer 6:
das habe ich nicht hinbekommen, obwohl ich Verschiedenes probiert habe
http://lena91567.bplaced.net/Karte/index22.html

Die Firefox Konsole sagt dazu bei einem Klick auf den Button:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node

optInButtonWrapper ist Kind von mapContainer, also dem Großvater von button. Diesen kannst du mit zweimal parentNode hintereinander auswählen:

button.parentNode.parentNode.removeChild(optInButtonWrapper);

Die Elemente button und info werden dann als Kinder von optInButtonWrapper automatisch mit entfernt.

9 Lena567

Danke Jörg für deine Erklärung. Jetzt hoffe ich das ganze verstanden.

Vor allem hat mir deine ausführliche Erklärung im Post 4 geholfen.

Wünsche dir einen schönen Tag

nach oben

Kartendienst erst nach Zustimmung laden

Beitrag schreiben (als Gast)