PHP and Javascript integration

Question

I would like to use the following script to display dynamic breaking news on the home page of my site, this dynamic code is run via mysql

<script language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth="780px"
//Specify the marquee's height
var marqueeheight="50px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//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><font face="Arial"><h3>Example Scrolling Breaking News</h3></font></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>')
}
}
</script>

However when i try to put my php code in and it doesn't work. Ok some of you will say that PHP and Javascript are not compatible, but i'm interested in either a direct solution or a work around.

Or if you can get javascript to access mysql database even better (not too sure on that)

Is there any chance that one of you can find some way of putting php into this var marqueecontent='<nobr><font face="Arial"><h3>PHP HERE</h3></font></nobr>' because if tried all different types of this and none of them work with my mootols version and even mootools ones dont work.

Any help would be greatly and warmly welcomed.

Thanks

UPDATE

I have tried echoing inside the javascipt and it is just blank, the one thing as you have said i haven't tried using php to echo the whole javascript

Answer 1

Your own solution isn't very clean, and it has several bugs. You should do this instead:

<?php
  $newsContent = '';
  while ($row = mysql_fetch_assoc($query))
  {
    if ($newsContent != '')
      $newsContent .= ', ';
    $newsContent .= htmlspecialchars($row['news_content']);
  }
?>
<script language="JavaScript1.2">

var marqueewidth="780px"
var marqueeheight="50px"
var marqueespeed=2
var marqueebgcolor=""
var pauseit=1

//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):'

var marqueecontent='<nobr><font face="Arial"><h3><?php echo addslashes($newsContent); ?></h3></font></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
...

Answer 2

Thank you for your helpful comments as a result this is the solution i have found myself:

Using php to echo the javascript:

<?php  echo'<script language="JavaScript1.2">


var marqueewidth="780px"

var marqueeheight="50px"

var marqueespeed=2

var marqueebgcolor=""

var pauseit=1

//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):'

?>

var marqueecontent='<nobr><font face="Arial"><h3><?php while($row = mysql_fetch_assoc($query)){ echo $row['news_content'];}?></h3></font></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>')
}
}
</script>

Thanks Again!!

Answer 3

Using your example: marqueecontent='<nobr><font face="Arial"><h3>PHP HERE</h3></font></nobr>' it should look something like this

marqueecontent='<nobr><font face="Arial"><h3><?php echo "Hello From PHP"; ?></h3></font></nobr>'

Keep in mind that for PHP to pass any data o JavaScipr it must be echoed from PHP.