PDA

View Full Version : Looking to add direction control to a marquee javascript



mulderfox
06-18-2007, 08:00 AM
Hello!

I would like to add direction control (mostly right/left) to the following marquee script (standard Cross browser Marquee script from the mothersite of this forum). also, as I use hebrew text in the script, when I add numbers or numbers with dashes, it sometimes "screw" with the scroller. (it gets cut off in the middle and re-appears in another side of the line) Help about this would be great too :)



<div id="tnMarqueeDiv" style="display:none">
<b>Width:</b>&nbsp; <input type="text" size="5" maxlength="5" name="txtMarqueeWidth" id="txtMarqueeWidth" value="550"> px&nbsp;&nbsp;
<b>Height:</b> <input type="text" size="5" maxlength="5" name="txtMarqueeHeight" id="txtMarqueeHeight" value="55"> 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-family:arial;font-weight:bold;font-size:18pt;color:black;"> texttext <a href="http://www.site.com">website</a> </span> <img src="/_layouts/images/pic.png" width="50" height="50" /> <span style="font-family:tahoma;font-weight:bold;font-size:12pt;color:red;"> </span></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="550";
//Specify the marquee's height
var marqueeheight="55";
//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-family:arial;font-weight:bold;font-size:18pt;color:black;\">שבוע טוב לכולם! <a href=\"http://www.berghuis.co.nz/abiator/games/gamesindex.html\">ובשביל הכיף</a> </span> <img src=\"/_layouts/images/board-games.png\" width=\"50\" height=\"50\" /> <span style=\"font-family:tahoma;font-weight:bold;font-size:12pt;color:red;\"> </span></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>