DHTML - Context Menu II

[Cheeko]

Hi, I found this script on dynamicdrive and I need some help editing it to fit my needs..

It is a custom context menu, and has things like refresh, view source etc on it. However, I want to add 3 or 4 links to the bottom of it, here is what I have so far:

In the Head tags:

<script type="text/javascript">
function locate()
{
location="http://www.dammit-uk.com/"
}
</script>


I took that from the w3 site, I need to edit so that I can send the url to the function and it changes the window location.

In the body tag:


<script language="JavaScript1.2">
<!--

var isie=0;
if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {
isie=1;
}
else {
isie=0;
}
if(isie) {
var html="";
html+='<TABLE STYLE="border:1pt solid #808080" BGCOLOR="#EEEEEE" WIDTH="140" HEIGHT="290" CELLPADDING="0" CELLSPACING="1">';
html+='<ST'+'YLE TYPE="text/css">\n';
html+='a:link {text-decoration:none;font-family:Verdana;font-size:10pt;}\n';
html+='a:visited {text-decoration:none;font-family:Verdana;font-size:10pt;}\n';
html+='td {font-size:8pt;}\n';
html+='</ST'+'YLE>\n';
html+='<SC'+'RIPT LANGUAGE="JavaScript">\n';
html+='\n<'+'!--\n';
html+='window.onerror=null;\n';
html+='/'+' -'+'->\n';
html+='</'+'SCRIPT>\n';
html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i0" ONMOUSEOVER="document.all.i0.style.background=\'#CFD6E8\';document.all.i0.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i0.style.background=\'#EEEEEE\';document.all.i0.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.history.go(-1);">&nbsp;<IMG SRC="menuback.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Back</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i1" ONMOUSEOVER="document.all.i1.style.background=\'#CFD6E8\';document.all.i1.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i1.style.background=\'#EEEEEE\';document.all.i1.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.history.go(1);">&nbsp;<IMG SRC="menuforward.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Forward</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i7" ONMOUSEOVER="document.all.i7.style.background=\'#CFD6E8\';document.all.i7.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i7.style.background=\'#EEEEEE\';document.all.i7.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.parent.location.href=window.parent.location.href;">&nbsp;<IMG SRC="menurefresh.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Refresh</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE"><IMG SRC="pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i4" ONMOUSEOVER="document.all.i4.style.background=\'#CFD6E8\';document.all.i4.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i4.style.background=\'#EEEEEE\';document.all.i4.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.parent.external.AddFavorite(window.top.location.href,window.top.document.title);">&nbsp;<IMG SRC="menufavorite.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Add to Favorites...</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i6" ONMOUSEOVER="document.all.i6.style.background=\'#CFD6E8\';document.all.i6.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i6.style.background=\'#EEEEEE\';document.all.i6.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.print();">&nbsp;<IMG SRC="menuprint.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Print</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i5" ONMOUSEOVER="document.all.i5.style.background=\'#CFD6E8\';document.all.i5.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i5.style.background=\'#EEEEEE\';document.all.i5.style.border=\'1pt solid #EEEEEE\';" ONCLICK="window.parent.location=\'view-source:\'+window.parent.location.href;">&nbsp;<IMG SRC="menusource.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;View Source</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i8" ONMOUSEOVER="document.all.i8.style.background=\'#CFD6E8\';document.all.i8.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i8.style.background=\'#EEEEEE\';document.all.i8.style.border=\'1pt solid #EEEEEE\';" ONCLICK="if(window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=1.6; else window.parent.document.body.style.zoom=1.6;">&nbsp;<IMG SRC="menuzoom.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Zoom In</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i9" ONMOUSEOVER="document.all.i9.style.background=\'#CFD6E8\';document.all.i9.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i9.style.background=\'#EEEEEE\';document.all.i9.style.border=\'1pt solid #EEEEEE\';" ONCLICK="if(window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=0.625; else window.parent.document.body.style.zoom=0.625;">&nbsp;<IMG SRC="menuzoom.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Zoom Out</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE"><IMG SRC="pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i10" ONMOUSEOVER="document.all.i10.style.background=\'#CFD6E8\';document.all.i10.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i10.style.background=\'#EEEEEE\';document.all.i10.style.border=\'1pt solid #EEEEEE\';" ONCLICK="locate();">&nbsp;<IMG SRC="menuzoom.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Dammit</TD></TR>';

html+='</TABLE>';

var oPopup = window.createPopup();

}

function dopopup(x,y) {
if(isie) {
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = html;
oPopup.show(x, y, 140, 290, document.body);
}
}

function click(e) {
if(isie) {
if(document.all) {
if(event.button==2||event.button==3) {
dopopup(event.x-1,event.y-1);
}
}
}
}

if(isie) {
document.oncontextmenu = function() { dopopup(event.x,event.y);return false; }
document.onmousedown = click;
}
// -->
</script>


So, can anyone help me with the locate() function?
At the moment it doesnt work, and I cant read the error as the browser freezes as it loads up :(
I need to have a function that you can call like so:
locate(http://www.whereever.com); and that will redirect the page to that url.
Any idea's why it isnt working?

Cheers

[Cheeko]

No, it doesnt seem to be working.. I get an error still but I cant see what the error is as IE freezes.
http://www.dammit-uk.com/test.html is the page. All I want is three links at the bottom of the context menu.

However, <a href="blah.org"> doesnt work, nothing happens and trying to change the window location is freezing the browser :(

Anyone give me some working script?

btw - I mean in the body tag as in it is the first code after the <body> tag and the other code is after the <head> tags.

[ZanM]

i think you are over doing it with the script... instead of doing the innerHtml bit try going with an already existing table and just postion and show it on the contextMenu event i.e. set the disply to none whe its hidden so it doesn't use space on your page and then when you want to see it set the display to inline and also i would sugest just putting an <a href=""> around your img that way you don't need to script it and the browser will handle it you can hide the border of the link easy msdn.microsoft.com has some good stuff on this kind of thing if you look around

http://msdn.microsoft.com/downloads/samples/internet/default.asp?frame=true

look at demo it shows how to use display and visibility then you just need the z-index to be topmost

i don't have time right now to write an example of one but check out planet-sourc-code.com the have quite a few

[scoutt]

it was having a invalid character ' in the mouseover lines.

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i0" ONMOUSEOVER="document.all.i0.style.background'#CFD6E8';document.all.i0.style.border='1pt solid #737B92';" ONMOUSEOUT="document.all.i0.style.background='#EEEEEE';document.all.i0.style.border='1pt solid #EEEEEE';" ONCLICK="window.history.go(-1);"> <IMG SRC="menuback.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle"> Back</TD></TR>';

all the lines tha tare like that it didn't like. so look for the red marks.
and I didn't get an error, but then again I didn't get any menu.

[ZanM]

yeah i saw that wierdness in the html+= you have going thats why i think you woud be better off with a preexisting table instead of the innerHtml much simpiar all around

[progressive]

html+='<TR><TD STYLE="border:1pt solid #EEEEEE" ID="i0" ONMOUSEOVER="document.all.i0.style.background'#CFD6E8';document.all.i0.style.border='1pt solid #737B92';" ONMOUSEOUT="document.all.i0.style.background='#EEEEEE';document.all.i0.style.border='1pt solid #EEEEEE';" ONCLICK="window.history.go(-1);"> <IMG SRC="menuback.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle"> Back</TD></TR>';