.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =============== EXT: cscrollbar =============== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: alex :Changed: 2012-01-06T19:55:39 :Author: Alex Tuveri, web designer :: University of Udine :Email: at@uniud.it :Info 3: http://www.specialistaweb.it :: http://csit.uniud.it :Info 4: .. _EXT-cscrollbar: EXT: cscrollbar =============== Extension Key: **cscrollbar** Copyright 2000-2002, Alex Tuveri, web designer :: University of Udine, 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: 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: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This simple +ext provides a way to render virtually all Ctypes within a box (DIV) and a customizable scroll bar. **You can add in you page:** - one or more than scrollbars - all the scrollbars in the same page will be stylized in the same way - you can use the old js code (for backward compatibility) or the new code This is an adaptament of the work made by Nathan Faubion; copyright notice (MIT license): Copyright (c) 2009-2010 Nathan Faubion Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.: [MIT LICENSE] **Warning** : this is a beta version; works fine – see ToDo at the end of this document. .. _Test-made: Test made ^^^^^^^^^ This +ext is compatible Msie 7+, Mozilla. I have not tested it with other browsers. .. _Screenshots: Screenshots ^^^^^^^^^^^ Text Ctype displayed with a custom scroll bar to the right side: |img-1| online example – here a content type record (combining more than one content) is displayed inside the scrollbar: **LIVE DEMO** `http://www.specialistaweb.it/Scrollbar-personalizzata.159.0.html `_ .. _Installation: 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. |img-2| Add tone of the two he libraries available (only one!): .. _Usage: Usage ----- |img-3| 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: 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):** |img-4| feel free to change styles and insert background-images to customize the scroll bar. .. _New-scroll-bar-1-x-customization: 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: |img-5| **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: Problems and notes ------------------ **NEW SCROLLBAR LIBRARY (custom scrollbar v1.x)** - still beta - I don'tknow it there will be problems using css inside 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: Faq --- \- none .. _To-Do-list: 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: 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
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 |img-6| EXT: cscrollbar - 6 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 153 .. :id: immagini2 .. :name: immagini2 .. :width: 601 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 211 .. :id: immagini1 .. :name: immagini1 .. :width: 669 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 212 .. :id: immagini3 .. :name: immagini3 .. :width: 345 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 200 .. :id: immagini4 .. :name: immagini4 .. :width: 669 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 268 .. :id: immagini5 .. :name: immagini5 .. :width: 322 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102