Pop-up window overlapping issues

Question

odinwright 0 Newbie Poster

19 Years Ago

Hello,

Is there a way to change the target name of a pop-up window?

If you check out my site you will see the issue I am having. What happens is when you click on "Open Chat Window" and then click on "Detach Jukebox" they populate in the same pop-up. So you can't have both windows open at the same time. :sad:

If I could change the name of the pop-up's target to "_chat" or "_jukebox" instead of "_blank" perhaps I could have both pop-ups open.

The site is - check it out and you will see the issue.

Let me know if you know what I can do about this issue.

user-interface web-design

3 Contributors
12 Replies
290 Views
1 Day Discussion Span
Latest Post 19 Years Ago Latest Post by odinwright

Dani AI

Generated 9 Months Ago

Short answer: both links were ending up in the same popup because the same window name was being reused. A named window (the second argument to window.open or a target attribute) will be reused by the browser when the name matches. already pointed this out and gave a timestamp idea; below is a cleaner, unobtrusive pattern that (1) opens truly separate popups when needed, and (2) prevents the "[object Window]" navigation that appears when inline javascript: hrefs return the window object.

HTML (no inline JavaScript):

<a href="chatwindow.html" class="popup" data-base="chat" data-features="width=500,height=500,scrollbars=1">Open Chat Window</a>
<a href="jukebox.html" class="popup" data-base="jukebox" data-features="width=460,height=320,scrollbars=1">Detach Jukebox</a>

Unobtrusive JavaScript (attach once; no eval):

(function(){
  function openUnique(url, base, features){
    var name = (base || 'popup') + '_' + Date.now() + '_' + Math.floor(Math.random()*10000);
    return window.open(url, name, features || 'width=500,height=400');
  }

  document.addEventListener('click', function(e){
    var el = e.target;
    while (el && el !== document && el.nodeName !== 'A') el = el.parentNode;
    if (!el || !el.classList || !el.classList.contains('popup')) return;
    e.preventDefault();
    openUnique(el.href, el.getAttribute('data-base'), el.getAttribute('data-features'));
  }, false);
})();

Notes and troubleshooting:

The "[object Window]" page usually happens when an inline href="javascript:..." returns the Window object and the browser treats that as navigation output. Prevent default navigation (as above) or use onclick="window.open(...); return false;" instead.
Custom names should not begin with an underscore (those like _blank, _self are reserved). Choose distinct names when a single persistent window is desired, or generate unique names to allow multiple instances.
Modern browsers may block excessive popups; consider in-page modals for better UX. This approach cleanly implements ’s timestamp idea without eval and avoids the nested-quote pitfalls that caused the original markup problem reported by .

All 12 Replies

FC Jamison 31 Posting Pro in Training

19 Years Ago

That's pretty much how you do it...except without the leading underscore.

target="chat" and target="jukebox"

FC Jamison 31 Posting Pro in Training

19 Years Ago

<a href="linked.html" target="newwin" >link</a>

or
window.open(URL, name [, features])

<a href="javascript: window.open('http://whatever.com', 'tinyWindow', 'toolbar,width=150,height=100')">new window</a>

FC Jamison 31 Posting Pro in Training

19 Years Ago

show me the code you are using

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

odinwright 0 Newbie Poster · Answer 1 · 2006-09-19T06:58:21+00:00

How do I identify the pop up as "chat" What code would I place in the html document?

Odin

odinwright 0 Newbie Poster · Answer 2 · 2006-09-19T07:24:23+00:00

Ok so far it works. Except the window that has the link also goes to another page and says "[object Window]" What can I do?

As you can tell I am not a coder.:sad:

Thanks for all the support.

Odin

odinwright 0 Newbie Poster · Answer 3 · 2006-09-19T07:29:50+00:00

show me the code you are using

<a href="javascript: window.open('', 'tinyWindow', 'toolbar,width=500,height=500, status=no, scrollbars=no, menubar=no, resizeable=yes')">Open a Chat Window</a>

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 4 · 2006-09-19T07:47:50+00:00

try this

javascript

<script type="text/javascript">
  function popUp(URL) {
    day = new Date();
    id  = day.getTime();
    
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,left=125,top=100,width=500,height=500');"); 
  }
</script>

html

<a href="javascript:popUp('')">popup window</a>

p.s. no need to add window names...and put the script in the head section.

odinwright 0 Newbie Poster · Answer 5 · 2006-09-19T08:01:13+00:00

try this

javascript

<script type="text/javascript">
  function popUp(URL) {
    day = new Date();
    id  = day.getTime();
    
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,left=125,top=100,width=500,height=500');"); 
  }
</script>

html

<a href="javascript:popUp('')">popup window</a>

p.s. no need to add window names...and put the script in the head section.

Hmmm. I am going have to give this a more indepth look. The Html didn't work. And I am not familiar enough with Javascript code to implement it.:cry:

But I will continue to work at it.:cheesy:

Odin

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 6 · 2006-09-19T08:04:50+00:00

Here is a test page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
  function popUp(URL) {
    day = new Date();
    id  = day.getTime();
    
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,left=125,top=100,width=150,height=150');"); 
  }
</script>
</head>

<body>
<p><a href="javascript:popUp('')">popup window</a>
</body>
</html>

odinwright 0 Newbie Poster · Answer 7 · 2006-09-20T08:03:03+00:00

Here is a test page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
  function popUp(URL) {
    day = new Date();
    id  = day.getTime();
    
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,left=125,top=100,width=150,height=150');"); 
  }
</script>
</head>

<body>
<p><a href="javascript:popUp('')">popup window</a>
</body>
</html>

Ah ha! You rocked it... :mrgreen:... Apparently you know your stuff. Send me your PayPal email so I can send you a donation...

When I have my presentation at the Dolan School of business at Fairfield University I'll be sure to mention for others to look out for your avatar on this site.

tgreer 189 Made Her Cry Team Colleague · Answer 8 · 2006-09-20T19:59:08+00:00

We're all volunteers here. If you'd like to express your appreciation, then why not make a donation to Daniweb? Thanks!

odinwright 0 Newbie Poster · Answer 9 · 2006-09-20T22:25:21+00:00

We're all volunteers here. If you'd like to express your appreciation, then why not make a donation to Daniweb? Thanks!

Great. No problem. I already made a donation.:cheesy:

Pop-up window overlapping issues

Dani AI

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers