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.

img-1

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.

img-2

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 an anchor menu out of content elements

To create an anchor menu there are several options:

1.) Use the 3 rd sitemap type called “Section index” (German “Abschnittsübersicht”).

2.) Use plain TS if you want to be available to do more things

# TS Code
temp.anchorMenu = CONTENT
temp.anchorMenu {
        table = tt_content
        select {
                pidInList = this
                orderBy = sorting
                where = colPos=0
                languageField=sys_language_uid
        }
        wrap = <ul>|</ul>
        renderObj = TEXT
        renderObj {
                field = header
                dataWrap= <li><a href="#c{field:uid}">|</a> </li>
        }
}

3) Of course the extension also will work with every other anchor links (from extensions, from templates, ...).

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.

Changelog

- 1.0.0. Initial release

img-3 EXT: rgsmoothscroll - 4