Tagchen,
ich habe hier einen jQuery Code für weiches Scrollen von #Anker zu #Ziel.
Leider wird dieser aus irgend einem Grund nicht ausgeführt/akzeptiert.
Auf anderen Seiten (.html, jsfiddle) allerdings voll funktionsfähig.
JSFiddle Beispiel:
https://jsfiddle.net/ukh0kja8/
jQuery (funktioniert, v1.11.3):
page.headerData.10 = TEXT
page.headerData.10.value (
<script src="fileadmin/Resources/Public/JavaScript/Libs/jquery.min.js"></script>
<link rel="stylesheet" href="fileadmin/Resources/Public/Css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/Resources/Public/Css/mod.css" media="all" />
)
Script (derzeit in Footer.html):
<script>
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
});
</script>
Woran könnte es nun liegen, dass es bei Typo nicht funktioniert? o.O
Hallo.
In TYPO3 funktioniert das ganz genauso, wie in jeder HTML-Seite.
Es ist nicht so, "dass es bei Typo nicht funktioniert" - es funktioniert in Deiner konkreten Instanz nicht.
Habe Dein Script eben in einem TYPO3 6.2.28 getestet. Es läuft.
Stellt sich also die Frage, was bei Deiner Seite los ist, dass es nicht geht.
- Haben Deine Inhaltselemente entsprechende id-Attribute? Hast Du evtl. die 'id="c1234"' im Zuge einer Codeverschlankung odgl. rausgeworfen?
- Bekommst Du irgendwelche JavaScript-Fehler gemeldet?
- Sieht vom generirten HTML-Code her alles aus, wie es soll? D.h. sind alle Skripte da? Wird jQuery auch geladen?
Viele Grüße
Julian
Klasse, ich glaube deine Antwort hat den richtigen Impuls gegeben!
Zu deinen Fragen:
- Der Anker ist vorhanden und funktioniert normal/instant scroll.
- Es gibt keinerlei Fehler in der Chrome-Konsole.
- Alle Skripte sind geladen und einsehbar.
Neue Erkenntnis:
Der Anker-Link ist in einem Typo HTML-Element als "#c1253" eingetragen, in der Ausgabe wurde allerdings die relative URL "/ordner1/ordner2/index.php?id=97#c1253" ergänzt. Nach einem Test in einer separaten HTML-Seite sollte diese URL hoffentlich auch schon der Grund sein, warum das Skript einfach nicht greifen mag.
Wie hast du den Link eingestellt? Wurde dein Pfad auch ergänzt?
Da ich total neu bei Typo bin und erst später mal an Inhalts-Layouts arbeiten kann (!), bleibt mir derzeit nur dieses HTML-Element über. Hier gibt es natürlich keinen Link-Builder.
Hast du pauschal vielleicht eine Idee, wie der fest gecodete Link aus einem HTML-Element sich NICHT nachträglich nochmal ändert? #giggle#
außerdem: verwende doch includeJS und includeCSS statt headerData ... 😉
(ist nur ein schönheitsfehler)
Zusätzlich darf ich dich auf das keyword 'sitepackages' hinweisen. So als Wochenendlektüre. 😉
In meinem test hatte ich den Link via Link-Wizard in einem Text-CE gesetzt. Und dort hatte ich (ohne besondere TS_Einstellungen) den Link dann als href="#c123" erhalten - also ohne Pfad.
Wenn ich Dich richtig verstanden habe, dann pflegst Du den Inhalt als HTML direkt ein, aber bei der Ausgabe kommen die Pfade/href-Attribute verändert raus?
Puhh. Habe nun mit absRefPrefix und baseURL gespielt und gelesen wofür sie jeweils gedacht sind.
Mit absRefPrefix ist es bei mir "nur" möglich alle generierten relativen Links zu verändern, interessanterweise die Links aus einem HTML-Inhaltselement nicht! #giggle#
Somit war das Design und Menü natürlich unbrauchbar, die Anker-Links funktionierten allerdings noch immer wie oben beschrieben (/ordner1/ordner2/index.php?id=97#c1253).
Bei baseURL gab es keinerlei Auswirkungen. Egal ob der Wert mit einem > gelöscht, mit = korrekt oder falsch überschrieben wurde. Im head-Bereich der Seite stand ein korrekter base href.
Es ist das Bootstrap Package installiert. Ich konnte in dessen setup.txt herausfinden dass hier 6.2 zuliebe extra ein "händischer" base href angegeben wird. Aber müsste ich das nicht im TS überschreiben können?
#########################################################
#### Use automatic baseUrl generation since ####
#### absRefPrefix = auto is not available in 6.2 ####
#########################################################
page {
// Abuse headTag to set X-UA-Compatible the original headTag will be set in config.htmlTag_stdWrap
// This is sadly needed to get automatic baseurl setting to work
headTag = <meta http-equiv="X-UA-Compatible" content="{$page.meta.compatible}">
meta.X-UA-Compatible >
}
config {
absRefPrefix >
// Set the headTag again and get an automatic baseURL if config.baseURL is not set
htmlTag_stdWrap {
setContentToCurrent = 1
cObject = COA
cObject {
10 = LOAD_REGISTER
10 {
newLine.char = 10
tagEnd {
current = 1
split.max = 2
split.token = <html
split.returnKey = 1
}
}
20 = TEXT
20 {
value = <html {register:tagEnd}
wrap = |{register:newLine}
insertData = 1
}
30 < .20
30.value = <head>
40 = TEXT
40 {
data = getIndpEnv:TYPO3_SITE_URL
// wrap base href
wrap = <base href="|">{register:newLine}
insertData = 1
}
}
}
}
Genau Julian, im gerenderten Quelltext wird der relative Pfad vorangestellt. Der Link wurde verändert.
Wenn ich im Wizard einen Link auf ein Seitenelement erstelle wird ein absoluter Link erzeugt. Ist das normal?
Vielen Dank bis hier hin Mädels. Mal weiter rumtesten...
Die Einstellung config.prefixLocalAnchors wurde vom Bootstrap Package verwaltet und hat somit dafür gesorgt, dass alle lokalen #anker-Links prefixed werden.
Lösung ist also entweder diese Einstellung zu deaktivieren, oder das Script entsprechend so anzupassen dass etwas vor der # im Link stehen darf.