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: –

Example for the cp “plain text”

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

Without JavaScript:

<!--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>

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

<!--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>

/* ==== 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 */