Javascript Onclick window.open Popup not working in Firefox and Safari

Question

On my website (Password is "WS" without the quotes) I created a grid with a plugin (UberGrid).

To make each cell a popup I added the following code inside this Wordpress page:

<script type="text/javascript">
function popWin(url)
{
    var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
    if (window.focus) 
    {
        thePopCode.focus();
    }
}
</script>

Inside the plugin (inside the Debra Porter cell) I added the following link:

javascript: onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false);

It works fine in Google Chrome but no results in Firefox or Safari.

I added a Text link above the grid: TestLink This one works fine in every browser. — clauenmexico, Jul 16 '13 at 01:18
Just for sake of argument here, unless there's some specific reason why you need to specify the size of the window and position, etc, you really should just add `target="_blank"` to your `` tag. 90% of your users will never see the popup and instead will get a "hey we blocked a popup" message from their browser the way you plan to do it. It's also pretty well accepted convention that if you don't need the popup for persistent data (help, instructions, etc) you should keep your links "normal" (i.e. without a popup) for the most part. Just some friendly advice ;) — Brian, Jul 16 '13 at 01:24
Hi Brian Thank you very much for your input. You are so right! Is there a way to code something like: If popups are blocked do target="_blank"? Thank you very much! Claudia — clauenmexico, Jul 16 '13 at 01:39
http://stackoverflow.com/questions/668286/detect-blocked-popup-in-chrome There's lots of questions on here around the same topic, but in short you want to look at the result of your variable `thePopCode` to determine if the window was opened successfully or not. — Brian, Jul 16 '13 at 01:43
Please, don't duplicate [your own Questions](http://stackoverflow.com/q/17556185/1287812). See the pages [About] and [Help]. — brasofilo, Jul 19 '13 at 23:38

metadings · Answer 1 · 2013-07-16T02:10:52.783

1

Have a look on what HTML is produced:

<a class="uber-grid-hover" href="onclick=popWin(&#039;http://www.weybridgestrategies.com/team/debra-porter-president-ceo&#039;); return (false);"  >

How it should look like:

<a class="uber-grid-hover" href="http://www.weybridgestrategies.com/team/debra-porter-president-ceo"
   onclick="popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return false;">

So your popWin function is already ok, but you need to justify the anchor's attributes href and onclick. onclick is javaScript, so you don't need the javaScript prefix, and also you don't need inline onclick= because this creates a global variable. The return false will prevent the browser to follow the href, if javascript is available. By using this.href this is will not do what you expect at least in IE, because this is in IE the event, not the anchor.

EDIT: Actually your TestLink does what you intended, as of Firefox Aurora v24, without blocking-a-popup.

But I have to follow Brian's comment, that your new window may be considered a popup, so it would be the best if you do window.open(url, '_blank') or simply use <a target="_blank" href="..."> - and looking for a javaScript "popup" that doesn't load a new page, but looks more HTML5ish, for example using jQuery UI or by trying your own jS (and that would be another answer to a much bigger question... ;))

UPDATE: A good idea unleashing your jQuery already included, lets speak javaScript:

<script type="text/javascript">
function popWin(url)
{
  var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200,scrollable=yes, menubar=yes, resizable=yes');
  if (window.focus) {
    thePopCode.focus();
  }
}

jQuery(document).ready(function ($) {
    // here is your HTML DOM ready

    // create an onclick event for every a.uber-grid-hover
    $("a.uber-grid-hover").click(function (event) {

        event.preventDefault(); // this is "like" return false

        // this get's the href from your anchor, using jQuery sugar
        var url = $(this).attr("href");

        // call your fun
        popWin(url);

    });

});

</script>

Using this script, you should no more need to create onclick attributes for every single anchor. Simply put that into your wordpress source, this should work as is.

Now simply make the <a> using class="uber-grid-hover", this is required so that jQuery can select the hovers easily, then you need the href and you may include also target="_blank" so that non-javascript users will also have the page in a new window.

<a class="uber-grid-hover" target="_blank"
   href="http://www.weybridgestrategies.com/team/debra-porter-president-ceo">

edited Jul 16 '13 at 02:10

answered Jul 16 '13 at 01:32

metadings

3,798
2
28
37

1

Hi Metadings. Had to read your comment several times (I'm a absolute beginner...) but now I start to understand. Can you maybe tell me what it means that I don't need "inline onclick="? I will definitely look inside jQuery UI although I'm frightened! Liebe Grüsse! Claudia – clauenmexico Jul 16 '13 at 01:46
sorry for 10 times updating, should be correct now ;) btw. don't use raw javascript as a beginner, you will get headaches because of browser quirks and people not seeing the same result you have in your development environment, better use jquery for some time – metadings Jul 16 '13 at 01:47
So you say that jQuery UI is easier? That's great! I will give it a try! Thank you so much! – clauenmexico Jul 16 '13 at 01:50
Metadings, just saw your code. So sorry to ask: Can I just post it into the Wordpress Page? And what should I now use as an anchor instead of javascript: onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false); ? Thank you so much for your help. I really appreciate it! Claudia – clauenmexico Jul 16 '13 at 01:55
You are such a help Metadings. Awesome! I still do something wrong. Added as the link inside the cell but it doesn't work. Any idea why? Or shouldn't I do this? – clauenmexico Jul 16 '13 at 02:09
i see you messing up the html, thanks to giving us your password ;) don't miss the part to post the script as "raw html code" not just in the editor of wordpress. and the href's must really only be the url - btw I see you mixed the class uber-grid-hover for li's and a's so i have to make a litte change to the code... now please see again – metadings Jul 16 '13 at 02:10
*I meant stackoverflow with "us". Did you try again? don't see changes actually. – metadings Jul 16 '13 at 02:17
Sorry no battery. I added your code to the CSS & Javascript Toolbox V6 CE plugin and deleted it from the grid page. Did you mean this with "raw html code" and added the simple link inside the plugin. IT WORKS! YOU ARE BEYOND AWESOME! Sorry I had to shout that. Thank you so so much! Last question: Is this now still a problem for people that have popups blocked? Again. Thank you so much. Claudia – clauenmexico Jul 16 '13 at 02:34
:-D well i'm a bored developer not being in bed at 04:35 ;) as i see it from firefox with default blocking on it works fine for the CEO's link. now you have to repeat it for the others and you, and I'll try my bed ;) Gruß - no, I'm only on g+ – metadings Jul 16 '13 at 02:38
PPS: I still don't understand what I have to do with this: Now simply make the using class="uber-grid-hover", this is required so that jQuery can select the hovers easily, then you need the href and you may include also target="_blank" so that non-javascript users will also have the page in a new window. I didn't insert this nowhere but it still works. Did I miss something? I'm so sorry this is so new for me... – clauenmexico Jul 16 '13 at 02:40
ya well you put in a href only the link url. the advice from the other developer to put javascript into href is considered bad practice, because it makes your code hard to read. simply make a standard link with an url in href (and optionally target _blank to open a new window). the jquery above does the rest for (all) you(r links) ;) – metadings Jul 16 '13 at 02:42
Where do I put this default link with an url in href (and optionally target _blank)? I'm more than embarrassed... – clauenmexico Jul 16 '13 at 02:48
it's just like you made the debra-porter-president-ceo link. update all the other links just the same, with their url in href. – metadings Jul 16 '13 at 02:49
That's easy! But where do I have to add this: – clauenmexico Jul 16 '13 at 02:50
I see you look on a wordpress visual editor and not the html code... forget that, you made it actually right for the one link, all others will work the same way, just as simple links – metadings Jul 16 '13 at 02:52
Wonderful! I'm so thankful. Can't thank you enough! Sleep well. Schöne Grüsse nach Deutschland und Gute Nacht! – clauenmexico Jul 16 '13 at 02:55
Nun, die Vögel zwitschern schon, ich trink wohl doch einen Kaffee... - wait no one ever sent me something to my address on my website ;) don't overdo something... you're welcome :) pps. you could give me the points on stackoverflow! – metadings Jul 16 '13 at 03:00
a final tip check out the docs on https://developer.mozilla.org/en-US/docs/Web/API/window.open - and change your window.open call - the `scrollable=yes` is correctly named `scrollbars=yes` - if that's wrong it would be very annoying for screens with lower resultions and pages that are bigger than expected – metadings Jul 16 '13 at 03:17

score 0 · Answer 2 · answered Jul 16 '13 at 01:19

0

Try this code :

function popwin(url) {
window.open('', url, 'height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
url.target =url;
}

And for link,use the same code

javascript: onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false);

answered Jul 16 '13 at 01:19

Ahmed Ali

977
1
12
25

Thank you very much Ahmed but sadly now it doesn't work anymore in Chrome and it still doesn't work in the other browsers... Any other idea? Thank you so much! – clauenmexico Jul 16 '13 at 01:28

Javascript Onclick window.open Popup not working in Firefox and Safari

2 Answers2