Typo3 Formidable > Reference > elements > renderlet:TICKER

renderlet:TICKER

The renderlet:TICKER is a control which will render an HTML and will allow a scroll of it.


So, depending on what you want to display, you have two alternatives:

  • If you'll always have the same HTML to display on the page, then we advise you to use the /html option to configure this control.
  • If you'll have an HTML which can change from day to day, then we advise you to use the /childs option.


For example, if you want to advertise on your site, then you can simply use a renderlet:TICKER with the /html property set.

But if you want to display the latest news, then you must use renderlet:TICKER with /datasource. This will allow you to define:

  • a datasource for your ticker (option /datasource)
  • a template file to design each item from your ticker (option /template)
  • a list of items to display (option /childs)

 

 

Reference

Go to Top
path data type req default uobj description
all     This control has applied all the common properties of renderlet.

See renderlet:* section for the complete list of common properties to use.
widthinteger
  
450  Set up the width (in px) of the box where is displayed the renderlet:TICKER.
heightinteger
  
18  Set up the height (in px) of the box where is displayed the renderlet:TICKER.
offsettopinteger 0  Set up the position of renderlet:TICKER (in px) from the top of box, from where will start to be showed on.
offsetleftinteger 0  Set up the position of renderlet:TICKER (in px) from the left of box, from where will start to be showed on.
backgroundstring none  Specify a background for the box where is displayed the renderlet:TICKER, if any.

Example: 
  1. background="url('/fileadmin/templates/v1/frame.gif') no-repeat top left"
bgcolorstring transparent  Specify a background color for the box where is displayed the renderlet:TICKER, if any.

Example: 
  1. bgcolor="blue"
borderstring none  Specify a border for the box where is displayed the renderlet:TICKER, if any.

Example: 
  1. border="4px dashed silver"
bordercolorstring white  Specify a border color for the box where is displayed the renderlet:TICKER, if any.

Example: 
  1. bordercolor="#F82931"
itemwidthinteger    Set up the width (in px) of each item presented into the renderlet:TICKER.
If it isn't specified, then a default width is set up. This width can be sometimes distorted, because of the variety of the web browsers. So, it will be safer to set it up manually.
itemheightinteger    Set up the height (in px) of each item presented into the renderlet:TICKER.
If it isn't specified, then a default height is set up. This height can be sometimes distorted, because of the variety of the web browsers. So, it will be safer to set it up manually.
itemstylestring    Set up the inline styles that must be applied to each item of this renderlet:TICKER.

Example: 
  1. itemstyle="padding:2px; height:20px; line-height:20px;"
scrolling/ :
Specify all the configurations needed to execute the scroll of this renderlet:TICKER.

Example: 
  1. <scrolling mode="horizontal" direction="right" startdelay="2500" nextdelay="2000" amount="150" />
scrolling/modestring
  
horizontal  Set up the way how the content will be scrolled into the page.

The possible choices are:
  • horizontal: when the content will be scrolled on horizontal plan.
  • vertical: when the content will be scrolled on vertical plan.
scrolling/directionstring
  
left|top  Set up the direction to where the content must be scrolled.

The possible choices are:
  • left: when the content will be scrolled on horizontal plan, from the right to the left of box
  • right: when the content will be scrolled on horizontal plan, from the left to the right of box
  • top: when the content will be scrolled on vertical plan, from the bottom to the top of box
  • bottom: when the content will be scrolled on vertical plan, from the top to the bottom of box

Remarks:
  • WHEN mode=horizontal THEN the possibles values of direction are left and right and the default one is left
  • WHEN mode=vertical THEN the possibles values of direction are top and bottom and the default one is top
scrolling/startdelayinteger
  
2500  Set up the time which must pass before the execution of the first scroll (in milliseconds).
scrolling/nextdelayinteger
  
100  Set up the time which must pass before the execution of the next scroll (in milliseconds).
scrolling/amountinteger
  
1  Set up how far to jump at each execution of the scroll (in px).
scrolling/stopboolean false  Stop the scroll of ticker, if you want it.
This property is very useful when you are designing the renderlet:ticker.

This is a debug property.
scrolling/overflowstring hidden  Show all the content of the ticker.
This property is very useful when you are debugging the renderlet:ticker. When you want, for example, to see the entire content of ticker and to see how it really works.

This is a debug property.
htmlstring  
  
 Set up the HTML to be displayed into the renderlet:TICKER.

If you will define a /datasource and his /childs for this control, then you don't have to provide any /html content.

Example: 
  1. <html><![CDATA[
  2.     <div class="ameosformidable-rdtticker-item">
  3.         <img src="/fileadmin/templates/v1/images/babytiger.jpg" alt="The baby tiger" title="The baby tiger" border="0" width="125" height="100" />
  4.     </div>
  5.     <div class="ameosformidable-rdtticker-item">
  6.         <img src="/fileadmin/templates/v1/images/elephant.jpg" alt="The elephant" title="The elephant" border="0" width="125" height="100" />
  7.     </div>
  8.     <div class="ameosformidable-rdtticker-item">
  9.         <img src="/fileadmin/templates/v1/images/wildcat.jpg" alt="The wildcat" title="The wildcat" border="0" width="125" height="100" />
  10.     </div>
  11. ]]></html>
datasource/ :
Specify which datasource is used to populate this renderlet:TICKER.

Example: 
  1. <datasource use="newslist" limit="3" orderby="title" orderdir="ASC" />
datasource/usestring    Set up the name of datasource:* to whom is linked this renderlet:TICKER.
You must set up either a datasource with childs or an html, in order to be able to scroll something in this renderlet:TICKER.
datasource/limitinteger 5  Specify the max number of items to show on the renderlet:TICKER.
datasource/orderbystring tstamp  Specify the field used to sort the items.
datasource/orderdirstring DESC  Specify the way how the items will be sorted: ASC or DESC.
template/ :
Specify which template file is used to design the childs of this renderlet:TICKER.

Example: 
  1. <template path="fileadmin/templates/v1/template.html" subpart="###myticker###" alternateRows="###ROW###" />
template/pathstring  
  
 Set the absolute path of template file.
template/subpartstring  
  
 Set the name of subpart used to render this renderlet:TICKER.
template/alternaterowsstring  
  
 Set the name of subparts used to render each type of row from this renderlet:TICKER.

In the following example, all the odd rows is rendered using the subpart ###ROW1### and all the even rows by using ###ROW2###: 
  1. alternateRows="###ROW1###, ###ROW2###"
If all the rows have the same design, then you can simply set up this: 
  1. alternateRows="###ROW###"
childs/ :
When a renderlet:TICKER has a /datasource, then it is required to set up a list of childs to display into this control, in concordance with his datasource. All these childs will be also rendered into the page with the aid of a template file (see the section /template).

So, this placeholder will allow you to describe the list of childs for this control; where each child represents a renderlet:* and allows the nesting of elements inside your application.

Example: 
  1. <childs>
  2. 	<renderlet:DATE name="tstamp" readonly="true" />
  3. 	<renderlet:TEXT name="title" readonly="true" />
  4. 	<renderlet:IMAGE name="image" folder="/uploads/pics/" style="width:90px; height:75px;" />
  5. </childs>
And the according template file: 
  1. <!-- ###myticker### begin -->
  2. <!-- ###ROWS### begin-->
  3. 	<!-- ###ROW### begin-->
  4. 	<h5 style="margin:3px 0px; color:#993300;padding-left:3px;">
  5. 		{tstamp.value.readable} - {title.value.fixed_lgd_word(25, "...")}
  6. 	</h5>
  7. 	<div style="float:left;width:90px;padding-left:3px;">{image}</div>
  8. 	<div style="float:left;width:200px;padding-left:3px;">{short.value.fixed_lgd_word(175, "...")}</div>
  9. 	<div class="clear"><hr class="invisible" /></div>
  10. 	<!-- ###ROW### end-->
  11. <!-- ###ROWS### end-->
  12. <!-- ###myticker### end -->

Examples

Go to Top

1). This example presents the definition of a renderlet:TICKER with data source of type /html:

2). In the following example, the renderlet:TICKER has a data source of type /datasource. In this case, you must also define the place holders: /template and  /childs.