Page 1 of 1
Scrollbar on the home page
Posted: Tue Jul 12, 2011 5:17 pm
by 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
Re: Scrollbar on the home page
Posted: Tue Jul 12, 2011 5:39 pm
by 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.
Re: Scrollbar on the home page
Posted: Tue Jul 12, 2011 5:48 pm
by 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
Re: Scrollbar on the home page
Posted: Tue Jul 12, 2011 6:13 pm
by 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
Re: Scrollbar on the home page
Posted: Tue Jul 12, 2011 7:47 pm
by 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.
Re: Scrollbar on the home page
Posted: Tue Jul 12, 2011 7:49 pm
by Wishbone
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 5:58 am
by 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
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 7:29 am
by Jos
Just copy/paste it in a template and put {literal}...{/literal} tags arround it.
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 9:23 am
by libralion
Jos wrote: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
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 11:06 am
by 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.
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 11:08 am
by 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
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 11:35 am
by 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
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 12:00 pm
by libralion
M@rtijn wrote: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
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
Re: Scrollbar on the home page
Posted: Wed Jul 13, 2011 1:47 pm
by 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