Marquee Scroller problem

[mulderfox]

Hi!

I'm looking for a good horizontal scrolling marquee for my company's wss intranet site. I tried javascript based ones, and html/css code based ones.
Each has its own issues to me. I'm not a coder. so I toy around with the examples I find.
The thing is this: I want to text fluidity to be as good as in the javascript based marquee, and the editing of the marquee text, direction, size, inline photos and so on also to be easily editable from inside the site.
As the person who will edit the text to be put in the marquee is not familiar with code (basically it will be secretaries) I need it to be easily editable.
I originally used the following javascript code I found which seems to be based on the scrolling marquee found here at dynamic forums, but it still lacks control over several parameters such as: text direction, text color and size, ability to insert photos in line with the text, and have a seperate editing box just for the text to be run in the marquee.
If anyone can lend a hand, I'll be VERY greatful.
btw, the original file is a webpart (dwp file):



<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/WebPart/v2">
<Title>Marquee Scroller</Title>
<FrameType>None</FrameType>
<Description>Use this to scroll text in a Marquee fashion</Description>
<IsIncluded>true</IsIncluded>
<ZoneID>BannerBottom</ZoneID>
<PartOrder>1</PartOrder>
<FrameState>Normal</FrameState>
<Height />
<Width />
<AllowRemove>true</AllowRemove>
<AllowZoneChange>true</AllowZoneChange>
<AllowMinimize>true</AllowMinimize>
<IsVisible>true</IsVisible>
<DetailLink>http://www.sharepointhq.com</DetailLink>
<HelpLink>http://sharepointhqqa.thinknet.com/freewebpartsupportfiles/MarqueeScrollerHelp.html</HelpLink>
<Dir>Default</Dir>
<PartImageSmall>http://sharepointhqqa.thinknet.com/freewebpartsupportfiles/WebPartHQIconLarge.gif</PartImageSmall>
<MissingAssembly />
<PartImageLarge>http://sharepointhqqa.thinknet.com/freewebpartsupportfiles/WebPartHQIconLarge.gif</PartImageLarge>
<IsIncludedFilter />
<Assembly>Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>
<ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"><![CDATA[<div id="tnMarqueeDiv" style="display:none">
<b>Width:</b>&nbsp; <input type="text" size="5" maxlength="5" name="txtMarqueeWidth" id="txtMarqueeWidth" value="600"> px&nbsp;&nbsp;
<b>Height:</b> <input type="text" size="5" maxlength="5" name="txtMarqueeHeight" id="txtMarqueeHeight" value="40"> px&nbsp;&nbsp;
<b>Speed:</b> <input type="text" size="3" maxlength="3"name="txtMarqueeSpeed" id="txtMarqueeSpeed" value="1"> (value of 1-10, with 10 fastest)<br>
<br><b>Content to Scroll:</b> (Enter your HTML markup to be scrolled in the Marquee box)<br>
<textarea cols="80" rows="5" name="txtMarqueeContent" id="txtMarqueeContent"><nobr><span style="font-weight:bold;font-size:14pt;colorurple;">SharePoint HeadQuarters</span> - For all your SharePoint needs. More information <a href="www.sharepointhq.com">here</a></nobr></textarea>
<input type="button" value="Save & apply settings" onclick="javascript:tnSaveMarqueeState();">
<hr><br></div>


<script language="JavaScript">
/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/


//Specify the marquee's width (in pixels)
var marqueewidth="600px";
//Specify the marquee's height
var marqueeheight="40px";
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1;
//configure background color:
var marqueebgcolor="";
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1;

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><span style=\"font-weight:bold;font-size:14pt;colorurple;\">SharePoint HeadQuarters</span> - For all your SharePoint needs. More information <a href=\"www.sharepointhq.com\">here</a></nobr>';


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1); //slow speed down by 1 for NS
var copyspeed=marqueespeed;
var pausespeed=(pauseit==0)? copyspeed: 0;
var iedom=document.all||document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>');
var actualwidth='';
var cross_marquee, ns_marquee;

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee;
cross_marquee.style.left=parseInt(marqueewidth)+8+"px";
cross_marquee.innerHTML=marqueecontent;
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth;
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2;
ns_marquee.left=parseInt(marqueewidth)+8;
ns_marquee.document.write(marqueecontent);
ns_marquee.document.close();
actualwidth=ns_marquee.document.width;
}
lefttime=setInterval("scrollmarquee()",20);
}
window.onload=populate;

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px";
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px";

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed;
else
ns_marquee.left=parseInt(marqueewidth)+8;
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">');
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">');
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>');
write('</div></div>');
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>');
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>');
write('</ilayer>');
}
document.write('</td></table>');
}
}

try {
//Attach an Event
window.attachEvent("onload", new Function("tnInitMarquee();"));
}
catch(ex){
//Do Nothing
}

function tnInitMarquee() {
var idMarqueeDiv = document.getElementById('tnMarqueeDiv');
if(idMarqueeDiv) {

if( document.all.MSOLayout_InDesignMode.value == '1'
|| document.all.MSOTlPn_View.value == 1
|| document.all.MSOTlPn_View.value == 2
|| document.all.MSOTlPn_View.value == 3
|| document.all.MSOTlPn_View.value == 5) {
idMarqueeDiv.style.display = '';
}
else {
idMarqueeDiv.style.display = 'none';
}
}
}

function tnSaveMarqueeState() {

var objPart = WPSC.WebPartPage.Parts.Item('_WPQ_');
var objContentProp = objPart.Properties.Item("http://schemas.microsoft.com/WebPart/v2/ContentEditor#Content");
var txtContent = objContentProp.Value;
txtContent = txtContent.replace(/var marqueewidth=".*";/,'var marqueewidth="' + document.all.txtMarqueeWidth.value + '";');
txtContent = txtContent.replace(/id="txtMarqueeWidth" value=".*"/,'id="txtMarqueeWidth" value="' + document.all.txtMarqueeWidth.value + '"');
txtContent = txtContent.replace(/var marqueeheight=".*";/,'var marqueeheight="' + document.all.txtMarqueeHeight.value + '";');
txtContent = txtContent.replace(/id="txtMarqueeHeight" value=".*"/,'id="txtMarqueeHeight" value="' + document.all.txtMarqueeHeight.value + '"');
txtContent = txtContent.replace(/var marqueespeed=.*;/,'var marqueespeed=' + document.all.txtMarqueeSpeed.value + ';');
txtContent = txtContent.replace(/id="txtMarqueeSpeed" value=".*"/,'id="txtMarqueeSpeed" value="' + document.all.txtMarqueeSpeed.value + '"');
var txtScrollContent = document.all.txtMarqueeContent.value.replace(/"/g,'\\"');
txtScrollContent = txtScrollContent.replace(/'/g,'\\\'');
txtContent = txtContent.replace(/var marqueecontent='.*';/,'var marqueecontent=\'' + txtScrollContent + '\';');
txtContent = txtContent.replace(/id="txtMarqueeContent">.*<\/textarea>/,'id="txtMarqueeContent">' + document.all.txtMarqueeContent.value + '</textarea>');
objContentProp.Value = txtContent;
objPart.Save(false, tnPostSaveMarqueeState);
}

function tnPostSaveMarqueeState(didSave, txtError) {
// refresh page
window.location.href = window.location;
}

</script>

]]></Content>
<PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
</WebPart>

[Shotgun Ninja]

Wow, that's quite a bit of code for a marquee. But you could conceivably just add a couple of variables to that code, such as scrolldirection, scrollspeed, and textcolor, and have the marquee code include those variables. I'm not quite sure exactly how to relate it in code.

Also, instead of writing to a text file, try making it write to an HTML file. You can do this relatively easily by changing txt to HTML in the code. Then you could just make it a WYSIWYG editor on the marquee text-editing page, and it *should* write to the page in HTML. There are quite a few decent WYSIWYG editors on Dynamic Drive. I'm typing in one right now.

[Shotgun Ninja]

http://www.dynamicdrive.com/dynamicindex16/openwysiwyg/index.htm

[BLiZZaRD]

For simplistic reasoning, (and your secretaries) it would seem to make sense to have a script online.

2 pages... one the visitor sees with the marquee on it, the second where your secretaries go and change/update (with password verification).

I do have a bit of real life work to do, but if you give me a little time (by tonight most likely) I can help you write one that works this way.

Let me know if this is something that would help/interest you.

[mulderfox]

thank you, I would greatly appreciate it :)

[BLiZZaRD]

Okay, I will start whipping up something for you in a while. I get off work in about 3 hours, then the drive home and all that fun stuff.. dinner, web site maintenance...

Shouldn't be too difficult to get a simple one up and working...

Look for me later tonight :)

[BLiZZaRD]

Sorry for the delay. I lost power last night in a freak snow storm.

I head off to work in about an hour, and my bosses will leave shortly after that. I will do my walk through and catch up on work mail, then I will work on this script.

With any luck (and mine has been all bad this week) I will have something we can tweak on and look at by the time I get off work.

[GhettoT]

If you are still looking for a marquee scroller, and like the one on the ride hand side of my site (http://www.team330.org) Then i can give you a link to the site where I got it from. I think it is on javascript kit

[BLiZZaRD]

Take a look at that... then take a look at the DD proHTML ticker (http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm)

This one is VERY easy to edit, can include ANY HTML so you can change text, titles, all of that in each different one. (including adding pictures)

If this is still not what you are looking for I will finish up the one I am working on (probably still will, but work is being a ***** today).

Anyway, one way or the other we will get you fixed up soon!

[mulderfox]

sorry guys, I'm looking for a single line ticker. not a paragraph thingie.. I want to keep things at the site minimal. it would be a strip of news running on the top center of the page.

thanks for the effort and future efforts as well :)

[BLiZZaRD]

But you mentioned "images" is this an issue or is it not? Kind of important in the development :)