JavaScript Menu in a PHP Script

[THW]

I'm Not quite sure what Forum to post this in as it is both Javascript and PHP, And the problem is probably a bit of both, so hoping someone can help me.

Basicly the problem is this:

I Run a football website and to make it easier for my readers to find info about a player i had it so each time a player was mentioned it was made a link automaticly using php, Easy done and worked ok, But im trying to improve it a bit, So instead of just a wee link, when you click a persons name it comes up one of they Javascript menus with links so the reader can chose to go to his profile, Stats, Photos etc... I have it sort of working, However when more than one player is mentioned all the links go to the same player and also the positioning of the link isn't very good, it wont fit nearly in with the rest of the story and ive had to add spaces to stop it over lapping, You can see what i mean on www.theharrywraggs.com.

Anyway, Here is the section of code, If anyone can help me, i would be most grateful!

Craig

//Drop down menu link- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com
//Credit MUST stay intact for use

<?
$query7 = "SELECT id,name FROM thw_profiles";
$result7 = mysql_db_query($db,$query7,$connect);
while(list($pid,$pname)=mysql_fetch_row($result7))
{
$new_text = preg_replace("/$pname/","
<script language=\"JavaScript1.2\">

var menu1=new Array()
menu1[0]='<a href=?pageview=profile&playerid=$pid >Player Profile</a><br>'
menu1[1]='<a href=?pageview=Player+Stats&playerid=$pid>Stats</a><br>'
menu1[2]='<a href=/Gallery>Photos</a><br>'

</script>

<script language=\"JavaScript1.2\">
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf(\"Opera\")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?\"hide\" : \"hidden\"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18

hiddenconst=(ns6||ie4)? \"hidden\" : \"hide\"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? \"visible\" : \"show\"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility=\"hidden\"
else if (ns4)
themenu.visibility=\"hide\"
}

if (ie4||ns6)
document.onclick=hidemenu

</script>
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick=\"dropit(event, 'dropmenu0');event.cancelBubble=true;return false\">


<a href=\"?pageview=profile&playerid=$pid\" onClick=\"if(ns4) return dropit(event, 'document.dropmenu0')\">$pname</a></b></font>
</span></div></layer></ilayer>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",$new_text);
}
?>

[sad69]

I don't know that we're seeing enough code, but it looks like it's overwriting the same Javascript code each time through.

I can't see enough of the code. I also can't see when the menu1 array becomes used in your code, but I'm pretty sure if you called it menu$pid it would make that unique. You basically want to make sure that you're not using any Javascript variables that will overwrite eachother, but you've gotta keep it consistent.

PHP Code:

 var menu$pid=new Array()
 menu$pid[0]='<a href=?pageview=profile&playerid=$pid >Player Profile</a><br>'
 menu$pid[1]='<a href=?pageview=Player+Stats&playerid=$pid>Stats</a><br>'
 menu$pid[2]=<a href=/Gallery>Photos</a><br> 


There's probably other instances like dropdown0. Take a look at your code more deeply and look at where these things get used and you'll fix it up. You're pretty close though!

Good luck,
Sadiq.

[THW]

Many thaks for taking the time out to help, I have tried what you said but it now doesn't display at all, There is alot more HTML and other PHP in it but i have taken them out as they dont have anything to do with this bit of the script,

<style>
<!--
.wrap1{
position:relative;
}
.wrap2{
position:absolute;
}
#dropmenu0, #dropmenu1{
z-index:100;
}
-->
</style>


<script language="JavaScript1.2">
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18

hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}

function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}

if (ie4||ns6)
document.onclick=hidemenu

</script>

<?php
$query7 = "SELECT id,name FROM thw_profiles";
$result7 = mysql_db_query($db,$query7,$connect);
while(list($pid,$pname)=mysql_fetch_row($result7)) 
{
$new_text = preg_replace("/$pname/","<script language=\"JavaScript1.2\">
var menu$pid=new Array()
menu$pid[0]='<a href=test.htm>$pname Profile<br></a><br>'
menu$pid[1]='<a href=test.htm>$pid</a><br>'
menu$pid[2]='<a href=test.htm>$pid</a><br>'
</script><ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick=\"dropit(event, 'dropmenu0');event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(ns4) return dropit(event, 'document.dropmenu0')\">$pname - $pid</a></b></font>
</span>
</div>
</layer>
</ilayer><br>
",$new_text); ?>

<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu<? echo $pid; ?>[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<?
}
?>

<?
echo "$new_text";
?>

[sad69]

You're not providing enough code for anyone to help you.

I'm not familiar with the DynamicDrive script you're using (and I can't seem to find it on their website either..) to help you change it to work for what you're trying to do.

If you can provide a link to the original script maybe I'll get a better picture and be able to help you better.

But right off the bat, I can see from your new post that there's a DIV with the ID of dropmenu0. So there's only 1 DIV called dropmenu0 which will be shown everytime dropit(event, 'dropmenu0') is called (which is like everywhere).

You've also moved a lot of code outside of the while loop. You should be keeping it inside of the while loop as you want to create a new menu for each player. I would think that you would create a new DIV for each player calling it dropmenu$pid, so this should be inside the while loop. You'll also have to set the style attribute as you style sheet above won't affect dropmenu2 and above.

I hope I'm making sense.. try that and let us know what happens. Also, be sure to post the DynamicDrive script if you're still having trouble as well as your while loop.

Good luck,
Sadiq.

[THW]

Thanks again for your Reply, I probably am doing it totally wrong so I have attached my original code and the link to the Dynamic Drive Script, I have probably added it totally wrong http://www.dynamicdrive.com/dynamici...pmenuindex.htm

Basicly what i am trying to do it make it for each player that appears in a news story, for it to have that menu with a link to their profile, stats etc etc, At the moment (ive put the old code back) you can see on www.theharrywraggs.com that the links just go to the profile. Hope you get what i mean.

<?
$query2 = "SELECT id FROM thw_previews ORDER BY id DESC LIMIT 0,1";
$result2 = mysql_db_query($db,$query2,$connect);
list($id2)=mysql_fetch_row($result2);
$query3 = "SELECT * FROM thw_homepage ORDER BY id DESC LIMIT 0,1";
$result3 = mysql_db_query($db,$query3,$connect);
list($id,$lastmatch,$nextmatch,$lastteam,$nextteam,$photo1,$photo2)=mysql_fetch_row($result3);

?>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#CC0000" width="100%" id="AutoNumber1" bgcolor="#E9E9E9">
  <tr>
    <td width="100%">
    <p align="center"><font color="#cc0000"><i><b>Theharrywraggs.com</b></i></font><b>... 
    Bringing you all the latest Partick Thistle news and views to you daily, 
    only on your number one Partick Thistle website.</b><br><center><a href="http://www.mccreafs.co.uk/">Sponsored by McCrea Financial Services</a></center>
</td>
  </tr>
</table>
<?
$query4 = "SELECT * FROM thw_news ORDER by id DESC LIMIT 0,2";
$result4 = mysql_db_query($db,$query4,$connect);
while(list($nid,$author,$headline,$storydate,$story,$newsphoto,$link)=mysql_fetch_row($result4))
{
echo "
<table cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" style=\"border-collapse: collapse\" bordercolor=\"#111111\" width=\"173\">
<tr>
<td height=\"5\" width=\"661\">
</td>
</tr>
<tr>
<td height=\"5\" width=\"661\">
<img src=images/latest-headlines.gif align=\"bottom\" border=\"0\">

</td>
</tr>
<tr>
<td vAlign=\"top\" bgColor=\"#eeeeee\" height=\"125\" width=\"661\">
<table cellSpacing=\"5\" cellPadding=\"0\" width=\"100%\" border=\"0\">
<tr>
<td>
<img alt=\"\" hspace=\"4\" src=$newsphoto align=\"left\" border=\"1\"width=\"74\" height=\"113\"><i><font size=\"1\">$storydate</font></i><br><b><a href=\"?pageview=newspage&n=$nid\"><font size=\"2\">$headline</font></a></b><br>

"; ?>
<?
$new_text = substr($story,0,300) ; ?>
<? $new_text = nl2br($new_text); ?>
<? $new_text = preg_replace("/THW/","<font color=\"#CC0000\"><b><i>THW</b></i></font>",$new_text); ?>
<?php
$query7 = "SELECT id,name FROM thw_profiles";
$result7 = mysql_db_query($db,$query7,$connect);
while(list($pid,$pname)=mysql_fetch_row($result7)) 
{
$new_text = preg_replace("/$pname/","<a href=\"?pageview=profile&playerid=$pid\">$pname</a>",$new_text);
}
?>

<?
echo "$new_text";
?>
<?
If ($link=='NO')
{
echo" ";
}
else
{
echo"...<a href=\"?pageview=newspage&n=$nid\"><b>More</b></a>";
}
echo "</td>
</tr>";
}
?>
<tr>
<td bgcolor="#CC0000">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="60%" align="center"><b><font size="2" color="#FFCC00">More 
    Headlines</font></b></td>
    <td width="40%" align="center"><b><font size="2" color="#FFCC00">Match 
    Reports</font></b></td>
  </tr>
</table></td>
</tr>
<tr>

<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="60%"> <ul>
<?
$query5 = "SELECT * FROM thw_news ORDER by id DESC LIMIT 2,5";
$result5 = mysql_db_query($db,$query5,$connect);
While(list($nid2,$author2,$headline2,$storydate2,$story2,$newsphoto2)=mysql_fetch_row($result5))
{
echo "<li><a href=\"?pageview=newspage&n=$nid2\"><font size=\"1\" face=\"Verdana\">$headline2</font></a></li>";
}
?>
<br><b><a href="?pageview=News">...News Archive</a></b>
</ul>
 </td>
<td width="40%">
<ul>

<?
$query = "SELECT id,UNIX_TIMESTAMP(date), Opposition FROM thw_games ORDER by id DESC LIMIT 0,5";
$result = mysql_db_query($db,$query,$connect);
while(list($r,$date2,$opposition)=mysql_fetch_row($result))
{
$date = date("d F",$date2);
echo "<li>
<a href=\"?pageview=Match+Report&r=$r\"><font size=\"1\" face=\"Verdana\">
      $opposition</font></a><font size=\"1\" face=\"Verdana\">- $date</font>";
}
?>
   </li>
<br><b><a href="?pageview=Match+Reports">...More Reports</a></b>
    </ul>

    </td>
  </tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<?
echo "
<td width=\"661\">
<img alt=\"header\" src=images/more-features.gif border=\"0\" align=\"bottom\"></td>
</tr>
<tr>
<td vAlign=\"top\" bgColor=\"#eeeeee\" height=\"77\" width=\"661\">
<table cellSpacing=\"5\" cellPadding=\"0\" width=\"100%\" border=\"0\" height=\"72\">
<tr>
<td class=\"main\" height=\"67\"> ";?>

<?
$query5 = "SELECT * FROM thw_features ORDER by id DESC";
$result5 = mysql_db_query($db,$query5,$connect);
while(list($featureid,$author2,$featuretitle,$featuredate,$feature,$featurephoto)=mysql_fetch_row($result5))
{
echo"
$featuredate - <a href=\"?pageview=feature&featureid=$featureid\">$featuretitle </a><br>";
} 
?></td>
</tr>
</table>
</table>
</td>
</tr>
<tr>
<td bgColor="#cc0000" height="10" width="661">
<img src="images/blank.gif" width="1" height="1"></td>
</tr>
<tr>
</table>

</center>
</div>

</body>

</html>