German
English
Blog
- Web Development
- a href – How to Use Target Blank Correctly
- Dynamic Link List of Typo3 Content
- Bootstrap v3 Hover Navigation for Typo3 v8 LTS
- Priority of Cascading Stylesheets done right
- Agile Death Star Evolution: Scrum on the example of Star Wars
- How to get a Typo3 Website to 100/100 on Google Pagespeed Insights
- How do images work on the web?
- Programming Languages
- Experience: from Java to Google Golang
- Google Golang Online Editor
- PHP Online Editor
- Controlling
- Cost balancing appliances and human resources
- SEO
- Do YouTubers need their own website?
- Typo3
- Restore recursively deleted pages and content in Typo3 (all versions)
- The History of Typo3
How to build a library for dynamic scrolling to all content elements on a Typo3 page
Let us explain our own sidebar box on your left hand side. In there Typo 3 will add dynamically rendered links to all content elements on the current page and take the field header for naming the links. Additionally if a user clicks on a link he will be send to the content element smoothly by using jQuery and a smooth scrolling framework called Bookmarkscroll.js.
To make this work you need to use css_styled_content in your static template, because this will wrap a div with an unique id around your content element. If you decide to not use it or have changed the standard behaviour you can just create your own wrapper DIV using this line (fluid):
<div id="c{data.uid}">
Have in mind that you need to close the tag either at the end of your template or just after opening it as we are just interrested in the starting point of content! So we do not really need a wrapping DIV, but it might be important to have an unique ID as a wrapper later on, anyways.
After we have analyzed our content and saw those unique IDs at the points where we want users to be able to scroll to, we just include jQuery at our document’s head:
page.includeJSlibs { jquery = https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js }
That is the state of the art jQuery framework when this article has been wrote and it is the same this website is using right now.
To make smooth scrolling work we load the chosen framework (any other will do, too but your lib needs changes regarding its documentation):
page.includeJSFooterlibs { bookmarkscroll = renoi.de/typo3conf/ext/renoide/Resources/Public/js/bookmarkscroll.js }
This will save some ressources when the page is been loaded for the first time. You may want to right click on it to download and put it onto your own server. The framework is Open Source as we just downloaded it, too.
Now that we have done all the pre-work, we can add our library to Typo 3:
Dynamic jQuery Bootstrap Scrolltop Library written in Typoscript for Typo3
typoscript
lib.sidebarNav = CONTENT
lib.sidebarNav {
table = tt_content
# Wrapping a back to top link and a footer link to our list (optional)
wrap=<ul><li><a href="javascript:bookmarkscroll.scrollTo('top')">Top</a></li>|<li><a href="javascript:bookmarkscroll.scrollTo('footer')">Footer</a></li></ul>
select {
# Select page id where user is on
pidInList.data = page:uid
selectFields = header, uid
# Sort by backend sorting. Have in mind that this only works for one colPos as Typo 3 creates numbers for each column seperately. If you want to create a list of more than one backend column, you could use uid or crdate or just create a new field in pages table to sort the content on your own.
orderBy = sorting
# render list language related
languageField = sys_language_uid
# choose your contents colPos (usually 0) - if you need more than one: read above
where=colPos=0
}
renderObj=COA
renderObj{
5=TEXT
5 {
# Building a list item with a href tag to start a js that fires our smooth scrolling event
wrap=<li><a href="javascript:bookmarkscroll.scrollTo('c|')">
field=uid
}
# render header and close a- and li-tags after
10=TEXT
10{
required=1
wrap=|</a></li>
field=header
}
}
}
Now you just need to add footer and header IDs to your Default Template in case you want a back to top link and footer link in your list. After that we add our library to our fluid template by just adding {lib.sidebarNav} to the desired position in our HTML file.
Typoscript Library written for jQuery and Bootstrap (with scroll to top and footer anchors) without comments for copy & paste:
Back to top and anchor list for all content elements sourcecode (typoscript)
typoscript
lib.sidebarNav = CONTENT
lib.sidebarNav {
table = tt_content
wrap=<ul><li><a href="javascript:bookmarkscroll.scrollTo('top')">Top</a></li>|<li><a href="javascript:bookmarkscroll.scrollTo('footer')">Footer</a></li></ul>
select {
pidInList.data = page:uid
selectFields = header, uid, sorting
orderBy = sorting
languageField = sys_language_uid
where=colPos=0
}
renderObj=COA
renderObj{
5=TEXT
5 {
wrap=<li><a href="javascript:bookmarkscroll.scrollTo('c|')">
field=uid
}
10=TEXT
10{
required=1
wrap=|</a></li>
field=header
}
}
}