PDA

View Full Version : 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:
<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
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:


AddType application/x-httpd-php .html

Or for .htm


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/dynamicindex2/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 (http://www.expertsrt.com/tutorials/Rod/JSread.php)

tech_support
11-28-2006, 07:15 AM
Hmm... ok. Here's the 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>

taydu
11-28-2006, 08:21 AM
thanks for all replies, but i get an error with this line


ajaxRequest.open("GET", url, true);


Permission denied

taydu
11-29-2006, 01:58 AM
tech_support,

thanks for the code it work, but for some reason the scroller doesn't behave. the scroller doesn't goes all the way before it scroll again (i.e. when the beginning of the sentence reach the left side it end and start again from the left.) This left the part of the sentence un-scroll.

How to fix this ???

tech_support
11-29-2006, 06:35 AM
Permission denied

That's because there's ajax in the code. To run it, you'll need a web server to do this.



thanks for the code it work, but for some reason the scroller doesn't behave. the scroller doesn't goes all the way before it scroll again (i.e. when the beginning of the sentence reach the left side it end and start again from the left.) This left the part of the sentence un-scroll.

Hmm... I'm going to work on that.

taydu
11-29-2006, 05:24 PM
thanks you, looking forward for the scrolling fix

taydu
12-03-2006, 07:31 AM
any update professor? I don't want to sound rush but I need this script badly. Your help is greatly appriciate.

Thanks

jscheuer1
12-13-2006, 11:22 PM
thanks you, looking forward for the scrolling fix

That's probably a layout problem. Remove all <center> tags and all attributes like align="center", and remove all styles 'text-align:center;' that are used with or are the marquee's parent or ancestor element(s). To center, use a valid DOCTYPE, set the width of the element and use this style:

margin:0 auto;

tech_support
12-14-2006, 06:17 AM
Thanks jschuer1 for answering that question. Had internet problems for the past week (upgrading to ADSL2++)!