Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Themes & Theming ›

[gelöst] Javascript in Theme einbinden

Eingetragen von Twinhand (68)
am 02.07.2013 - 08:02 Uhr in
  • Themes & Theming
  • Drupal 7.x

Hallo zusammen,

ich möchte folgendes realisieren:
Ich möchte in der Fußleiste meines Themes einige Buttons per Javascript anbringen. Diese sollen je nach Button unterschiedliche funktionen haben, wie z.B. Drucken, verkleinern des Textes, ein Link zum Impressum usw.
Dies soll dann so aussehen, wie auf Abbildung1.

Nehmen wir mal das Beispiel mit dem Druckbutton.

Ich habe folgenden Javascript Code aus dem Internet besorgt:

Inhalte stammen von: http://www.web-toolbox.net/webtoolbox/diverses/seite-drucken.htm#ixzz2Xr...
www.clickstart.de

<form>
<a href="javascript:window.print()">
<img src="print.gif" width="20" height="16" border="0" alt="">
</a>
</form>

Wie kann ich diesen nun richtig in mein Theme einbinden, und wie kann ich das Bild mit der Funktion des Skriptes verlinken.

Es wäre super, wenn ihr eine potentielle Lösung sehr ausführlichen erklären könntet, falls ihr dafür Zeit habt.:)

Ich danke euch auf jedenfall schonmal im voraus.

MfG
Twinhand

AnhangGröße
Abbildung1.png3.16 KB
‹ Node als Container mit doublizierbaren inneren Containern [gelöst] Javascript in Theme einbinden ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Das form-Tag ist überflüssig.

Eingetragen von wla (9461)
am 02.07.2013 - 09:56 Uhr

Das form-Tag ist überflüssig. Das a-Tag alleine reicht aus. Das ist schon auf der referenzierten Seite nicht korrekt. Also mußt Du nur noch einen Link auf Deiner Seite positionieren, der ein Image beinhaltet. Lege das Icon z.B. in das Unterverzeichnis icons vom Ordner sites/default/files (das existiert noch nicht, also mußt Du es anlegen). Als nächstes erstellst Du unter Struktur > Blöcke einen neuen Block und trägst dort den HTML-Code ein

<a href="javascript:window.print()">
<img src="/sites/default/files/icons/print.gif" width="20" height="16" border="0" alt="print-icon">
</a>

Dabei legst Du noch fest, in welcher Region, z.B. im Footer, Deines Themes dieser Block zu sehen sein soll. Das war es auch schon.
Ich empfehle Dir dringend, wenn Du Dich ernsthaft mit Webseitenerstellung befassen willst, Dir ausreichende Kenntnisse in HTML und CSS zuzulegen.

Beste Grüße
Werner

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das ist eine tolle Antwort,

Eingetragen von Twinhand (68)
am 02.07.2013 - 10:22 Uhr

Das ist eine tolle Antwort, ich werde das sofort ausprobieren.^^
Die Sache ist die, ich wurde kwasi ins kalte Wasser geworfen, was die Webseite angeht, also habe ich ein Drupal standart Theme genommen um eine Basis zu haben und dann habe
ich angefangen dan Theme zu bearbeiten, inzwischen ist es schon fast fertig. Nur von Javascript habe ich keine Ahnung deswegen auch die Frage wie man es einbindet.

Danke für die schnelle Antwort.^^
MfG
Twinhand

  • Anmelden oder Registrieren um Kommentare zu schreiben

Mir wurde gerade gesagt, von

Eingetragen von Twinhand (68)
am 02.07.2013 - 10:38 Uhr

Mir wurde gerade gesagt, von irgend einer Verordnung vorgeschrieben ist, das Javaskript Datein in den Header kommen.
Ich glaube kaum das damit der Header meines Themes gemeint ist, wisst ihr wie ich das realisieren kann?

Habe gelesen das ich die Datei einfach nur in der . info Datei wie folgt einbinden kann:

scripts[] = js/Beispiel_script.js

Aber wie bekomme ich diese Funktion dann in den von mir gewünschten Block?

MfG
Twinhand

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das "nur" stimmt so nicht

Eingetragen von C_Logemann (912)
am 02.07.2013 - 10:59 Uhr

Halllo,
die Info-Datei ist da eine aber nicht die einzige Möglichkeit JS in Dein System zu bekommen. Allerdings hast Du erwähnt, daß Du ein Standard-Theme nutzt und wenn Du dann dieses modifizierst hast Du Problem mit späteren Updates. Dies lässt sich mit einem custom Subtheme lösen.
Und wenn Du das JS geladen bekommst, dann kann dieses in der Regel über Selektoren z.B. per CSS ID oder Klasse operieren und so kannst Du auch Deine Aufgabe lösen. Aber dafür muss Dein JS dazu passen. Da Du aber da Du schreibst von Javascript keine Ahnung zu haben, solltest Du neben HTML und CSS (Werners Rat) zusätzlich auch erstmal etwas Basis-Wissen zu JS aneignen. Da Drupal jQuery mitbringt muss es auch nicht unbedingt pures JS sein.
Schau Dir vllt. Drupal-Module und Themes an, die schon mit JS Einbindung funktionieren. Nachahmung ist kein schlechter Weg zum Lernen.

Viel Erfolg,
Carsten

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ohh Entschuldigung,

Eingetragen von Twinhand (68)
am 02.07.2013 - 11:26 Uhr

Ohh Entschuldigung, Stadard-Theme ist nicht ganz richtig. Es ist ein Theme einer Webseite eines Arbeitskollegen bzw. Ausbildungskollegen.
Er hat mir dieses Theme gebeben, weil so schon der grobe Aufbau und die Struktur eines Drupal Themes zu erkennen war, für dieses Theme gibt es keine Updates, es sei denn, ich machesie selbst.^^
Könntest du mir die Sache mit den Selektoren wohl etwas genauer erklären. Wenn ich die .js Datei so wie sie jetzt ist in ein Unterverzeichnis namens js speichere und sie dann in der . Info Datei einbinde,
wie genau erreiche ich dann das die das Bild mit der verlinkten Funktion z.B. im footer angezeigt wird?

MfG
Twinhand

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ok, also die ganze Geschichte

Eingetragen von Twinhand (68)
am 02.07.2013 - 12:38 Uhr

Ok, also die ganze Geschichte wird jetzt mit HTML und einfachen Blöcken realisiert.
Wenn ich die Druckseite speziel formatieren möchte, muss ich dann ein extra Style-Sheet anlegen, oder reicht es wenn ich die Datei aus meiner Haupt css Datei anspreche.
BZW wie spricht man denn die Druckansicht an, die von der oben gezeigten Funktion genutzt wird?

MfG
Twinhand

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • für drupal11 ein Slider Modul
  • [gelöst] W3CSS Paragraphs Views
  • Drupal 11 neu aufsetzen und Bereiche aus 10 importieren
  • Wie erlaubt man neuen Benutzern auf die Resetseite zugreifen zu dürfen.
  • [gelöst] Anzeigeformat Text mit Bild in einem Artikel, Drupal 11
  • Social Media Buttons um Insteragram erweitern
  • Nach Installation der neuesten D10-Version kein Zugriff auf Website
  • Composer nach Umzug
  • [gelöst] Taxonomie Begriffe zeigt nicht alle Nodes an
  • Drupal 11 + Experience Builder (Canvas) + Layout Builder
  • Welche KI verwendet ihr?
  • Update Manger läst sich nicht Installieren
Weiter

Neue Kommentare

  • melde mich mal wieder, da ich
    vor 2 Tagen 17 Stunden
  • Hey danke
    vor 3 Tagen 12 Stunden
  • Update: jetzt gibt's ein
    vor 4 Tagen 6 Stunden
  • Hallo, im Prinzip habe ich
    vor 1 Woche 1 Tag
  • Da scheint die Terminologie
    vor 1 Woche 1 Tag
  • Kannst doch auch alles direkt
    vor 1 Woche 6 Tagen
  • In der entsprechenden View
    vor 1 Woche 6 Tagen
  • Dazu müsstest Du vermutlich
    vor 1 Woche 6 Tagen
  • gelöst
    vor 4 Wochen 2 Tagen
  • Ja natürlich. Dass ist etwas,
    vor 4 Wochen 3 Tagen

Statistik

Beiträge im Forum: 250233
Registrierte User: 20449

Neue User:

  • Mroppoofpaync
  • 4aficiona2
  • AppBuilder

» Alle User anzeigen

User nach Punkten sortiert:
wla9461
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3857
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 1 Benutzer und 8 Gäste online.

Benutzer online

  • wla

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association