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

"PHP and Java are not compatible". Java to Javascript is like Ham to Hamster. — Mārtiņš Briedis
– Mārtiņš Briedis, Commented Nov 11, 2011 at 22:18
Where's the PHP code? You can easily have PHP generate JavaScript, but not the other way around. If you just want to have different content in the JavaScript variable, just have PHP echo to it what you want. You'll have to show what you've tried and what you want the end result to be before anyone can help you. — JJJ
– JJJ, Commented Nov 11, 2011 at 22:27
Where did you put the php code? remember that php is serverside, and javascripts is browser/clientside — Puggan Se
– Puggan Se, Commented Nov 11, 2011 at 22:30
"I have tried echoing inside the javascipt and it is just blank" -- show the code, there's something wrong with the echo statement. — JJJ
– JJJ, Commented Nov 11, 2011 at 22:37

Abhi Beckert · Accepted Answer · 2011-11-12 23:37:33Z

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////////////
...

answered Nov 12, 2011 at 23:37

Abhi Beckert

33.5k12 gold badges89 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tarek Fadel · Accepted Answer · 2011-11-11 22:42:50Z

0

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.

answered Nov 11, 2011 at 22:42

Tarek Fadel

1,9931 gold badge15 silver badges22 bronze badges

Comments

David Passmore · Accepted Answer · 2011-11-12 23:28:07Z

0

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!!

answered Nov 12, 2011 at 23:28

David Passmore

6,0894 gold badges48 silver badges71 bronze badges

3 Comments

Abhi Beckert Over a year ago

There is no need to place all your javascript in an echo statement, that will only lead to bugs. And you need to use addslashes() on your output, as per the instructions: "backslash any single quotations". See my answer for how it should be done.

Yzmir Ramirez Over a year ago

Noticed you're using the attribute language="JavaScript1.2", this isn't 1997 anymore when browsers didn't support certain versions of Javascript. Use <script type="text/javascript">. Also don't use addslashes() to escape your database variables, use mysql_real_escape_string()

David Passmore Over a year ago

That doesn't matter the main this is it works ok thanks for you comments but this works for me

Collectives™ on Stack Overflow

PHP and Javascript integration

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related