Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!

Spezialisten mit langjähriger Erfahrung

Schnelle Projektumsetzungen

sandoba.takeoff - Komplettpaket für Ihr Internetprojekt Kontakt mit sandoba.de aufnehmen

Hinweis zur Bestellung
Haben Sie Fragen zur Bestellung im Online-Shop? In den "Hilfen für die Bestellung" werden Ihre Fragen beantwortet. Auch der Support hilft Ihnen gerne weiter (Kontaktformular).


G8-Gute-Nacht-Camp setzt auf Contentpapst

Ein Newsticker für Ihre Website

Gerade bei Inhalten, welche häufig aktualisiert werden, bietet es sich an, einen kurzen Überblick über diese Inhalte in einem Newsticker zu geben. Contentpapst bietet mit dem Container-System bereits die notwendigen Voraussetzungen.

Die Animation des Newstickers wird durch eine Kombination von Ebenen und Javascript-Funktionen realisiert. Zuerst müssen Sie eine neue HTML-Datei (in diesem Beispiel "newsticker.htm") innerhalb des Contentpapst-Ordners (bzw. in einem Unterordner) erstellen. Diese füllen Sie mit folgendem Inhalt:

<!-- Contentpapst 1.3.0 - www.sandoba.de -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

<head>

<title>{cp:variable:title}</title>

<script language="JavaScript1.2">
<!--

var l1 = 1;
var t1 = 1;
var w1 = 600;
var ie = document.all ? true : false;
var first = true;
var l2 = l1 + w1;
var l3 = l1 - l2;
var l = l2;

function start_ticker() {
if (ie) {

if (l1 == 0 && t1 == 0) {
pos = document.all['tickpos'];
l1 = getLeft(pos);
t1 = getTop(pos);
}

newsticker.style.posTop = t1;

} else {

if (l1 == 0 && t1 == 0) {
pos = document.anchors['tickpos'];
l1 = pos.x;
t1 = pos.y;
}

document.newsticker.pageY = t1;

}

l2 = l1 + w1;
l3 = l1 - l2;
l = l2;
setInterval('tick()',10);
}

function getLeft(ll) {
if (ll.offsetParent) {
return (ll.offsetLeft + getLeft(ll.offsetParent));
} else {
return (ll.offsetLeft);
}
}

function getTop(ll) {
if (ll.offsetParent) {
return (ll.offsetTop + getTop(ll.offsetParent));
} else {
return (ll.offsetTop);
}
}

function tick() {
l = l - 1.5;

if (l < l3) l = l2;
cl = l1 - l;
cr = l2 - l;

if (ie) {

newsticker.style.posLeft = l;
newsticker.style.posTop = t1;
newsticker.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";

if (first) newsticker.style.visibility = "visible";

} else {

document.newsticker.pageX = l;
document.newsticker.clip.left = cl;
document.newsticker.clip.right = cr;
if (first) document.newsticker.visibility = "show";

}

first = false;

}
// -->
</script>

<link rel="stylesheet" href="themes/{cp:variable:theme}/style.css" type="text/css" title="Default Style" media="screen" />

<style>
<!--
.newsticker {
position: absolute;
font-family: Verdana;
font-size: 11px;
visibility: hidden;
}
//-->
</style>

</head>
<body>

<img src="{cp:path}images/cms_spacer.gif" border="0" alt="" onload="start_ticker()"/>

<div id="newsticker" class="newsticker" style="position: absolute">
<nobr>- {cp:container module="news" start="0" limit="5" category="-" order="date" dir="desc" template="{cp:path}screen.htm"}</nobr>
</div>

</body>
</html>

Sie sehen hier insgesamt vier Javascript-Funktionen, eine Reihe von CSS-Befehlen sowie eine Ebene samt {cp:tags}. Kurzgefasst: Durch die Javascript-Funktionen wird der Inhalt der Ebene dynamisch verschoben und nach Beendigung der Bewegung beginnt der Ablauf erneut. Damit der Newsticker beim ersten Aufruf starten kann, wird über eine nicht sichtbare Grafik die notwendige Javascript-Funktion "start_ticker()" aufgerufen.

Der Inhalt selbst wird über einen Container generiert und mittels der Vorlage "screen.htm" des genutzten Vorlagen-Sets dargestellt. Diese bewirkt eine Auflistung der fünf aktuellsten News mit Überschrift und Links:

<a href="{cp:news:link}">{cp:news:title}</a>

Damit alle Tags verarbeitet werden können, müssen Sie die HTML-Seite direkt über Contentpapst aufrufen. Für den Newsticker bietet sich hier die Einbindung als Inline Frame (Iframe) an. Platzieren Sie folgenden Quellcode innerhalb eines Artikels oder einer beliebigen Vorlage und schon ist der Newsticker betriebsbereit:

<iframe name="I1" width="600" height="20" scrolling="no" border="0" frameborder="0" src="index.php?file=newsticker.htm&clean=yes"></iframe>

Selbstverständlich ist über eine Veränderung des Containers-Tags auch ein Ticker für Artikel, den Online-Shop oder beliebige andere Module realisierbar. Durch Veränderung der HTML-Seite können Sie die Optik des Newstickers beliebig per CSS anpassen.

Bitte geben Sie eine Bewertung ab: nicht lesenswert  -2 -1 0 +1 +2  lesenswert


Weitere Artikel in der Knowledge Base:

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
https://www.sandoba.de/support/knowledge-base/cms/ein-newsticker-fuer-ihre-website.html