Welcome to WebmasterWorld Guest from 3.81.29.226

Forum Moderators: open

Message Too Old, No Replies

IE7 Error for popup window

Works okay in Firefox

     
6:24 pm on Mar 17, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


I have the following code embedded into the description of an item on an ASP.NET generated web commerce page.


<a href="#" onclick="window.open('../picture.jpg','width=420','height=420'); return true" style="color: red">Link Text</a>

In Firefox 7.3.1.3, it produces the desired result, a new browser window 420 x 420 pixels containing the picture.

In IE 7.0 however, it instead reloads the original page. IE also shows the following error message for the linking line:


line: 267
char: 1
error: Invalid argument
code: 0
URL: http://www.example.com/et_inq_item11.asp?item_id={long string of characters}

Any ideas what is happening here? Is there a workaround? I can't employ a more robust javascript solution because I don't have access to the underlying code. Thanks.

Addendum: I said above that IE reloads the page. I believe this is not actually correct. After looking at both the Firefox and IE version some more, it seems that the original page is scrolling back to the top of the content pane. Firefox loads the popup window on top of the original page but IE does not load the popup window. And yes, I've made sure the popup blocker is turned off.

[edited by: tedster at 8:07 pm (utc) on Mar. 17, 2009]
[edit reason] switch to example.com - it can never be owned [/edit]

7:42 pm on Mar 17, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


return false, not true.
7:55 pm on Mar 17, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Thanks for the reply, swa66, but it still does not work in IE - same result.
8:39 pm on Mar 17, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


<a href="#" onclick="window.open('../picture.jpg','width=420','height=420'); return true" style="color: red">Link Text</a>

This is malformed Javascript, and FF is probably ignoring your width and height. the window parameters are url, windowName/ID, window attributes. Try

<a href="#" onclick="window.open('../picture.jpg','abc','width=420,height=420'); return false" style="color: red">Link Text</a>

But this is still cumbersome and clogs up your code; better yet, make it an external function. "Window Name" is an important parameter - if you just use some arbitrary name once the new window has been opened, if the user clicks back to the main window and opens a new link, this a)places the pop up BEHIND the main window, and b) opens the new content in the same-named window, giving the impression that . . .

Your site is broken, your links don't work. :-)

The following sets a unique ID on each window based on time so they always open in a new window:

<a href="../picture.jpg" onclick="return myWin('../picture.jpg',420,420);" style="color: red">Link Text</a>


<script type="text/javascript">
// Notice we pass the url, width and height from the link
function myWin (url,w,h) {
var day = new Date();
var id = day.getTime();
// Add a little padding for the window
var wid = w+75;
var ht = h+125;
var params = 'width='+wid+',height='+ht+',scrollbars,resizable';
var win = open(url,id,params);
return false;
}
</script>

A number of advantages here:

- simplifies your links.

- notice in my version of the link, I have the href pointing to the image. If Javascript is enabled, return false tells the browser to ignore the link, so the page doesn't navigate to the image. However, if Javascript is disabled, it will go to the image instead of the top of the page (#), providing accessibility to all.

- always, always include at LEAST resizable, and you should include scrollbars as well, as shown. Although it's "perfect" in your browser, it's impossible to know every potential environment. There's nothing more annoying than not being able to scroll to see all the content; this insures they can do that.

9:28 pm on Mar 17, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Thanks rocknbil, that was the key. Just goes to show you should never completely trust what you find on the internet - this site excepted ;)

As far as the pop under aspect, you're right. In fact, I found myself cussing at a website that did that to me just today. Your better solution is a lot of code to be included in the product descriptions, and I am not the only person updating them, so I am not sure I want to implement it. I will study it further. Thanks.

11:18 pm on Mar 17, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


actually instead of opening lots of windows, you can also give the window that ended up not being at the top any longer focus to bring it back to the top:


<script language="javascript" type="text/JavaScript">
<!--
var slide = null;
function startSlide() {
slide=window.open("","example",'width=400,height=400,resizable=0');
slide.rootWin = self;
slide.focus();
slide.location = "http://www.example.com/file.html";
return false;
}
// -->
</script>

and then in the html:

<a href="no-javascript-needed.html" onclick="return startSlide()">example</a>

I'm sure it can be improved. My javascript is rusty at the very best, e.g. I've completely forgotten why the "

slide.rootWin = self;
" is there, and it for sure won't handle resizing the window should it already exist.
6:02 pm on Mar 18, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


That's probably a preference . . . but consider the "average user" that may not understand these actions. When they click back into the parent window, the expected behavior is to do what they intended, bring that main window back into focus.

Then you "force" focus of your new window back to the front, doing what you want instead of what they want. The impression can range from annoyance to "pop-up rage." So I guess this is a decision you make based on accessibility/usability.

Your better solution is a lot of code to be included in the product descriptions..

This

<a href="../picture.jpg" onclick="return myWin('../picture.jpg',420,420);">Link Text</a>

is less code than

<a href="#" onclick="window.open('../picture.jpg','abc','width=420,height=420'); return false" style="color: red">Link Text</a>

And what you do is put that new window in an external file, name it with a .js extension, like "cart-functions.js."

Then in the head of your cart template you add

<script type="text/javascript" src="cart-functions.js"></script>

And you've just cut your code by anywhere from 25-50% for the products area. :-)

Note also, I don't think "style="red" does anything on an image anchor. To apply to other anchors in the product display, you can remove that to your CSS sheet, like

.product-display a {
color: red;
}

which is why I removed the style from, the link . . .

8:52 pm on Mar 18, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Thanks rocknbil, that seems like a good approach. I appreciate the help from both you and swa66.