Scrollbar on the home page

[libralion]

Hi everybody,
My client wants a scrollbar/ticker with text on the home page. I tried the NFS module, but that basically only works with newsitems and is not what I want.
I can't find much on the forum about this.
Does somebody know what I can use and how to do this?
Thanks.

Johanna

[Wishbone]

You can use <marquee>{global content block goes here}</marquee>

It's not valid XHTML, but all browsers support it. There's probably Javascript solutions that might be better. I have a custom module that I created for my racing club, that has support for scrolling announcements, up to four, where the editor enters the text, selects the color, scroll speed, marquee behavior and expiration date... If you need something like this, I can make a copy for you.

[Jos]

There is also a marquee plugin in the forge, though I don't know what it does exacly.
http://dev.cmsmadesimple.org/projects/marquee

[libralion]

Thanks Wishbone and Jos, but I am searching for a valid XHTML scroller.
Both the NFS module as well as the marquee plugin are not valid XHTML.
If somebody know of a valid scroller, please let me know.
Thanks.

Johanna

[Wishbone]

A quick web search of "Javascript Marquee" sent me to this page:

http://rumkin.com/tools/marquee/

"The Great JavaScript Marquee Generator"

It gives you a bunch of different types of marquees, and you just fill in the text you want and it gives you the javascript code... You can replace your text with the output of a GCB. I haven't tested it.

[Wishbone]

There's also jquery marquees:

http://remysharp.com/demo/marquee.html

[libralion]

Thanks Wishbone.
But I have no idea how to implement this in CMSMS.
For instance this is the script that I generated with the script on that page:

Code: Select all

<__script__ language="JavaScript"> <!-- Begin hide from old browsers window.onerror = null var browserOK = (((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) >= 3)) || ((navigator.appName == 'Microsoft Internet Explorer') && (parseInt(navigator.appVersion) >= 4))); if (browserOK) { Message = "Yoga is voor iedereen - Yoga is voor iedereen - Yoga is voor iedereen "; Length = 0; } function marquee() { if (browserOK) { window.status = Message.substring(0, Length); if (++Length > Message.length) { Length = 0; window.setTimeout('marquee()', 2000); } else { window.setTimeout('marquee()', 200); } } } window.setTimeout('marquee()', 100); // End hide --> </__script>

Where do I put that and how do I call it in a CMSMS page?
Thanks.

Johanna

[Jos]

Just copy/paste it in a template and put {literal}...{/literal} tags arround it.

[libralion]

Just copy/paste it in a template and put {literal}...{/literal} tags arround it.

Ok and what do I put on the page where I want the scroller to appear?

Johanna

[Jos]

Oke, in that case you better put the code in a Global Content Block (admin-menu Inhoud » HTML-blokken) Note: turn WYSIWYG off!

And you can put the smarty-tag for that Global Content Block in your page, or any other page that you would like to see it.

[libralion]

Ok I have found a javascript scroller and made it valid with help from a website that talked about validating javascript and XHTML: http://javascript.about.com/library/blxhtml.htm.
This is what I inserted in the head of the default template:

Code: Select all

{literal}
<__script__ type="text/javascript">
/* <![CDATA[ */
var tWidth='600px';                  // width (in pixels)
var tHeight='25px';                  // height (in pixels)
var tcolour='#ffffff';               // background colour:
var moStop=true;                     // pause on mouseover (true or false)
var fontfamily = 'tahoma,arial,helvetica,sans-serif'; // font for content
var tSpeed=2;                        // scroll speed (1 = slow, 5 = fast)

// enter your ticker content here (use \/ and \' in place of / and ' respectively)
var content='Yoga is voor iedereen - Yoga is voor iedereen - Yoga is voor iedereen - Yoga is voor iedereen';

// Simple Marquee / Ticker Script
// copyright 3rd January 2006, Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the below code in this script (including this
// comment) is used without any alteration
var cps=tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"'; tick +='><div id="mq" style="position:absolute;left:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.left=(parseInt(tWidth)+10)+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.left = (parseInt(mq.style.left)>(-10 - aw)) ?parseInt(mq.style.left)-cps+"px" : parseInt(tWidth)+10+"px";} window.onload=startticker;
/* ]]> */
</__script>   
{/literal}

Then I placed this on the page where I want the ticker to appear: <div id="ticker">Yoga</div>
For some reason you have to put something in this ticker div, else the ticker won't show.
I am sure that that can't be changed, but I have no clue where. If somebody knows how to change this, please let me know.
And I haven't found a way to change the fontsize of the ticker.
Anyway the ticker works fine and is XHTML valid.

Johanna

[M@rtijn]

And I haven't found a way to change the fontsize of the ticker.

Just specify the fontsize/style with css, it already is inside a div

Code: Select all

#ticker {font-size:10px;}

[libralion]

And I haven't found a way to change the fontsize of the ticker.

Just specify the fontsize/style with css, it already is inside a div

Code: Select all

#ticker {font-size:10px;}

For some reason that doesn't change anything. In the text editor I see that the font size has been changed, but when I look at the page, it still has the same font size.
Both in FF as well as in IE9.

Johanna

[libralion]

Ok it was much simpler than that.
I only had to change the var tHeight='20px';
Now the only thing that remains is the fact that you have to fill in something in the ticker div or else it won't work.

Johanna