cross browser marquee

**taydu** · 11-28-2006, 05:36 AM

1) Script Title: cross browser marquee

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

3) Describe problem: how do i modify so I can use an external source (html, txt file) to control the content of the marquee?

Thanks

**codeexploiter** · 11-28-2006, 06:18 AM

I don't think it is possible to read .htm(l) or a .txt file using Javascript but you can do it using an XML file though.

**djr33** · 11-28-2006, 06:23 AM

The javascript line that sets the value of the variable to be displayed is here:

var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'

To use the content of an outside file, you would need to replace that line with the contents of the outside file.

There are several options for doing this--

A serverside option, such as PHP, offers a great solution if you have it installed on your server and don't need it to work live (PHP only works upon each reload, unlike javascript, that can occur while the page is sitting there, without refreshing). In this case, I think loading the content into the script when it's sent from the server (and processed by PHP) would be fine.

Here's how you could do that:

PHP Code:


<script....>
....
var marqueecontent='<nobr><?php echo file_get_contents('file.txt'); ?></nobr>'
....
?>

'file.txt' is the relative path in the directory to your file. Note that files on other servers can work as well, but also have a few restrictions, but you probably don't need that for this purpose.

To use PHP, you must have it installed on your server, and you must have the file extension of the page be .php not .htm/.html

Alternatively, you could use javascript, but that is a little more complex, and might not be as compatible as the rest of the script, due to the complexity of getting another file... I'm not really sure how to do it myself, but someone else can help if you need that instead.

**codeexploiter** · 11-28-2006, 06:30 AM

Originally Posted by djr33

To use PHP, you must have it installed on your server, and you must have the file extension of the page be .php not .htm/.html

You can execute PHP scripts in .htm or .html files by modifying your .htaccess file. This file may be hidden, so depending upon your FTP program you may have to modify some settings to see it. Then you just need to add this line for .html:

Code:

AddType application/x-httpd-php .html

Or for .htm

Code:

 AddType application/x-httpd-php .htm

**taydu** · 11-28-2006, 06:35 AM

thanks for the quick replies, how about ajax like the one here, but horizontal scrolling ???

http://www.dynamicdrive.com/dynamici...ajaxticker.htm

**codeexploiter** · 11-28-2006, 06:38 AM

This particular thing can be solved without much difficulty using PHP or any other server side code (only a bit) as suggested by djr33.

I think using Ajax too you can do that. If you want to do it using JavaScript

**taydu** · 11-28-2006, 06:41 AM

can you give some sameple code ??

**codeexploiter** · 11-28-2006, 06:58 AM

Check this one

**tech_support** · 11-28-2006, 07:15 AM

Hmm... ok. Here's the code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<script language="JavaScript1.2">

/*
Cross browser Marquee script- &#169; 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

Modified by Peter - DD User: tech_support
Visit: www.dynamicdrive.com/forums
*/

//Specify the marquee's width (in pixels)
var marqueewidth="300px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
//Page URL
var page = "external.html"
//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></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="<nobr>"+document.getElementById('ajax').innerHTML+"</nobr>"
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=function() {populate();getExternalUrl(page)}

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>')
}
}

function getExternalUrl(url)	{

	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			document.getElementById('ajax').innerHTML = ajaxRequest.responseText;
			cross_marquee.innerHTML="<nobr>"+document.getElementById('ajax').innerHTML+"</nobr>"
		}
	}
	ajaxRequest.open("GET", url, true);
	ajaxRequest.send(null); 
}

</script>
<div id="ajax" style="display:none"></div>
</body>
</html>