DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
EXT: rgsmoothscroll¶
Author: | Kasper Skårhøj |
---|---|
Created: | 2002-11-01T00:32:00 |
Changed by: | Georg Ringer |
Changed: | 2007-09-06T14:22:30 |
Author: | Georg Ringer |
Email: | http://www.just2b.com |
Info 3: | |
Info 4: |
EXT: rgsmoothscroll¶
Extension Key: rgsmoothscroll
Copyright 2000-2002, Georg Ringer, <http://www.just2b.com>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.com
Table of Contents¶
EXT: rgsmoothscroll 1
Introduction 1
What does it do? 1
Screenshots & Demonstration 1
Users manual 1
Requirements with More than one Mootools extension at the website 2
Configuration 2
Reference 3
Further configuration 3
Create an anchor menu out of content elements 3
Create a “to the top”-link 3
Avoid troubles with RealUrl and anchor links 3
Known problems 4
To-Do list 4
Changelog 4
Introduction¶
What does it do?¶
This extension provides some very nice scroll effects for anchor links. Take a look at the demo page to get an idea what is meant.
There are many different effects available which are all presented on my page.
Screenshots & Demonstration¶
Screenshots are not possible because they can't present the effects. Take a look at the demo page!
In English: http://www.rggooglemap.com/en/dev/rgsmoothscroll.html
In German: http://www.rggooglemap.com/dev/rgsmoothscroll.html
Users manual¶
Getting started is very easy!
Import/Download the extension and install it like every other extension.
Include the static TS (from extension) in the template record (your root TS or make an ext. template just for the page where you want the SmoothScroll should work). **The steps for the real beginners are** :
Select your root/first page.
Click in the menu on the left side “Template” and choose “Edit whole record”.
Scroll down until you see the the same thing as in the screenshot shown.
Search for the “SmoothScroll” entry on the right side, click on it to get it on the left side.
Press “Save” and you are done.
For configuration, take a look at the next section in the manual.
Requirements with More than one Mootools extension at the website¶
If you got more than on extension installed which uses Mootools, you need to install the extension t3mootools by Peter Klein to avoid conflicts!
Check out the manual of this extension how to use it!
Configuration¶
The extension can be configured with plain TS in the setup field or with the Constant Editor which is a little bit easier to use.
Type of Transition
There are several types transitions available. Some of them are quite similar and to get a good overview, take a look at the demo page , because all effects are listed there. The effects are also described at the mootools website .
Mode of Transition
Every transition (except linear) can have one of the following modes: “In”, “Out”, “InOut”. All 3 modes are shown for every transition at the demo pages.
Duration
The duration of the effect. It is a value in milliseconds!
Frames per second
The frames per second for the transition.
Reference¶
transition¶
Property
transition
Data type
string
Description
Type of Transition. Possible values are: linear, Quad, Cubic, Quart, Quint, Pow, Expo, Circ, Sine, Back, Bounce, Elastic
Default
Bounce
mode¶
Property
mode
Data type
string
Description
Mode of transition: Which mode of the upper selected transition should be taken? Possible values are: In, Out, InOut
Default
Out
fps¶
Property
fps
Data type
Int
Description
The frames per second for the transition:
Default
60
duration¶
Property
duration
Data type
string
Description
The duration of the effect in ms
Default
1500
pathToMootools¶
Property
pathToMootools
Data type
string
Description
The path to the Mootools library
Default
EXT:rgsmoothscroll/res/mootools-1.11.js
[tsref:plugin.tx_rgsmoothscroll_pi1]
Further configuration¶
This section is about a further configuration which doesn't concern the extension rgsmoothscroll itself but anchor links in TYPO3.
Create a “to the top”-link¶
Create a normal content element and activate the checkbox “To top” (German: “nach oben”) at the top right corner to get the link. You can modify the text and everything with TS:
# TS Code
tt_content.stdWrap.innerWrap2 (
|
<a href="#top">to the top</a>
)
If you want the “To the top”-Link at every content element, you need the following line:
# TS Code
tt_content.stdWrap.innerWrap2.fieldRequired >
Of course you need somewhere an ID like this id=”top”. To this in your template or for example with this kind of code.
# TS Code
page.10.subparts.TPL_CONTENT.wrap = <a id="top"></a>|
Never forget that IDs are unique !
Avoid troubles with RealUrl and anchor links¶
To avoid troubles with activated RealUrl you need the following line in your TS:
# TS Code
config.prefixLocalAnchors = all
Known problems¶
- Xhtml doctype is required, and HTML is ancient history – you know that ;)
- Of course this just works with links to the same page and not to any page but I think this is kind of logic.
To-Do list¶
- Nothing further planned but tell me if you need something.