EXT: cscrollbar¶

Table of Contents¶

EXT: cscrollbar 1

Introduction 2

What does it do? 2

Screenshots 2

Installation 2

Usage 2

Configuration 3

Known problems 3

FAQ 4

To-Do list 4

Changelog 4

Introduction¶

Installation¶

Install the plugin and in Web > Teemplate menu, then edit all the whole record, click on:

Click here to edit whole template record

NOW THERE ARE TWO DIFFERENT SCROLLBAR AVAILABLE:

• custom scrollbar (scrollbar) (see image below) old style library, used since v. 0.0.4 – used a different js code to generate the scrollbar. It is more simple to configure but has some limits.
• custom scrollbar v1.x (scrollbar) (image not available) – There is 3 libraries available (normal, glossy, css3): select one new library, used since v. 1.x – used a different js code to generate the scrollbar. It is more dificult to configure but it is more flexble.

Add tone of the two he libraries available (only one!):

Usage¶

Edit any content type and you will find a new tab ( scroll Bar ); to activate fill the parameters width and height:

if you don't fill width or height the scrollbar will be generated with the following ( default ) parameters – see CONSTANTS.

*The remaining parameters are valid only for the cscrollbar v1.x library; they have not effect in any old scrollbar context!*

Warning : the width (I.e. 400px) refers only to the box *without* calculating the scroll-bar appearing to the right side.

Please change constants from Template menu to customize.

Old scroll bar customization example¶

THE FOLLOWING INSTRUCTIONS ARE RELATED TO THE USAGE OF SCROLLBAR with

'custom scrollbar (cscrollbar)' library if included

Maybe you refuse to use the scroll bar proposed with styles preconfigured.

To change the aspect follow this instructions.

unset the default styles, putting into your SETUP file this:

plugin.tx_cscrollbar_pi1._CSS_DEFAULT_STYLE >

plugin.tx_cscrollbar_pi1 {

_CSS_DEFAULT_STYLE (

.cscroller-container {

background-color: #eeeeee;

border: 1px solid gray;

}

DIV.cscroller-inner-container {

margin: 10px;

background-color: yellow;

padding-bottom: 10px;

}

.Scrollbar-Track {

width: 12px;

height: 280px;

background-color: gray;

}

.Scrollbar-Handle {

position: relative;

top: 0px;

left: 0px;

width: 12px;

height: 26px;

background-color: red;

}

.Scrollbar-Handle:hover {

background-color: orange;

}

)

}

the result (with css referenced):

feel free to change styles and insert background-images to customize the scroll bar.

New scroll bar (1.x) customization¶

THE FOLLOWING INSTRUCTIONS ARE RELATED TO THE USAGE OF SCROLLBAR with on of this library to include

'custom scrollbar v1.x (cscrollbar)'

'custom scrollbar v1.x -glossy ' (cscrollbar) → note: this is not flexible, you can use this only with vertical scrolling

' custom scrollbar v1.x -cs33 (cscrollbar)'

Libraries are mutual exclusive!

Customization is a bit complicated with this new version. In particular you have to know that the new version can be customized throughtCONSTANTS (Web > Template > Edit CONSTANTS).

First install the library then edit any content to put “under” the scrollbar.

By default this scrollbar shows the scroller in to the LEFT side and the vertical scroller is automatically created, so the resultwill be something like this:

HOW TO PUT THE SCROLLBAR INTO THE RIGHT SIDE

edit the plugin

set the width i.e. to 300 (unit are pixels!)

set the scrollbar offset to 320

set theleftcontent offset to1

set the right content padding as wished

HOW TO ENABLE HORIZONTAL SCROLLBAR

edit the plugin

enable horizontal scrolling

don't forget to change the content width area: use a value higher than the width used for the whole frame! Otherwise the horizontal r will not be displayed.

Now you can modify some behaviour of your scroll bar configuring the plugin parameters.Plugin parameters take precedence over the CONSTANTS.

You cannot create different (stylized) scrollbars on the same page – however you can create fx different scrollbar with the scrollbar track on the left or on the right, activate or not the horizontal scroller, size, etc. individually.

If you want to change some styles to use another handle, content background, scrollbar background and so on please refer to:

http://n-son.com/jsScrollbar/

Problems and notes¶

NEW SCROLLBAR LIBRARY (custom scrollbar v1.x)

• still beta
• I don'tknow it there will be problems using css inside <body> tag (?) at the moment I don't know a method to add CSS for the specific tt_content
• the use of more scrollbars on the same page → not yet fully tested.

OLD SCROLLBAR LIBRARY (custom scrollbar)

Under evaluation: if the whole scroller (scroller container and scrolbar track) is positioned in the first part of the HTML page all works correctly, but If it is positioned in the second part of the page (i.e. you have used the browser scroll bar to reach it) the scrollbar track doesn't work as expected. More in details: in this case in you have yet scrolled the content down and you click on the scrollbar-track (highest position) the handle will be positioned to the start, but if you want to return down you cannot do it.

Faq¶

- none

To-Do list¶

NEW SCROLLBAR LIBRARY (custom scrollbar v1.x)

• scrollbar template – explain how to customize and explain what it is
• reference for the CONSTANT and SETUP
• tween functions – add/modify the BE fields (now uses only one function hardcoded)
• add js for opera compatibility (redraw)
• glossy horizontal scroll (at the moment not available)
• debug

Changelog¶

• 0 6 -01-2012 (v.1.0. 3 ) – Minor modifications . Constants type (wrong type as int+ substituted with int). Enabled styles for css3 scrollbar)
• 0 4 -01-2012 (v.1.0. 2 ) – Minor modifications . Setup and constants for v1.x* are inherited (included with INCLUDE function). Cometic changes, guide updated.
• 03-01-2012 (v.1.0.0) – Old scrollbar code is still present for backward compatibility but will not updated. Since today there is two scrollbars available: ol scrollbar stile and new scrollbar. Locktype set to local (L), clear cache cmd set to 1.
• 31-12-2011 (v.0.4.5) – Bugfixes: using some long text the handle seems to be not positioned correctly, so the jsscroller.js was modified (thanks to Shaun Powell). Under some circumstances the text inside scroller-container (last row of a paragraph) was not displayed correctly. I modifid the style adding “padding: 1px;” and this seems to work to keep the text distant some pixel from the bottom.
• 03-06-2010 (v. 0.4.3) – Stable manual updated.
• 25-05-2010 (v. 0.4.2) – Stable removed an unuseful <DIV> from template file, manual updated.
• 24-05-2010 (v. 0.4.1) – Stable first release
• 23-04-2010 (v.0.2.0) – Beta – Docs and screenshot updated, first upload

EXT: cscrollbar - 6