Laufschrift? marquee

[oliver204]

Hallo - mein Boss will ne Laufschrift auf der Startseite unseres CMS anzeigen. Ich finde die News ja völlig ausreichend aber was man nicht alles tut.

In guten alten HTML Zeiten war marquee der Befehl.

Hat jemand eine Lösung für CMSMS ?
Die Laufschrift soll auf die Startseite wahrscheinlich direkt unter dem Banner.

Help is much appreciated!

[uniqu3]

Hallo ich habe das mit jquery scroller gelöst. Zu finden ist es hier http://code.google.com/p/hamiltonchua/s ... 1.0.js?r=1 Entwickler hat leider keine Demo Seite mehr.

Wie ich es angewendet habe kannst Du hier sehen: http://www.sturban.at/

[oliver204]

Cool danke unique.
Wie kann ich das denn einbinden?

[uniqu3]

Hi also Du kannst es denke ich aus meinem Quelltext ausleasen aber hier kurze Anleitung:

Ich habs zwar nicht mit News modul eingebunden aber es könnte so gehen
News Summary Template

Code: Select all

<div class="news">
{if $pagecount > 1}
 <ul id="ticker">
{foreach from=$items item=entry}
<li><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a></li>
{/if}
</ul>
{/foreach}
</div>

Erstelle eine datei für den Scroller jQuery plugin zbsp. scroller.js

Code: Select all

jQuery.fn.liScroll = function(settings) {
		settings = jQuery.extend({
		travelocity: 0.03
		}, settings);		
		return this.each(function(){
				var $strip = jQuery(this);
				$strip.addClass("newsticker")
				var stripWidth = 0;
				var $mask = $strip.wrap("<div class='mask'></div>");
				var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");								
				var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width 	
				$strip.find("li").each(function(i){
				stripWidth += jQuery(this, i).width();
				});
				$strip.width(stripWidth);			
				var defTiming = stripWidth/settings.travelocity;
				var totalTravel = stripWidth+containerWidth;								
				function scrollnews(spazio, tempo){
				$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
				}
				scrollnews(totalTravel, defTiming);				
				$strip.hover(function(){
				jQuery(this).stop();
				},
				function(){
				var offset = jQuery(this).offset();
				var residualSpace = offset.left + stripWidth;
				var residualTime = residualSpace/settings.travelocity;
				scrollnews(residualSpace, residualTime);
				});			
		});	
};

In deinem Seiten Template machst Du folgendes:

vor tag
 
{literal}
$(function(){
$("ul#ticker").liScroll();
});

{/literal}

Das CSS für dein Stylesheet

.news {
   width:deine breite;
   height:deine höhe;
   overflow: hidden;
   position:relative;
  }

 .news .mask {
   left: 10px;
   top: 5px;
   overflow: hidden;
   }
   

 ul#ticker{

   list-style-type: none;
   margin: 0;
   padding: 0;
   position:absolute;
}

 ul#ticker li {
   float: left;
   margin: 0;
   padding: 0;
   position:relative;
   }

 ul#ticker a {
   white-space: nowrap;
   padding: 0;
   }

Ich denke so sollte das funktionieren.

[oliver204]

Hello - das moechte ich schon so wie auf deiner Seite einbinden.
Kannst du mir dahingehend noch einen Hinweis geben.

Danke fuer die Hilfe!!

[oliver204]

Ich habe eine Message unter meinen Header platziert, aber es "laeuft" leider nicht .... 
any ideas?

www.theferrers.northants.sch.uk

[uniqu3]

Was brauchst Du noch für Hinweis?

Ohne News modul ist statischer code:

Code: Select all

<div class="news">
<ul id="ticker">
<li><a href="deinlink.html" title="link titel">Link</a></li>
<li><a href="deinlink.html" title="link titel">Link</a></li>
<li><a href="deinlink.html" title="link titel">Link</a></li>
</ul>
</div>

Edit: es kann ja auch nicht laufen, es sollte wie oben aussehen.

Ausserdem hast Du beim s3slider aufruf einen fehler

[oliver204]

Hehe es laueft... aber es laeuft zu schnell.
Wie kann ich denn das Tempo regulieren

[uniqu3]

es sollte schon noch Important sein das könnte zu falscher bewegungsanimation führen und ohne ist auch semantisch nicht richtig.

Bezüglich Speed anpassen, im plugin wird die Geschwindigkeit mit travelocity berechnet also vermute ich folgenden Aufruf im Template statt was Du jetzt hast:

Code: Select all

$(function(){
	$("ul#ticker").liScroll({travelocity: 0.20});
});

Spiel mit der zahl um den gewünschten Effekt zu erzielen.