I can't press the close button at the end - javascript

got a question about js. Wanted to add a 'finish' button to my textadventure. The js function I have included externally. Now the problem is that i have different html documents, if i open and close a html document by pressing the button it works. But if I go through from the start document to the last html document, the button doesn't work. 😂
Do you have any idea?
Here is my close
function windowClose() {
window.open('', '_parent', '');
window.close();
}


Your close is not supposed to work on any browser anymore. It is a hack. If you managed to close my browser (and therefore kill my history) I would be quite annoyed.
Your pages are so short, you can have all of them in one page and just show/hide each path. You can even ajax them into a popped div and just hide the div when ending
For example like this
The example only loads start and WegAA1.html, look at the new source of the sub pages - for example WegAA1.html
Note I moved the buttons into the text div and added
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
to start.html
$(function() {
$(document).on("click", ".btn", function(e) {
e.preventDefault(); // stop possible submission
const $div = $("#text");
let pageURL = $(this).data("href"); // the string in the data-href attribute of the button
$div.fadeOut("slow", function() {
$div.load(pageURL+" #text", function() {
$div.fadeIn("slow")
});
});
});
});
...
<!--Teile des Dokuments definieren -->
<div id="text"> Claudette geht mit ihrem Hund Nachts spazieren. Es ist Wochenende und sie hat im Moment nichts besseres zu tun, da sie viel Druck von der Schule hat und sie dadurch derzeit keinen Kopf fĂŒr andere Sachen hat. Darauf hin schreibt sie William an, er ist
ein guter Freund auf den sie sich immer verlassen kann. Dieser ist zwar kein gutes Vorbild da er raucht, aber das hĂ€lt ihn nicht davon ab ein guter Mensch zu sein. GlĂŒcklicherweise schreibt dieser innerhalb von 5 Minuten auch schon zurĂŒck. Er wohnt
nicht weit von Claudette weg und schlÀgt vor sie beim Spazieren gehen zu begleiten....
<div id="option-buttons" class="btn-grid">
<button class="btn" data-href="WegAA1.html">Versuchen diesen zu Reparieren </button>
<button class="btn" data-href="WegBB1.html">Erst einmal weiter suchen </button>
</div>
</div>
</div>

Related

React passing link to reusable component

I am using a reusable component in React, to which a pass mostly text and some props. One of the texts needs to have a linked word, but I do not know how to pass that link inside a string.Any idea how to pass a string with links in it? Thanks!
This is how I am passing text and props to my reusable VertragsCheckSlide component. My question refers to prop "parag1", there is where I need to add the link with an info-Icon. I tried passing it it is usually works, but I get an [Object, Object] as output.
<VertragsCheckSlide
title="Ist meine Rentenversicherung zu teuer?"
parag1={`Die Kosten von privaten Rentenversicherungen sind sehr
intransparent und höchst unterschiedlich. Mit der gesetzlich
vorgeschriebenen Effektivkostenquote ${(
<TipIcon
size="lg"
tooltipText={ToolTips[0]}
/>
)} kann man sie aber gut vergleichen.`}
parag2="Bei klassischen Anbietern (zumeist Versicherungen) liegt die
Effektivkostenquote oft bei 2 % oder sogar höher. Bei myPension
betrÀgt sie nur ca. 0,8 %."
parag3="Hohe Kosten mindern den Ertrag und damit dein zukĂŒnftiges
Guthaben zur Verrentung. Wie viel das ausmachen kann, zeigt dir die
nebenstehende Grafik."
buttonText="Weitermachen"
graphicImage={graphicImage4}
dropDown
renderSelect={this.renderSelect}
dropTitle="Wo finde ich die Effektivkostenquote in meinem bestehenden
Vertrag?"
dropText="Jeder Anbieter einer privaten Rentenversicherung ist
verpflichtet, die Effektivkosten anzugeben. Man findet sie im
sogenannten Produktinformationsblatt. Suche einfach nach den
Begriffen „Informationsblatt“, „Effektivkosten“ oder „Kosten“ und
schon hast du deine Kosten im Blick. Probiere auch unseren
Nettovergleichsrechner aus!
Hilfe nötig? Du kannst uns anrufen oder uns gleich deinen Vertrag per
E-Mail senden. Wir melden uns schnellstmöglich bei dir."
handleClick={this.next}
activeSlide={activeSlide}
/>
Thanks for the help!

you can try pass a string like a html object:
<div>
<div> your text in here </div>
<a href={your link} />
</div>
and in component render text can using:
<span>
dangerouslySetInnerHTML={{ __html: content transmisson in }}
</span>
that is this way how to render papper in html

It perfectly worked passing the prop like this:
<VertragsCheckSlide
parag1={<div>
Die Kosten von privaten
Rentenversicherungen sind sehr
intransparent und höchst
unterschiedlich. Mit der gesetzlich
vorgeschriebenen Effektivkostenquote
<TipIcon
size="lg"
tooltipText={ToolTips[0]}
/>
kann man sie aber gut vergleichen.
</div>
} />
No need off setting any dangerouslySetInnerHTML on Render.
Thanks for the tips!

How to traslate a whole html page with ngx translate

My privacy policy is embedded as full html. I would like to translate it with ngx-translate but it would be much to time expensive and completely unstructured if I would translate it per html tag as ngx-translate suggests it.
This is what the policy is designed like:
<h1>DatenschutzerklÀrung</h1>
<p>Verantwortlicher im Sinne der Datenschutzgesetze, insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
</p>
<p>Chinaedu Pascal Onwukwe</p>
<h2 id="betroffenenrechte">Ihre Betroffenenrechte</h2>
<p>Unter den angegebenen Kontaktdaten unseres Datenschutzbeauftragten können Sie jederzeit folgende Rechte ausĂŒben:
</p>
<ul>
<li>Auskunft ĂŒber Ihre bei uns gespeicherten Daten und deren Verarbeitung (Art. 15 DSGVO),</li>
<li>Berichtigung unrichtiger personenbezogener Daten (Art. 16 DSGVO),</li>
<li>Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO),</li>
<li>EinschrÀnkung der Datenverarbeitung, sofern wir Ihre Daten aufgrund gesetzlicher Pflichten noch nicht löschen
dĂŒrfen (Art. 18 DSGVO),</li>
<li>Widerspruch gegen die Verarbeitung Ihrer Daten bei uns (Art. 21 DSGVO) und</li>
<li>DatenĂŒbertragbarkeit, sofern Sie in die Datenverarbeitung eingewilligt haben oder einen Vertrag mit uns
abgeschlossen haben (Art. 20 DSGVO).</li>
</ul> ...
I would like to find a way on how to translate this without translating each single html tag but more like replacing an html file. Does anybody know how I would do this. Thanks in advance.

You can translate an HTML template using the instant method of TranslateService with DomSanitizer service. Something like this:
component.ts
constructor(
public translate: TranslateService,
public sanitizer: DomSanitizer
) {}
getTranslatedHtmlSnippet(s: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(this.translate.instant('HOME.TEXT'));
}
and you can inject with innerHtml the translated HTML.
template.html
<div [innerHtml]="getTranslatedHtmlSnippet()"></div>
In order to work, you must provide a different template in the translation file.
i18n.json
{
"HOME": {
"TEXT": "<div style='color: red;'> eng <div>"
}
}
I leave you a link to stackbliz to see a running example:
https://stackblitz.com/edit/angular-translation-service-cpupat
However, I suggest you NOT use this kind of approach and always translate only string/content, not structure.
If you really need this kind of translation and is not restricted to a single component is better to create a pipe.

Onclick is working, but onload make problems?

I have this code:
<p onclick="tmtm();" id="TextMobile" class="Text">>> FĂŒr weitere Informationen klicken sie bitte mit Rechtsklick auf den jeweiligen Mitarbeiter</p>
and if I try it with onload it don't work, but onclick work:
<p onload="tmtm();" id="TextMobile" class="Text">>> FĂŒr weitere Informationen klicken sie bitte mit Rechtsklick auf den jeweiligen Mitarbeiter</p>
Javascript:
function tmtm(){
document.getElementById("TextMobile").innerHTML = "FĂŒr weitere Informationen halten sie bitte den jeweiligen Mitarbeiter gedrĂŒckt";}
I tried different things ...
For example I moved onload from to , but it don't work too
Can anyone help me?

You cannot use onload attribute on a paragraph.
If you absolutely must, you can achieve similar results by using the code below (using jQuery)
Script:
$('#foo').ready(function(){
alert('paragraph loaded');
});
HTML:
<p id="foo">Sample Paragraph</p>

JSON output of a <br />(escaped) interpreted the browser not correctly

I have a json file like this
[
{
"titel": "Das \"Hexenbödele\" bei Lengstein",
"vorspann": "Sage vom Ritten, ĂŒbertragen von P. Beda Weber. Im Wald oberhalb von Lengstein und von diesem Ort nicht weit entfernt liegt das \"Hexenbödele\", eine kleine Lichtung, in deren Mitte eine einzelne LĂ€rche hoch aufragt. Diese LĂ€rche ist mit einem auffĂ€lligen \"Hexenbesen\" und zudem mit einem Kruzifix geschmĂŒckt. Hier trafen sich nachts vor alten Zeiten hĂ€ufig die Hexen der ganzen Umgegend und hielten mit dem Teufel wĂŒste Gelage<br \/>",
"downloadlink1": "http://theweburl.com/files/content/557263_42961_1_0/das-hexenbödele-bei-lengstein-weber-483.pdf",
"downloadlink2": "http://theweburl.com/files/content/557263_42962_1_0/l-hexenbödele-di-longomoso.pdf",
"downloadlink3": "http://theweburl.com/files/content/557263_42963_1_0/the-hexenbödele-at-lengstein.pdf"
}
]
If I'm outputting that code in my browser(Chrome and FF) and the browser interpreted the <br \/> like a normal break line.
I've escaped all correctly..
Has any one here a idea how to fix that?
Thanks in advice

You have to escape html with entities (http://unicode.e-workers.de/entities.php).
The <br /> would look like this: <br />

It's because browser interprets the <br> tag when it encounters "<br" itself.
You should try <br /> to display <br /> in the browser.

jQuery -> toggle function

I have a list with events. I use a foreach for the array to retrieve the data. How my list looks like:
<article class="club-list-club">
<h2 class="club-list-title">
'.$club->getClubnaam().'
</h2>
<h2 class="club-list-location">
'.$club->getWoonplaats().'
</h2>
<h2 class="club-list-open-info">
Openingstijden
</h2>
<h2 class="club-list-big-info">
link2page
</h2>
<h2 class="club-list-small-info">
<span class="club-list-show-small-info">Show</span>
</h2>
<div class="more-info hide">
Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
openingstijden en alle andere belangrijke info.
</div>
</article>';
When the SPAN .club-list-show-small-info is clicked, i want the first div.more-info to toggle with fade or slide. What am i doing wrong in my code below:
<script type="text/javascript">
$(document).ready(function(){
$('.club-list-show-small-info').click(function(){
$(this).next('div').slideToggle('.hide');
});
});
</script>

The click event is bound to the span element, the div is not its next sibling element, the div is the next sibling of the spans parent h2 element. So
$(document).ready(function () {
$('.club-list-show-small-info').click(function () {
$(this).parent().next('div').slideToggle();
});
});
Demo: Fiddle

It should be:
$('.club-list-show-small-info').click(function(){
$(this).parent().next().slideToggle();
});
Since the info you want to show and hide is the next() sibling of .club-list-small-info which is the parent() of your .club-list-show-small-info span
Demo
If you want to have fade effect, you can use fadeToggle():
$('.club-list-show-small-info').click(function(){
$(this).parent().next().fadeToggle();
});
Demo

Categories