Forum Moderators: open

Message Too Old, No Replies

Problem with main page when using window.open

         

Kaliedra

3:18 pm on Feb 12, 2005 (gmt 0)

10+ Year Member



I am using the following code to show thumbnails of pictures on a page. The viewer can then obviously click the thumbnail to view the photo full size as a pop up. My problem is that every time a pop up opens the main page returns to the top. I'd like to have it stay where it in as I anticipate having quite a few pictures and having to scroll back down is quite a nuisance. Any suggestions for me here? Thanks

<TR>
<td align = "center" bgcolor="white" width="1%" height="168"><font face="Verdana, Arial, Helvetica" size="2">
<A HREF= "#" onClick="window.open('photos/SandyR_Geodesign.jpg','Photo0','toolbar=no, width=420, height=331, left=100, top=100, screenX=200, screenY=200, status=no, scrollbars=yes, resize=yes');return false">
<IMG src=photos/SandyR_Geodesign.jpg border="1" width = "200" hight = "200"></a></font></td>
<td bgcolor="white" width="20%" height="168"><font face="Verdana, Arial, Helvetica" size="2" width = "20%">
Geometric Design By Sandy R</a></font></td>
td align = "center" bgcolor="white" width="34%" height="168"><font face="Verdana, Arial, Helvetica" size="2">
<A HREF= "#" onClick="window.open('photos/JoyceW_Ornament.jpg','Photo1','toolbar=no, width=600, height=400, left=100, top=100, screenX=100, screenY=100, status=no, scrollbars=yes, resize=yes');return false">
<IMG src=photos/JoyceW_Ornament.jpg border="1" width = "109" hight = "100" height="162"></a></font></td>
<td bgcolor="white" width="77%" height="168"><font face="Verdana, Arial, Helvetica" size="2" width = "20%">
Ornament By Joyce W </a></font></td>
</TR>

The code repeats as needed for additional photos and this is where the problem is. If you scroll down to the additional photos the clicking the popup returns you to the top so I need some kind of anchor to hold the scroll bars.

Bernard Marx

3:50 pm on Feb 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In my test, the page doesn't do that. I didn't expect it to.
To prevent this behaviour, we need to return false from the onclick handler, which stops the # href being followed. You are already doing this..

onclick = "window.open(....);return false;"

Can I suggest that you support JS-disabled browsers by a quick swap around?


<!-- currently -->
<a href="#" onclick="window.open('image_url.jpg','photo1','_specs...');return false;">

<!-- support non-JS browsers -->
<a href="image_url.jpg" onclick="window.open(this.href,'photo1','_specs...');return false;">

Kaliedra

9:04 pm on Feb 12, 2005 (gmt 0)

10+ Year Member



That was my understanding of how it would work as well with the anchors. When I preview it in the browser on my computer it works fine. The minute I upload it to the webspace is when the problem happens. In fact now that I am watching what is happening in the background is looks as though the page is reloading. Perhaps I need to look for new webspace. I am usinging geocities for now to preview it to members of my guild. They haven't made a decision yet as to what they want to do about web space.

rocknbil

9:37 pm on Feb 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you absolutely can't get rid of it, you could also anchor the link to the current location:

<a name="where_i_am_now"></a>
<a href="#where_i_am_now" onClick=" .....>

Bernard Marx

10:07 pm on Feb 12, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm. Strange behaviour.

I tried it out on my old Geocities account, and it confirms what you say. Yahoo must be doing something - quite what, I don't know.

One solution that seems to work is to replace

[color=brown]"#"[/color]
in the href
with
[color=brown]"javascript: void(0)"[/color]

This doesn't fit in with the non-JS support suggestion, but that seems to have been 'broken' by Yahoo (naughty).

Kaliedra

4:59 am on Feb 13, 2005 (gmt 0)

10+ Year Member



Oh the javascript: void(0) does seem to fix the problem. Excellent! Thank you all for you help with this.