homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Popup problem
similar to problem in thread shown
Amaxas Pleiades



 
Msg#: 4344231 posted 8:33 pm on Jul 26, 2011 (gmt 0)

I am relatively new to the HTML, CSS, JS scene and currently dealing with an error concerning popups in IE and Firefox (also doesn't work to expectations with Opera, meh).

I work for my brother, the President of Chick's Equine Wholesale ([url]chicksaddlery.com[/url]). We recently updated to a newer system and are trying to iron out popups used for viewing larger images of products (saddles, pads, etc).

While researching I came across this thread:

[webmasterworld.com ]

As rocknbil describes in his first post, in the older thread above, I am experiencing a popup that is being placed behind the main window.

In IE and Firefox the initial popup displays correctly, but without exiting that popup any other link to a popup is placed behind the main viewport. The same popup window is used, which is desired, but is not in focus.

Product page of the test product:
[chicksaddlery.com ]

We currently use the following script:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>


I assume my brother found this script at:

[htmlcodetutorial.com ]

The following is an example of the HTML in the specific product page:

<a href="http://www.chicksaddlery.com/Merchant2/graphics/00000001/5735TC-TCN.JPG" onClick="return popup(this, 'Chicks')">
<img SRC="http://www.chicksaddlery.com/Merchant2/graphics/00000001/tn5735TC-TCN.JPG" border=0></a>


swa66 introduced the idea of applying refocus to the popup. In theory I like the idea, but as mentioned above I am currently not able to completely follow code speak, concerning JavaScript in particular.

Any hints or input would be appreciated. I would like to keep the script my brother implemented if possible, but I've learned that starting from scratch is sometimes ones best bet.

NWF

 

rocknbil

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



 
Msg#: 4344231 posted 4:36 pm on Jul 27, 2011 (gmt 0)

I'm not sure what window.focus is referring to - generally window is the parent window (?) If this is causing a "pop under" I'd just remove that line. Also the concept of focus in that thread is a bit different - it refers to what happens when the user clicks back in the main window.

Second, one of the important points from that thread is the concept of the window ID (windowname, in your implementation.)

The windowname should be unique - so let's say you have two links and use "Chicks" in both of them:

<a href="link1html" onClick="return popup(this, 'Chicks')">
<a href="link2.html" onClick="return popup(this, 'Chicks')">

Visualize this:
1. User clicks link, opens popup.
2. User clicks back in main window, which puts the popup behind the main window.
3. User clicks link #2, which loads the new content into the window named "Chicks" which is currently behind the main window. User does not know this and assumes your site is broken.

If it's too much trouble to re-code these links, leave them as is and just don't use the second parameter, or use it for something else. What you need to do is generate a new window name every time this function is called - a relatively easy way to do that is use the millisecond time of day.

Revised,

<script="text/javascript">
function popup(mylink, windowname) {
var href;
var day = new Date(); // date object
var id = day.getTime(); // millisecond value
href= (typeof(mylink) == 'string')?mylink:mylink.href;
window.open(href, id, 'width=400,height=200,scrollbars');
// "yes" is not needed
return false;
}
</script>

If you can manage to mod all the links,

<a href="your-url" onClick="return popup(this)">
<img SRC="your-image" border=0></a>

all you need is mylink and can remove windowname.

<script="text/javascript">
function popup(mylink) {
var href;
var day = new Date(); // date object
var id = day.getTime(); // millisecond value
href= (typeof(mylink) == 'string')?mylink:mylink.href;
window.open(href, id, 'width=400,height=200,scrollbars');
// "yes" is not needed
return false;
}
</script>

A little BG on what's going on here:
href= (typeof(mylink) == 'string')?mylink:mylink.href;

This is a ternary operator, also known as short circuit evaluation, and is identical to an if/else (but is more compact and looks more cool. :-) ) the if/else allows you to passa valid string or a reference to an object -in this case, when you do this


onClick="return popup(this)"

You are passing a reference to the current anchor object, so it will use that object's href attribute. You could also do this

onClick="return popup(this.href)"

Which will the pass the string that is in the href, "your-url". You could also do this,

onClick="return popup('some-other-url')"

Which would then use "some-other-url" instead of the href - don't know why you'd want to do that, but you could. :-)

Amaxas Pleiades



 
Msg#: 4344231 posted 8:08 pm on Jul 27, 2011 (gmt 0)

I first removed the window.focus line in the original script with the same result in all browsers. Then I did a little tinkering with the 'windowname' with mixed results.

Am I to have a different 'windowname' specified for each link in the HTML of the product page? Wouldn't this result in multiple popups?

We would prefer not to allow the user to 'clutter' themselves with multiple popups.

The original script works as desired in Chrome:

-User enters product page
-User clicks thumbnail image to view popup of larger version
-User clicks another thumbnail image (parent window) and induces a new image in the same popup

IMO the average user will probably exit the current popup before trying to view another, but we would like to have this function-ability (found in Chrome) available on all browsers, if at all possible. If all users were to exit the first popup then continue to another popup then we wouldn't be concerned.

Firefox and IE both show an original popup as expected:
-User opens popup via clicking thumbnail image
-User clicks another thumbnail (pw) and establishes a new image in the same popup (but the popup is "hidden" behind the parent window)

I have the time to recode any and all that is needed, as we have over 6000 products and will be applying this to many of them. We just need to fix the under popping windows for IE and Firefox beforehand.

When I changed over to your script and applied the proper code to the individual links I received no popup; the main viewport followed the link clicked. Not sure where I went wrong.

I do appreciate your attention to my thread, and your BG at the bottom helped me grasp some of this. Especially when you identified the ternary op as an if/else.

rocknbil

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



 
Msg#: 4344231 posted 4:43 pm on Jul 28, 2011 (gmt 0)

Am I to have a different 'windowname' specified for each link in the HTML of the product page?


No - generate the name within your function.

We would prefer not to allow the user to 'clutter' themselves with multiple popups.


The first mistake any developer can make is to force your visitors to use your site in the way you think it should be used. If the visitor feels cluttered, they will close the windows. :-) Considering the alternative, all opening in the same window, it's more likely they will click back in the main window and leave the pop up open. You *can* force focus on the pop up but many users may be confused by this. "I want to go HERE and it won't let me, keeps forcing me back to this stupid pop up!" - never realizing all they need to do is close it. That's my take on it anyway . . .

When I changed over to your script and applied the proper code to the individual links I received no popup;


Probably a Javascript error (check the error console in FF.) A working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Unique pop ups</title>
<script type="text/javascript">
function popup(mylink) {
var href;
var day = new Date(); // date object
var id = day.getTime(); // millisecond value
href= (typeof(mylink) == 'string')?mylink:mylink.href;
window.open(href, id, 'width=400,height=200,scrollbars');
return false;
}
</script>
</head>
<body>
<p><a href="https://www.google.com" onclick="return popup(this);">G</a></p>
<p><a href="https://www.webmasterworld.com" onclick="return popup(this);">W</a></p>
</body>
</html>

I used https so the link tag thingie on this forum doesn't munge up the code.

Amaxas Pleiades



 
Msg#: 4344231 posted 6:30 pm on Jul 28, 2011 (gmt 0)

The first mistake any developer can make is to force your visitors to use your site in the way you think it should be used.


I agree, and that's why we want to make sure that this under pop issue is resolved.

You *can* force focus on the pop up


This is exactly what I've done with the original script and am currently performing to expectations on all browsers (besides Opera).

<script type="text/javascript">
var myWindow;
function popup(mylink, Chicks)
{
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
myWindow = window.open(href, Chicks, 'width=400,height=200,scrollbars');
if (!myWindow.closed) {
myWindow.focus( );
}
return false;
}
</script>


For our situation, I feel that users won't be confused with this popup returning to focus. The only place they can click in the parent window to refocus the popup (if they did not exit it) is on a thumbnail of another image they want to enlarge.

Again thanks for your help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved