Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
  • Seite:
  • 1

THEMA: How to embed JavaScript into Articles

How to embed JavaScript into Articles 18 Mai 2020 20:44 #47880

Hello

I need your help. I am new to joomla, trying to create my first website. I am trying to embed JavaScript into Article like some text effects. I can't get it to work. I red documentations, installed jumi, sourcerer even custome advanced module and tons of things, I wasted so many hours to figure it out.
bashooka.com/coding/37-cool-text-effect-...with-css-javascript/
On this site if so choose one effect, there is html, CSS, JavaScript to place in. As I saw it also loads from other sites.
I didn't know that it is so complicated. If anyone could show a step by step example how to put 1 effect from that site into an article, I would really appreciate that. If you have a site I could even make some donations.
I won't give up of course, but have absolute no clue :)

Thanks for your help

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 06:35 #47881

Hi there, let me tell you one thing up front:
You are posting in a German speaking forum here, so you cannot expect support here (there's a forum at forum.joomla.org/index.php ). But just this once, I am making an exception.

Fact is, that Joomla editors will by default strip any sort of code on saving articles, so what you have in mind won't work.
Have a look though at Sourcerer , that's a plugin that enables you to place code elements within Joomla articles. The free version will normally do everything you need.

Cheers
Joomla! 3: Professionelle Webentwicklung von David Jardin und Elisa Foltyn - das Standardwerk zu Joomla! 3
Wer nicht über den Anstand verfügt, ein kleines "Thänx" auszusprechen, muss sich nicht wundern, künftig ignoriert zu werden!
Kein Support via PM oder Mail. Entsprechende Anfragen werden ignoriert.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 06:50 #47882

Uh Danke, das tut mir echt leid. Habe eben gestern registriert da ich so verzweifelt war wegen diese ganze hin un her.

Aber danke hast Du geantwortet.

dann nochmals ganz kurz:

Ich bin neu in Joomla Welt, habe zwar diese Monat für Komponente etc ca 400 CHF ausgegeben, da ich es gerne lernen möchte, Sourcerer habe ich eben auch nur Free Version.

Ich habe auf die Seite (wo 37 Text Effekte sind) einiges gut gefunden, nun möchte ich gerne das in ein Beitrag (Artikel) dies auch so erscheint.

Mein Problem ist, wenn ich diese Effekte aufmache, gibt es 3 spalten:
1. HTML
2. CSS
3. JAVASCRIPT
und dazu noch wenn ich auf resource klicke, dann möchte er noch von eine Internetseite nochmals 2 *.js dateein haben.

Ich habe wirklich herumversucht mit Sourcerer im Artikel {source} code {/source} auch mit pfad etc. Schaffe es einfach nicht.

Habe herumgelesen, aber ist einfach VIIIIEL zu kompliziert :D

Dashalb dachte ich das ich ein Account eröffne und schiesse hier mal los, vielleicht sind es fragen die bei Euch in secundeschnelle beantwortet werden kann.

Mir wäre einfach ein step-by-step anleitung gut mit ein Beispiel von dort....

besten Dank nochmals

LG

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 06:56 #47883

codepen.io/FlorinPop17/pen/WEBNyx

Diese wäre mein Traum

:(

Ich habe meine Artikel offen, sourcerer installiert, von hier aus bin ich verloren...

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 08:24 #47884

Ich habe diese auch probiert:
tobiasahlin.com/moving-letters/

Keine von denen geht.
Keine Ahnung was ich falsch mache, bin mir aber sicher das es ein Weg gibt..

Und das lächerliche:

Gibt keine Step-by-Step Anleitung auf internet, nur Erklärungen oder 14 Seiten Dokumente. Bin mir sicher das es einfacher ist. Wenn ich draufkomme, werde ich mit Bilder hier Posten, für eine nächster wie ich :D

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 09:48 #47885

Ich weiss nicht, was du machst, weiss auch nicht, was du kannst.
Ich habe mir mal das Mangu-Beispiel mit reinem HTML nachgebaut, der Quellencode sieht so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<link href="mangu.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet />

</head>
<body>
<p class="fixed"></p>

<div class="word">
	<span>M</span>
	<span>A</span>
	<span>N</span>
	<span>G</span>
	<span>U</span>
</div>
<script src="mangu.js"></script>

</body>
Die CSS und JS Dateien liegen extern und werden im HTML geladen. Das funktioniert soweit.
Wermutstropfen: Um mit Sorcerer CSS Code einzufügen, brauchst du die PRO Version. CSS lässt sich aber auch händisch einpflegen. Dazu musst du halt den Editor abschalten. Ferner wichtig: Das JS Script muss am Schluss geladen werden, sonst kann der Code nicht greifen, weil er erwartet, dass das HTML schon vorhanden ist.
Über den Sinn oder Unsinn von solchen Spielereien lässt sich allerdings streiten. Für mich sehen solche Blink-Boing-Zack-Sachen immer nach Webseiten der mittleren 90er Jahren des letzten Jahrhunderts aus. Ein Verweilen auf solchen Seiten wäre für mich eher unwahrscheinlich. Aber du willst das halt lernen, das ist soweit OK. Joomla brauchst du dafür eher nicht, zum Lernen würde ich zunächst mal den reinen HTML Ansatz wählen. Der Erfolg stellt sich schneller ein.
Joomla! 3: Professionelle Webentwicklung von David Jardin und Elisa Foltyn - das Standardwerk zu Joomla! 3
Wer nicht über den Anstand verfügt, ein kleines "Thänx" auszusprechen, muss sich nicht wundern, künftig ignoriert zu werden!
Kein Support via PM oder Mail. Entsprechende Anfragen werden ignoriert.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Letzte Änderung: von Chris Hoefliger.

How to embed JavaScript into Articles 19 Mai 2020 10:08 #47886

Ich danke Dir für deine Antwort.

Eine strenge aber konstruktives Antwort ist besser als ein "naja".
Ja, ich weiss "das weniger mehr ist", also nicht viel zu viele herumtanzende Buchstaben.
es ging mir auch um Allgemeine, wie man es reintut in Joomla. Du hast ja geschrieben, in pure HTML nachgebaut, aber die Frage wie in Artikel? Habe auch in Joomla DOC gelesen das Jquery zuerst geladen werden muss, dann erst script, das ist mir ja auch schon klar. (apropo ich weiss ja nichts, bin stock dumm im joomla, dies ist ja meine erste Webseite).
Ich mache dies für mein Freund. Also sooo schlecht ist es auch nicht, und ist voll responsive bis jetzt:

(video kann ich privat senden)

Ich wollte nur wirklich wissen wie man schritt für schritt in ein Artikel (habe am ende markiert welche text ich mit Javascript haben möchte) so hineinfügt.

Ja habe auch gesehen das sourcerer für 40 euro oder so dies ermöglicht und es auch ein ruf auf verzeichnis gibt sonst ohne dem. Habe wirklich trotz nicht hingekriegt.

Wenn ich jetzt artikel offen habe, sourcerer instelliert habe, wie würdest du dies (was du gesendet hast) einfügen?

mit HTML/CSS/JAVASCRIPT+äussere Quelle?

Für das gibt es eben keine Anleitung auf Net, habe wirklich gesucht.

Danke Dir nochmals, bitte vergleiche nicht deine Wissen mit mir, ich bin da null :D
LG

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Letzte Änderung: von Gemitec.

How to embed JavaScript into Articles 19 Mai 2020 10:17 #47887

Versuche derzeit einfach die funktionen einzubauen, wie gesagt, jetzt bin ich beim JAVASCRIPT, kam einfach nicht weiter

Sourcerer free version hat mich nicht weitergebracht, habe dann mit Jumi probieren wollen, die hat nicht mal ein Editor Button in JCA, dann habe ich mit modulen etc.

Und Index.PHP möchte ich in template nicht modifizieren...

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Letzte Änderung: von Gemitec.

How to embed JavaScript into Articles 19 Mai 2020 10:53 #47888

Quick & Dirty sowie mit ausgeknipstem Joomla Editor:
<link href="/templates/mangu.css" rel="stylesheet" />
<h3 class="fixed">&nbsp;</h3>
<div class="word"><span>M</span> <span>A</span> <span>N</span> <span>G</span> <span>U</span></div>
<p>{source}<span style="font-family: courier new, courier, monospace;">&lt;script&gt;<br /></span></p>
<p>const spans = document.querySelectorAll('.word span');</p>
<p>spans.forEach((span, idx) =&gt; {<br /> span.addEventListener('click', (e) =&gt; {<br /> e.target.classList.add('active');<br /> });<br /> span.addEventListener('animationend', (e) =&gt; {<br /> e.target.classList.remove('active');<br /> });<br /> <br /> // Initial animation<br /> setTimeout(() =&gt; {<br /> span.classList.add('active');<br /> }, 750 * (idx+1))<br />});</p>
<p><span style="font-family: courier new, courier, monospace;"><br />&lt;/script&gt;</span>{/source}</p>

CSS direkt eingebunden (funzt ausschliesslich, wenn man ohne Editor speichert), JS mit dem Sourcerer direkt eingebunden. Funzt. Und damit bin ich dann raus hier.
Joomla! 3: Professionelle Webentwicklung von David Jardin und Elisa Foltyn - das Standardwerk zu Joomla! 3
Wer nicht über den Anstand verfügt, ein kleines "Thänx" auszusprechen, muss sich nicht wundern, künftig ignoriert zu werden!
Kein Support via PM oder Mail. Entsprechende Anfragen werden ignoriert.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

How to embed JavaScript into Articles 19 Mai 2020 10:56 #47889

Wow, ich probiere aus!!

Danke dir

LG

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Seite:
  • 1