mulderfox
02-28-2007, 09:57 AM
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> <input type="text" size="5" maxlength="5" name="txtMarqueeWidth" id="txtMarqueeWidth" value="600"> px
<b>Height:</b> <input type="text" size="5" maxlength="5" name="txtMarqueeHeight" id="txtMarqueeHeight" value="40"> px
<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;color:purple;">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;color:purple;\">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>
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> <input type="text" size="5" maxlength="5" name="txtMarqueeWidth" id="txtMarqueeWidth" value="600"> px
<b>Height:</b> <input type="text" size="5" maxlength="5" name="txtMarqueeHeight" id="txtMarqueeHeight" value="40"> px
<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;color:purple;">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;color:purple;\">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>