Zum Inhalt springen

Externe Dateien (JavaScript/CSS) einbinden

Erstellt am 7. Juni 2007 · 5 Antworten · letzte Antwort am 5. Februar 2013

Tags: Frage

mike_mcfly ·

Ahoi zusammen,

nach einigen Stunden des Suchens in meinen Büchern und in einigen Foren, komme ich nun an meine als Anfänger sowieso bescheidenen Grenzen.

Ich möchte auf folgender Seite
http://www.ihre-malermeister.eu/index.php?id=3

mehrere JavaScripte einbinden, was nicht zu funktionieren scheint, da
a) der Flashfilm im rechten oberen DIV nicht abgespielt wird und
b) das CSS-Menu nicht richtig formatiert wird (es sollte eigentlich via css-datei horizontal angeordnet sein)

Bei dem Menu bin ich von folgender Anleitung ausgegangen:
http://82.165.8.199/typo3cms/exotec-design.de/index.php?id=89

Bin gespannt welcher TYPO3er mir helfen kann...

Danke in jedem Fall schon einmal!

febo ·

Hi mike_mcfly,

hier mal ein Beispiel wie Du CSS und andere Dinge in Deine Seiten über typoScript einbinden kannst.

# Default PAGE object:
page = PAGE
page {
  typeNum = 0
  stylesheet = fileadmin/templates/css/style.css


  # <head>
  headTag = <head>
  headerData {
    10 = TEXT
    10.value = <script language="JavaScript" type="text/javascript" src="js/someJavaScript.js"></script>
  }

  # <body>
  bodyTag = <body>
 
  10 = TEMPLATE 
  10 { 
    template = FILE 
    template.file = fileadmin/templates/main.tmpl

....
u.s.w

Ich hoffe, dass löst Dein Problem.

Gruß

febo

mike_mcfly ·

Also erst mal Danke für die Antwort, leider hat es nicht funktioniert !-(

Hier ist mal das TypoScript, dass ich angelegt habe:

//////////////////////////////////////////////////////////////////////////////////////////////
config{
doctype = xhtml_trans
locale_all = de_DE
htmlTag_langKey = de
xhtml_cleaning = all
linkVars = L
sys_language_uid = 0
language = de
metaCharset = utf-8
}

page = PAGE
page {
typeNum = 0
stylesheet = fileadmin/template/main/res/layout.css
includeCSS.file1 = template/main/res/menu.css
}

page.20 = TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/template/main/index.html
workOnSubpart = document
subparts.content < styles.content.get
relPathPrefix = fileadmin/template/main/

#Hauptmenu
subparts.navi = HMENU
subparts.navi {
entryLevel = 0

# Erste Menüebene (horizontaler Teil)
1 = TMENU
1 {
wrap = <ul id="menu">|</ul>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li><div id="top">|</div><ul>
NO.linkWrap = <li><div id="top">|</div></li>
}

# Zweite Ebene (erster vertikaler Teil)
2 = TMENU
2 {
wrap = | </ul></li>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li>|<ul>
NO {
linkWrap = <li>|</li>
RO = 1
}
}

3 < .2
4 < .2
5 < .2
6 < .2

}

}

# <head>
#headTag = <head>
#headerData {
# 10 = TEXT
# 10.value = <script type="text/javascritp" src="fileadmin/template/main/res/swfobject.js"></script>
# }

#<script type="text/javascript" src="fileadmin/template/main/res/dynMenu.js"></script>
#<script type="text/javascript" src="fileadmin/template/main/res/browserdetect.js"></script>

//////////////////////////////////////////////////////////////////////////////////////////////

Das Menu wird zwar angezeigt, allerdings kann ich es nicht mit css stylen. Auch die Flashannimation ist nicht zu sehen (oben links in dem orangefarbenen Quadrat sollte diese laufen).

Könnte ich die benötigten Stylesheets und JavaScripts einbinden wäre das Problem vermutlich gelöst, doch im Quelltext der gerenderten Typo3-Ausgabe tauchen diese nicht auf. Somit liegt das Problem im TypoScript mit dem ich die Einbindung der externen Dateien nicht hinbekomme.

Also an dieser Stelle noch einmal die Bitte um Hilfe, vielen dank vorab!

Michaelh74 ·

Hallo,

versuch das mit der CSS-Einbindung mal so:

includeCSS.file1 = template/main/res/layout.css
includeCSS.file1´2 = template/main/res/menu.css

Der Header-Bereich für die JS-Einbindung ist ja auskommentiert und dort ist noch ein Rechtschreibfehler drin "javascritp"!!!
Wenn es dann immernoch nicht geht, bitte prüfen, ob das JS im Quelltext der Ausgabedatei erscheint. Falls, liegt das Problem sicher an den Pfaden.

Gruß
Michael

mike_mcfly ·

Hallo,

vielen Dank erst mal!

Für alle, die ein ähnliches Problem haben, hier mal der Teil des TypoScript, dass es gelöst hat.

 includeCSS.file1 = fileadmin/template/main/res/menu.css 
 headerData.1 = TEXT
 headerData.1.value = <script src="fileadmin/template/main/res/swfobject.js" type="text/javascript"></script>

Zeile 1. = externes CSS einbinden
Zeils 2. bis 3. = externes JavaScript einbinden

BFSven ·

Ich weiß, der Thread ist uralt, aber vielleicht sucht ja jemand danach und kommt auf diese Seite. Es gibt (inzwischen?) eine elegantere Löseung, als über headerData. Das Einbinden von JavaScript funktioniert genauso wie bei CSS

page {
	includeCSS {
		myExt = EXT:myExt/Resources/Public/Css/myExt.css
	}
	includeJS {
		myExtTop = EXT:myExt/Resources/Public/JavaScript/myExtTop.js
	}
	includeJSFooter {
		google = http://maps.google.com/maps/api/js?v=3.3&sensor=true
		google.external = 1
		jquery_lightbox = EXT:myExt/Resources/Public/JavaScript/jquery.lightbox-0.5.js
		myExt = EXT:myExt/Resources/Public/JavaScript/myExt.js
	}
}

Da TYPO3 überprüft, ob die Datei vorhanden ist und dieses nur lokal funktioniert, müssen exterene JS-Dateien das Flag "external" bekommen (s.o. "google", die Prüfung wird so deaktiviert).
Mit "includeJSFooter" wird die JS ganz unten im Quelltext geladen.

Vielleicht brauchts ja nochmal jemand.

VG Sven