{{indexmenu_n>250}}

====== Ticker (horizontal) ======

A horizontal ticker //(treadmill)// whitch can be used **in each cp with own template** //(preferably text-CPs)//.




----
V1.0  18.02.2010  

Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?p=122557]] \\


**Autor:**  K.Heermann (flip-flop) http://planmatrix.de \\
**Enhanced:** Uwe367 //(+ JavaScript)//

**CMS Version:** >= 1.3 \\ 
**Version:** V1.0 \\


Tag: -- \\

Filename: ** *.tmpl ** 

Folder:  ** template/inc_cntpart/* ** 

**Condition:** --


----
----
\\



==== Template ====

Example for the cp "plain text"

  * **Copy and paste the code into the file  ##ticker.tmpl## in ##template/inc_cntpart/plaintext/ ##**

\\
**Without JavaScript:**
<code html ticker.tmpl>
<!--IMAGES_HEADER_START//-->

[TITLE]<h4>{TITLE}</h4>[/TITLE]
[SUBTITLE]<h5>{SUBTITLE}</h5>[/SUBTITLE]

<div class="ticker-wrap">
[TEXT]<marquee  scrollamount = 3><div class="ticker">{TEXT}</div></marquee>[/TEXT]
</div>
</code>
\\

**Using JavaScript:** Stop rotating when the mouse hovers over the treadmill.

<code html ticker.tmpl>
<!--IMAGES_HEADER_START//-->

[TITLE]<h4>{TITLE}</h4>[/TITLE]
[SUBTITLE]<h5>{SUBTITLE}</h5>[/SUBTITLE]

<div class="ticker-wrap">
[TEXT]<marquee onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"><div class="ticker">{TEXT}</div></marquee>[/TEXT]
</div>
</code>
\\




==== CSS ====


<code css >
/* ==== CSS simple Ticker */

.ticker-wrap {
  width: 250px;
  height:20px;
  padding-top: 7px;
  background-color: #eee;
}

.ticker p {
  font-family: Arial, Verdana, Helvetica;
  font-size: 14px;
  font-weight: bold;
  color: #777;
}
/* ==== ENDE simple Ticker */
</code>