.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


===================
EXT: Rotate Content
===================

:Created:
      2010-02-18T17:33:18

:Changed by:
      Markus Kappe

:Changed:
      2012-06-06T17:09:04.530000000

:Classification:
      dix_rotatecontent

:Description:
      The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----

:Keywords:
      jQuery, content slide, codaslider, forEditors, forAdmins, forDevelopers, forIntermediates

:Author:
      Markus Kappe

:Email:
      markus.kappe@dix.at

:Info 4:


:Language:
      en


|img-1| |img-2| EXT: Rotate Content - dix\_rotatecontent


.. _EXT-Rotate-Content:

EXT: Rotate Content
===================

Extension Key: dix\_rotatecontent

Language: en

Keywords: jQuery, content slide, codaslider, forEditors, forAdmins,
forDevelopers, forIntermediates

Copyright 2000-2010, Markus Kappe, <markus.kappe@dix.at>

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.org

.. _Table-of-Contents:

Table of Contents
-----------------

`EXT: Rotate Content 1 <#__RefHeading__1281_769116936>`_

**`Introduction 3 <#__RefHeading__1283_769116936>`_**

`What does it do? 3 <#__RefHeading__1285_769116936>`_

`Screenshots 3 <#__RefHeading__1287_769116936>`_

**`Users manual 5 <#__RefHeading__1291_769116936>`_**

**`Administration 6 <#__RefHeading__1297_769116936>`_**

`Installation 6 <#__RefHeading__1299_769116936>`_

**`Configuration 7 <#__RefHeading__1301_769116936>`_**

`Reference 7 <#__RefHeading__1303_769116936>`_

`css 8 <#__RefHeading__1305_769116936>`_

**`FAQ / Known problems 9 <#__RefHeading__1307_769116936>`_**

**`To-Do list 10 <#__RefHeading__1309_769116936>`_**

**`ChangeLog 11 <#__RefHeading__1311_769116936>`_**


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

With this extension you can display alternating content elements.
After a configurable number of seconds the display changes using a
smooth scrolling effect.

It uses jQuery and coda-slider to do that.


.. _Screenshots:

Screenshots
^^^^^^^^^^^

|img-3| Backend view

|img-4|

Frontend view (second panel of three)


.. _Users-manual:

Users manual
------------

To use this extension you just have to insert a content element from
type “plugin” and select “Rotate Content” plugin. Then you create as
many contents within as you like. Each content becomes a single panel
(that means each content is displayed at a time). You can even choose
“Insert Records” to join many other contents in one panel.

On how to administrate and install the extension see next chapter


.. _Administration:

Administration
--------------


.. _Installation:

Installation
^^^^^^^^^^^^

- Install Extension using the extension manager and update the database.

- Create a page (folder) where the contents will get stored. Write down
  the page id.

- Configure the extension using the extension manager. Choose which
  resources should be included, set the default interval, and MOST
  IMPORTANT set the page id (PID) you have written down in the previous
  step.

- Open your TypoScript and set the width of the displayed content
  (default is 400 pixels)

::

      tx_dixrotatecontent.width = 400


.. _Configuration:

Configuration
-------------


.. _Reference:

Reference
^^^^^^^^^

TypoScript constants: tx\_dixrotatecontent\_pi1

.. ### BEGIN~OF~TABLE ###


.. _width:

width
"""""

.. container:: table-row

   Property
         width
   
   Data type
         int
   
   Description
         The width in pixels
   
   Default
         400


.. ###### END~OF~TABLE ######

[tsref: tx\_dixrotatecontent\_pi1]

TypoScript setup: plugin.tx\_dixrotatecontent\_pi1

.. ### BEGIN~OF~TABLE ###


.. _template:

template
""""""""

.. container:: table-row

   Property
         template
   
   Data type
         string
   
   Description
         The template that is used to render the HTML
   
   Default
         EXT:dix\_rotatecontent/res/template.html



.. _include-jQuery:

include.jQuery
""""""""""""""

.. container:: table-row

   Property
         include.jQuery
   
   Data type
         string
   
   Description
         This resource is included as <script> in the head section, if
         activated in the extension manager
   
   Default
         https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js



.. _include-codaslider:

include.codaslider
""""""""""""""""""

.. container:: table-row

   Property
         include.codaslider
   
   Data type
         string
   
   Description
         This resource is included as <script> in the head section, if
         activated in the extension manager
   
   Default
         EXT:dix\_rotatecontent/res/jquery.coda-slider-2.0.js



.. _include-css:

include.css
"""""""""""

.. container:: table-row

   Property
         include.css
   
   Data type
         string
   
   Description
         This resource is included as <link> in the head section, if activated
         in the extension manager.
         
         Please notice that there is more CSS included using
         \_CSS\_DEFAULT\_STYLE
   
   Default
         EXT:dix\_rotatecontent/res/coda-slider-2.0.css



.. _options:

options
"""""""

.. container:: table-row

   Property
         options
   
   Data type
         → see next section
   
   Description
         Options for the configuration of coda-slider
   
   Default



.. _CSS-DEFAULT-STYLE:

\_CSS\_DEFAULT\_STYLE
"""""""""""""""""""""

.. container:: table-row

   Property
         \_CSS\_DEFAULT\_STYLE
   
   Data type
         string
   
   Description
         Default CSS style
   
   Default
         → see next section


.. ###### END~OF~TABLE ######

[tsref: plugin.tx\_dixrotatecontent\_pi1]

TypoScript setup: plugin.tx\_dixrotatecontent\_pi1.options

Please see http://www.ndoherty.biz/forums/viewtopic.php?f=4&t=2 for
exact documentation of the options

.. ### BEGIN~OF~TABLE ###


.. _autoHeight:

autoHeight
""""""""""

.. container:: table-row

   Property
         autoHeight
   
   Data type
         bool
   
   Description
   
   
   Default
         true



.. _autoHeightEaseDuration:

autoHeightEaseDuration
""""""""""""""""""""""

.. container:: table-row

   Property
         autoHeightEaseDuration
   
   Data type
         int
   
   Description
   
   
   Default
         1000



.. _autoHeightEaseFunction:

autoHeightEaseFunction
""""""""""""""""""""""

.. container:: table-row

   Property
         autoHeightEaseFunction
   
   Data type
         string
   
   Description
   
   
   Default
         swing



.. _autoSlide:

autoSlide
"""""""""

.. container:: table-row

   Property
         autoSlide
   
   Data type
         bool
   
   Description
   
   
   Default
         true



.. _autoSlideInterval:

autoSlideInterval
"""""""""""""""""

.. container:: table-row

   Property
         autoSlideInterval
   
   Data type
         int
   
   Description
   
   
   Default



.. _autoSlideStopWhenClicked:

autoSlideStopWhenClicked
""""""""""""""""""""""""

.. container:: table-row

   Property
         autoSlideStopWhenClicked
   
   Data type
         bool
   
   Description
   
   
   Default
         false



.. _crossLinking:

crossLinking
""""""""""""

.. container:: table-row

   Property
         crossLinking
   
   Data type
         bool
   
   Description
   
   
   Default
         true



.. _dynamicArrows:

dynamicArrows
"""""""""""""

.. container:: table-row

   Property
         dynamicArrows
   
   Data type
         bool
   
   Description
   
   
   Default
         true



.. _dynamicArrowLeftText:

dynamicArrowLeftText
""""""""""""""""""""

.. container:: table-row

   Property
         dynamicArrowLeftText
   
   Data type
         string
   
   Description
   
   
   Default
         &#171; left



.. _dynamicArrowRightText:

dynamicArrowRightText
"""""""""""""""""""""

.. container:: table-row

   Property
         dynamicArrowRightText
   
   Data type
         string
   
   Description
   
   
   Default
         right &#187;



.. _dynamicTabs:

dynamicTabs
"""""""""""

.. container:: table-row

   Property
         dynamicTabs
   
   Data type
         bool
   
   Description
   
   
   Default
         true



.. _dynamicTabsAlign:

dynamicTabsAlign
""""""""""""""""

.. container:: table-row

   Property
         dynamicTabsAlign
   
   Data type
         sting
   
   Description
   
   
   Default
         center



.. _dynamicTabsPosition:

dynamicTabsPosition
"""""""""""""""""""

.. container:: table-row

   Property
         dynamicTabsPosition
   
   Data type
         string
   
   Description
   
   
   Default
         bottom



.. _externalTriggerSelector:

externalTriggerSelector
"""""""""""""""""""""""

.. container:: table-row

   Property
         externalTriggerSelector
   
   Data type
         string
   
   Description
   
   
   Default
         a.xtrig



.. _firstPanelToLoad:

firstPanelToLoad
""""""""""""""""

.. container:: table-row

   Property
         firstPanelToLoad
   
   Data type
         int
   
   Description
   
   
   Default
         1



.. _panelTitleSelector:

panelTitleSelector
""""""""""""""""""

.. container:: table-row

   Property
         panelTitleSelector
   
   Data type
         string
   
   Description
   
   
   Default
         span.tabTitle



.. _slideEaseDuration:

slideEaseDuration
"""""""""""""""""

.. container:: table-row

   Property
         slideEaseDuration
   
   Data type
         int
   
   Description
   
   
   Default
         1000



.. _slideEaseFunction:

slideEaseFunction
"""""""""""""""""

.. container:: table-row

   Property
         slideEaseFunction
   
   Data type
         string
   
   Description
   
   
   Default
         swing


.. ###### END~OF~TABLE ######

[tsref: plugin.tx\_dixrotatecontent\_pi1.options]


.. _css:

css
^^^


.. _Default-styles:

Default styles
""""""""""""""

::

   plugin.tx_dixrotatecontent_pi1._CSS_DEFAULT_STYLE (
           .coda-slider-wrapper { padding: 10px; padding-bottom: 16px; background: #eee; display: inline-block; position: relative; }
           
           /* Use this to keep the slider content contained in a box even when JavaScript is disabled */
           .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px; }
           
           /* Change the width of the entire slider (without dynamic arrows) */
           .coda-slider, .coda-slider .panel { width: {$tx_dixrotatecontent.width}px; } 
           
           /* Change margin and width of the slider (with dynamic arrows) */
           .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: {$tx_dixrotatecontent.width}px; }
           .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px; }
           
           /* Arrow styling */
           .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }
           
           /* Tab nav */
           .coda-nav ul { position: absolute; bottom: 4px; left: 6px; list-style-type: none; margin: 0; padding: 0; z-index: 99999; }
           .coda-nav ul li { display: inline; padding: 0; margin: 0; }
           .coda-nav ul li a { display: inline; color: green; padding: 2px 4px; text-decoration: none; font-size: 1.5em; }
           .coda-nav ul li a:hover { text-decoration: none; color: yellow; }
           .coda-nav ul li a.current { text-decoration: underline; }
           
           /* Panel padding */
           .coda-slider .panel-wrapper { padding: 0px; }                   
   )

Copy and paste it to your TS setup, then modify it to fit your needs.


.. _Examples:

Examples
""""""""

.. ### BEGIN~OF~TABLE ###


.. _Change-padding:

Change padding
~~~~~~~~~~~~~~

.. container:: table-row

   What
         Change padding
   
   CSS
         ::
         
            .coda-slider-wrapper { padding: 0px; }



.. _Change-background:

Change background
~~~~~~~~~~~~~~~~~

.. container:: table-row

   What
         Change background
   
   CSS
         ::
         
            .coda-slider-wrapper { background: transparent; }



.. _Change-position-of-the-tab-nav-bullets:

Change position of the “tab nav” (bullets)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   What
         Change position of the “tab nav” (bullets)
   
   CSS
         ::
         
            .coda-nav ul { top: 5px; bottom: auto; left: 6px; right: auto; }



.. _Change-the-color-of-the-bullets:

Change the color of the bullets
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   What
         Change the color of the bullets
   
   CSS
         ::
         
            .coda-nav ul li a { color: blue; }
            .coda-nav ul li a:hover { color: red; }



.. _Change-the-layout-of-the-active-tab-in-nav:

Change the layout of the active tab in nav
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. container:: table-row

   What
         Change the layout of the active tab in nav
   
   CSS
         ::
         
            .coda-nav ul li a.current { background: #eee; }


.. ###### END~OF~TABLE ######


.. _FAQ-Known-problems:

FAQ / Known problems
--------------------

Q: The $ (shortcut for jQuery) is not available. Why?

A: To avoid conficts with other javascript frameworks (e.g. mootools,
prototype, …) jQuery runs with the noConflict() option. If you don't
want that, you have to deactivate the automatic inclusion of jQuery
and include it yourself.

Q: When saving the content I get the error message "1: Attempt to
insert record on page '[root-level]' (0) where thistable, tt\_content,
is not allowed". What is wrong?

A: Probably you didn't set the PID in the extension manager.

Q: Can I insert multiple instances of this plugin on one page?

A: Yes

Q: Can I give different plugins on the same page different widths?

A: Yes, you have to do that with CSS. Something like this will do the
trick:

::

   #col1 .coda-slider-wrapper.arrows .coda-slider, #col1 .coda-slider-wrapper.arrows .coda-slider .panel, #col1 .coda-slider, #col1 .coda-slider .panel  { width: 200px; }
   #col2 .coda-slider-wrapper.arrows .coda-slider, #col2 .coda-slider-wrapper.arrows .coda-slider .panel, #col2 .coda-slider, #col2 .coda-slider .panel { width: 350px; }

(Wath the use of the #col1 and #col2 selector)

Q: Can I give different plugins on the same page different intervals?

A: No

Q: Can I change the scrolling direction from left/right to top/bottom?

A: No

Q: Can I change the scrolling so that when the panel changes from the
last one to the first one it scrolls to the right instead of passing
all the panels in the middle when scrolling to the left?

A: No

Q: I am an awesome JavaScript hacker, and I pimped the coda-slider
with an awesome feature. Can you include it in your extension?

A: Yes, please send me an email to `markus.kappe@dix.at
<mailto:markus.kappe@dix.at>`_

Q: Can you make an additional feature for me?

A: Maybe, please send me an email to `markus.kappe@dix.at
<mailto:markus.kappe@dix.at>`_

Q: Can I name the panels (for use in the tab nav)?

A: Yes, set the option panelTitleSelector to something like “h2” and
make sure the content elements contain a <h2>

Q: It doesn't work. How do I debug it?

A: Use Firebug (Extension to Firefox) and look out for JavaScript
errors


.. _To-Do-list:

To-Do list
----------

- Test it with many different browsers

- Maybe add some cool default CSS for dynamicArrows


.. _ChangeLog:

ChangeLog
---------

- Create a file "ChangeLog" (see e.g. the extension "cal" as example) to
  inform about changes or

- Use this section to document all the changes through the versions.

- Alternative to the following list: `ChangeLog online (point this link
  to YOUR extension) <http://typo3.org/extensions/repository/view/doc_te
  mplate/current/info/ChangeLog/>`_

.. ### BEGIN~OF~TABLE ###


.. _1-0-1:

1.0.1
^^^^^

.. container:: table-row

   Version
         1.0.1
   
   Changes
         First public version



.. _1-1-0:

1.1.0
^^^^^

.. container:: table-row

   Version
         1.1.0
   
   Changes
         Added documentation, made cool CSS for tab nav, added options to
         TypoScript



.. _1-2-0:

1.2.0
^^^^^

.. container:: table-row

   Version
         1.2.0
   
   Changes
         Added swipe support, changed default CSS (no padding, cooler bullet
         points)


.. ###### END~OF~TABLE ######

|img-2| 11


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left

.. |img-2| image:: img-2.png
.. :border: 0
.. :height: 21
.. :hspace: 9
.. :id: Grafik2
.. :name: Grafik2
.. :width: 87

.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 581
.. :id: Grafik1
.. :name: Grafik1
.. :width: 523

.. |img-4| image:: img-4.png
.. :align: left
.. :border: 0
.. :height: 236
.. :id: Grafik3
.. :name: Grafik3
.. :width: 465