JavaScript Text in einem Element mit Button wechseln

[Carragos]

Hallöchen ComputerBase Forum,

ich versuche einen größeren Text mit einem anderen Text zu ersetzen. ( Der selbe Text in Englisch )
Dies sollte innerhalb eines Jimdo HTML Elements passieren. Was eigentlich kein Problem darstellen sollte, da man in diesen Elementen quasi alles machen kann.

Ich habe bereits diese Variante ausprobiert:
http://stackoverflow.com/questions/17064304/onclick-text-change

Diese Methode schien mir ziemlich nahe an meinem Problem zu sein, aber soweit ich das richtig Probiert habe, kann man innerhalb der Funktion keine HTML Tags wie <p> <b> <i> etc. mehr verwenden.
Diese bräuchte ich jedoch um meinen Text ansehnlich zu gestalten.

Ich hoffe meine Frage ist verständlich gestellt und freue mich auf hilfreiche Antworten

Gruß

 

[Tolotos]

Hi,

ohne jetzt ins Detail zu gehen vermute ich mal, dass du einfach deine Tags HTML-Encoden musst, z.B. "<" = "&lt;", ">" = "&gt;" etc.

Grüße,

T.

 

[ignator]

Du solltest einen anderen Weg nehmen.

Versuch HTML Container ein und aus zu blenden.

1. Beim Rendern der Seite steht alles auf DE und die restlichen Sprachen sind per display:none oder opacity:0 ausgeblendet.
2. Klick auf den Button : Setze alle DE-container auf display: none und alle gewünschten Container auf display: inline-block (oder was du willst).

Das ist einfacher als per JS Texte auszutauschen.

 

[Carragos]

Danke für eure Antworten bisher !
@Tolotos, guter Ansatz, jedoch habe ich mich mittlerweile für eine andere Variante entschieden (jQuery, siehe unten)

Du solltest einen anderen Weg nehmen.

Versuch HTML Container ein und aus zu blenden.

1. Beim Rendern der Seite steht alles auf DE und die restlichen Sprachen sind per display:none oder opacity:0 ausgeblendet.
2. Klick auf den Button : Setze alle DE-container auf display: none und alle gewünschten Container auf display: inline-block (oder was du willst).

Das ist einfacher als per JS Texte auszutauschen.

Das klingt auch sehr gut, jedoch hab ich leider zu wenig Kenntnis von den verschiedenen Funktionen und wüsste nicht, wie ich deine Lösung ausführen sollte.

Ich würde gerne diesen Code anwenden:

http://www.w3schools.com/code/tryit.asp?filename=FAYJT9QJETR8
Quelle: https://jqueryui.com/tabs/#default

Das sieht einfach sehr elegant aus und würde halbwegs gut in das Design passen.
Jedoch sprengt das dort eingebundene Stylsheet

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

leider mein Jimdo Design !

Wie kann ich eine der beiden Lösungen realisieren ?:
1. Das Stylesheet nur auf ein bestimmtes <div> ausführen und nicht auf die ganze Website.
2. Das Stylesheet löschen und bei der Tabelle ein Bild für die Sprachauswahl einfügen, sodass man z.B. auf kleine Flaggen-Buttons für die jeweilige Sprache klicken kann. Ohne das Stylesheet.

Gruß

 

[Soedy]

1. den DIVs Klassen geben und die Klassen mit CSS ansteuern
2. das würde mit dem Ansatz von ignator sehr viel besser gehen

 

[Carragos]

1. den DIVs Klassen geben und die Klassen mit CSS ansteuern
2. das würde mit dem Ansatz von ignator sehr viel besser gehen

Hey Soedy,
@Variante 1
Ich weiß, wie man den DIVs Klassen gibt, jedoch wie weiße ich dem Stylesheet dann eine Klasse zu, sodass ich dieses dann nur auf das jeweilige DIV anwenden kann ?

Sagen wir, ich habe dieses DIV

<div id="styleKlasse">Text xy</div>

Wie muss ich

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

im Head abändern, sodass das wie oben beschrieben funktioniert ?

Danke

Gruß

 

[Teisi]

du musst im head nix ändern sondern in der css datei, ... ...

ernsthaft? bitte google benutzen...
lern erst einmal html und css...

 

[r15ch13]

Schraub dir doch eine angepasste Variante von jQuery UI zusammen:
http://jqueryui.com/download/#!fold...000010001000000000000000000100000000000000000

Da habe ich jetzt nur Tabs ausgewaehlt. Ganz unten kannst du auch noch einen Scope (eine CSS Klasse) festlegen.
Diese Klasse wir dann allen CSS Klassen von jQuery UI voran gestellt:

.styleKlasse .ui-tabs {
  position: relative;
  padding: .2em;
}

 

[Carragos]

ernsthaft? bitte google benutzen...
lern erst einmal html und css...

Ja Ernsthaft !
Danke für den nützlichen Beitrag
Und hätte ich mir net den Arsch wund gegoogelt, hätte ich hier nicht gefragt.
Könnte ich html und css wie ein Profi, bräuchte ich kein Jimdo.

Schraub dir doch eine angepasste Variante von jQuery UI zusammen:
http://jqueryui.com/download/#!folde...00000000000000

Das ist ein hammer Tipp, danke !
Vielleicht vermurkst der dann nicht das JimdoLayout.
Probier das gleich morgen mal aus

Gruß

 

[Smartass]

Dafür benötigt man kein JavaScript - siehe Fiddle.

 

[Teisi]

wer sowas wie jimdo verwendet und keine ahnung hat, sollte in solchen dingen auch nicht rum pfuschen...
das sind meistens die, die am ende dann doch zu ner agentur oder freelancer gehen und es machen lassen...

 

[Carragos]

Juhuu, ich habs endlich hinbekommen !

Das hier ist das Ergebnis

Ich würde am liebsten direkt die Website selbst verlinken, aber ich darf hier keine kommerziellen Links posten.
Mit dem CSS der Jimdo Page sieht das ganze nämlich noch besser aus

Quellen für die Lösung:
#1: http://www.elated.com/articles/javascript-tabs/

#2: https://tutorialcode.jimdo.com/tabs/jstabs/

Danke für eure Beiträge !
Leider konnte ich mir kein CustomJQuery UI zusammenbauen, da ich kein FTP Server oder ähnliches habe, um die dort hochzuladen und dann als Stylesheet in meinem Header einzubinden.
Oder funktioniert das anders ? Gibt es da andere Wege ein Custom Stylesheet zu benutzen ?

Dafür benötigt man kein JavaScript - siehe Fiddle.

Sieht auch nicht schlecht aus, danke ! Ich schau mir deine Variante auch mal an. Vielleicht ist die ja sogar besser.

Gruß

Kommentiert gerne meinen Lösungsansatz. Verbesserungen ? Vorschläge ?