Javascript

[DanJericho]

I am working in a .js file, that I want to modify so that when I click on a link specified in the file, it will open in a new window. Currently, I've got it opening in the same window, but I want it in a new one. I know how to do it in HTML, but not sure about in javascript.
Thanks.

[namgor]

I just wrote it for you, am i nice?


function OpenWindow3 (Turl) {
window.open(Turl,'c','toolbar=no,menubar=no,location=no,heig ht=300,width=250,resizeable=false'); }



------------------
DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
UWSWA1season GP:9 G:12 A:8 Pts:20 GWG:3 +/-:-3

uwcdc.com (http://www.uwcdc.com) or namgor.com (http://www.namgor.com)

[DanJericho]

What is "Turl"?

[BigTitan]

Originally posted by DanJericho:
What is "Turl"?

"Turl" is a variable that will contain the URL you want to open.

When you call the function (from, say, a input button), you would call the Javascript function passing in the URL as the only arguement.

[reklis]

Originally posted by DanJericho:
What is "Turl"?

OpenWindow3("http://i.will.be.turl/");

------------------
Advocate of the Sharky (Ultra) High-Resolution Club [SHRC (http://www.sharkyforums.com/ubb/Forum17/HTML/005121.html)]
main(i){putchar(341513875>>(i-1)*5&31|!!(i<6)<<6)&&main(++i);}

[DanJericho]

I'll put the code I have below. I'm trying to modify a js file that my boss gave me to work on. He wants some of the links off of a menu (which this is the code for) to open in a new window. I can't seem to find where it calls the new page. We use another js file to add the links to the menu.
Thanks.

*****
if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";}

window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor = "#0073BD";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";

this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 1;
this.subMenuPaneBorder = 1;

this.subMenuPaneWidth = 150;

lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0;

HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
// if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td> ";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "| ";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "| \n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";

HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

function addSubItem(idParent, text, hint, location)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}

Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

function showMenu()
{
document.writeln(HTMLstr);
}

////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;

leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie) {
menu = eval(idMainMenu);
submenu = eval(idMainMenu+"submenu.style");
submenu.left = calculateSumOffset(menu, 'offsetLeft');
// submenu.top = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll();

leftX = document.all[idMainMenu+"submenu"].style.posLeft;
rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth;

leftY = document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight;
rightY = leftY;
}
lastMenu = submenu;
}

function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}

function updateIt(e)
{
if (ie)
{
var x = window.event.clientX;
var y = window.event.clientY;

if (x > rightX | | x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n)
{
var x = e.pageX;
var y = e.pageY;

if (x > rightX | | x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}

if (document.all)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
document.onmousedown=hideAll;
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=updateIt;
}

[namgor]

I dont see it either, could there be in another file?

------------------
DHAHL3seasons GP:73 G:121 A:55 Pts:176 GWG:12 +/-:184
UWSWA1season GP:9 G:12 A:8 Pts:20 GWG:3 +/-:-3

uwcdc.com (http://www.uwcdc.com) or namgor.com (http://www.namgor.com)

[Grizzly]

That looks like a Folder Navigation Tree-style menu system. Pretty cool. But all that JS file does is generate links for the Nav Tree. That particular NavTree code doesn't support targeting new windows, but you can work around it if you want.


There are two seperate functions in there that generate links:
addSubItem(idParent, text, hint, location)
and
addItem(idItem, text, hint, location, altLocation)

Wherever you're calling those functions from, you need to change what is being passed as "location". (see 4th parameter in above functions)

Currently, I'm sure you have location being passed links like "main.html", or "pages/aboutus.html" or whatever...

Now...you can try two things:
1) Try changing the location you're passing from "main.html" to "JavaScript: window.open(\'main.html\',\'\',\'\')"

(Note: I escaped the single quotes in that sting, since I believe that's the only way it will parse through that function properly. Not sure, try it as I have it above, and if that doesn't work, than remove the escapes and see if that works.)


I really have no idea what that's supposed to look like in the end, but if you're looking for a good "Windows Explorer Style" NavTree, you can check out one I use pretty often here:
http://grizz.dhs.org/NavTree/


That one has "targeting" support for your Nav links, so you can easily target "_blank" with your links.

Good luck with it, I'll keep checking back here to see how you make out http://www.sharkyforums.com/ubb/biggrin.gif

[Grizzly]

I ran some test to make sure if I gave you good advice or not, and you will indeed have to make a couple small edits to that .js file if you want this to work, with my
JavaScript: window.open(\'main.html\',\'\',\'\')"

...method above.


The changes you need to make are the following.

On line 84, make it say:
MENUitem += "href=\""+location+"\"' ";

On line 90, make it say:
MENUitem += "href=\""+altLocation+"\" ";

On line 146, make it say:
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href=\""+location+"\"'>"+text+"</a><br></td></tr>\n";

On line 147, make it say:
if (ie) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href=\""+location+"\">"+text+"</a><br></td></tr>\n";


Or...if you're don't feel like doing all that stuff above, I took the liberty of doing it for you. You can download the modified version of your JS file here:
http://grizz.dhs.org/edit.js


Note: This new JS file should be able to seamlessly replace the old one.

The only difference is it's now using double quotes with the href="" tag instead of single quotes. This will allow you to use the window.open function in the href="" tag.

Good luck buddy.

[DanJericho]

Okay, I've got it opening in a new window now, which is great, but there's still a little problem.

After the new page is opened, the original page goes to a blank white page that says "[Object]" in the upper left and the title is " javascript: window.open('construction.htm',",") ". However, the address is still the origional page's address. If I hit refresh, that window goes to what the new one is, and if I hit Back, then I go back to to origional page.

Any ideas?
Thanks a lot for your help so far.

[Grizzly]

Ahhh I see. Easy fix. I never knew this, but the open.window function, when used in the raw, returns an object. That's why you're seeing what you're seeing. I've always created my own pop-up functions to suit my needs, and here's one which should work for for you. You can toss this in the head of your document, OR, you can just paste it into your .js file (Remember to remove the <SCRIPT> tags if you place it in the .js file)

Use this funciton to open windows now:

<SCRIPT Language="JavaScript">
function openWindow(href){ window.open(href,'','') }
</SCRIPT>



So now, when you're passing "location" to your NavTree function, simply call it like this:
javascript: openWindow(\'construction.htm\')



[This message has been edited by Grizzly (edited July 12, 2001).]

[DanJericho]

Thank you!

It works perfectly.