EXT: Rotate Content¶

Table of Contents¶

EXT: Rotate Content 1

`Introduction 3 <#__RefHeading__1283_769116936>`_

What does it do? 3

Screenshots 3

`Users manual 5 <#__RefHeading__1291_769116936>`_

`Administration 6 <#__RefHeading__1297_769116936>`_

Installation 6

`Configuration 7 <#__RefHeading__1301_769116936>`_

Reference 7

css 8

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

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

`ChangeLog 11 <#__RefHeading__1311_769116936>`_

Introduction¶

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¶

tx_dixrotatecontent.width = 400

Configuration¶

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; }
)

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

.coda-slider-wrapper { background: transparent; }

.coda-nav ul { top: 5px; bottom: auto; left: 6px; right: auto; }

.coda-nav ul li a { color: blue; }
.coda-nav ul li a:hover { color: red; }

.coda-nav ul li a.current { background: #eee; }

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

Q: Can you make an additional feature for me?

A: Maybe, please send me an email to 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¶

• Test it with many different browsers
• Maybe add some cool default CSS for dynamicArrows

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)