Why doesn't this window.open() work in my function. - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Why doesn't this window.open() work in my function.

Window.open works in onClick but not in head function referenced by onClick

Baxter30

8:51 pm on Jan 2, 2009 (gmt 0)

10+ Year Member

I'm trying to create two links that will open a window to view a photo in. I wanted the first link clicked to open a window named pan and the second link to open into the same new window, pan, to reduce clutter on the page. So the first thing I did was wrote it into the onclick itself.

<a href="../pics/pan1.jpg" onClick="window.open('pic.jpg','pan','toolbar=no,location=no,directories=no'); return false"><span style="font-size:10pt">(Click here to view in seperate window)</span></a>

This worked fine with one problem. When I click on the second link the focus does not shift to the window, it stays with the original. To solve this I tryed writing a function like this:

<script type="text/javascript">
function open(num) {
window.open('../pics/pan'+num+'.jpg','pan','toolbar=no,location=no,directories=no')
pan.focus()
}
</script>

Then referenced it in the onClick like this:

<a href="../pics/pan1.jpg" onClick="open('1'); return false"><span style="font-size:10pt">(Click here to view in seperate window)</span></a>

This went terribly wrong. Now when either link is clicked on the entire page turns white sometimes after freezing for several seconds. Help me

astupidname

11:21 pm on Jan 2, 2009 (gmt 0)

10+ Year Member

'open' is already a javascript method of both the window and document objects, don't use that name. Also, it is better to not hard code the url inside the function, as that limits the re-usability of the function. Also in this case could return false from the function and then return the function (which returns false) in the onclick (which should be lowercase - onclick). Try it like this:

<script type="text/javascript">
function MYopen(url,name) {
window.open(url,name,'toolbar=no,location=no,directories=no');
pan.focus();
return false;
}
</script>

<span style="font-size:10pt"><a href="../pics/pan1.jpg" onclick="return MYopen('../pics/pan1.jpg','pan');">(Click here to view in seperate window)</a></span>

An alternative to that onclick, since the path is the same as the link's href would be to use this.href:

<span style="font-size:10pt"><a href="../pics/pan1.jpg" onclick="return MYopen(this.href,'pan');">(Click here to view in seperate window)</a></span>

astupidname

11:31 pm on Jan 2, 2009 (gmt 0)

10+ Year Member

<script type="text/javascript">
function MYopen(url,name) {
window.open(url,name,'toolbar=no,location=no,directories=no');
pan.focus();
return false;
}
</script>

My bad, actually, that should be more like:

<script type="text/javascript">
var myWin;
function MYopen(url,name) {
myWin = window.open(url,name,'toolbar=no,location=no,directories=no');
myWin.focus();
return false;
}
</script>

Baxter30

10:24 pm on Jan 4, 2009 (gmt 0)

10+ Year Member

Wow this is so frustrating. It seems like your proposal should work perfectly. But for some reason it now tells me there is an error on line 24 character 1, and ignores the function all together returning the href. Heres how it was entered on the page:

<html>
<head>

<script type="text/script">
<!--
var part;

function picwin(url,name) {
part = window.open(url,name,'toolbar=no,location=no,directories=no, width=300, height=310');
part.focus();
return false;
}
-->
</script>
</head>

<body>
<table id="layout">
<tr>
<td><p class="bold">Type One Parts</p><img src="../pics/part1.jpg"><br />
<a href="../pics/part1.jpg" onclick="return picwin(this.href,'part')"><span style="font-size:10pt">(Click here to view in seperate window)</span></a></td>
<td><p class="bold">Type Two Parts</p><img src="../pics/part2.jpg"><br />
<a href="../pics/part2.jpg" onClick="return picwin(this.href,'part')"><span style="font-size:10pt">(Click here to view in seperate window)</span></a></td>
<td><p class="bold">Type Three Parts</p><img src="../pics/part3.jpg"><br />
<a href="../pics/part3.jpg" onClick="return picwin(this.href,'part')"><span style="font-size:10pt">(Click here to view in seperate window)</span></a></td>
</tr>
</table>
</body>
</html>

[edited by: tedster at 3:52 am (utc) on Jan. 5, 2009]
[edit reason] make link text generic [/edit]

astupidname

8:13 pm on Jan 5, 2009 (gmt 0)

10+ Year Member

<script type="text/script"> //<---- it's a script yeah, but what kind? (script should be javascript) this was the big problem
 //<---- That should look like: //--> //or take those html comments out altogether
</script>

Fotiman

1:17 am on Jan 6, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Just to clarify what astupidname was saying, it should be this:

<script type="text/javascript">

Also, you don't need the HTML comments  in your JavaScript. They are not needed, so just remove them altogether.

Baxter30

11:33 pm on Jan 9, 2009 (gmt 0)

10+ Year Member

oh, wow. I guess it was just a series of mistypes. Thanks for spotting the errors guys.