Page 1 of 1
Laufschrift? marquee
Posted: Tue Jul 20, 2010 9:30 pm
by 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!
Re: Laufschrift? marquee
Posted: Tue Jul 20, 2010 9:54 pm
by 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/
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 7:03 am
by oliver204
Cool danke unique.
Wie kann ich das denn einbinden?
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 7:57 am
by 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.
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 10:54 am
by oliver204
Hello - das moechte ich schon so wie auf deiner Seite einbinden.
Kannst du mir dahingehend noch einen Hinweis geben.
Danke fuer die Hilfe!!
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 11:13 am
by oliver204
Ich habe eine Message unter meinen Header platziert, aber es "laeuft" leider nicht ....
any ideas?
www.theferrers.northants.sch.uk
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 11:18 am
by 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
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 11:25 am
by oliver204
Hehe es laueft... aber es laeuft zu schnell.
Wie kann ich denn das Tempo regulieren
Re: Laufschrift? marquee
Posted: Wed Jul 21, 2010 11:43 am
by 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.