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

javascript cross-browser

25,923

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">

25,923

Author by

clauenmexico

Updated on March 19, 2020

Comments

clauenmexico about 4 years

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.

clauenmexico almost 11 years

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 almost 11 years

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
metadings almost 11 years

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
clauenmexico almost 11 years

So you say that jQuery UI is easier? That's great! I will give it a try! Thank you so much!
clauenmexico almost 11 years

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('weybridgestrategies.com/team/debra-porter-pr‌esident-ceo'); return (false); ? Thank you so much for your help. I really appreciate it! Claudia
clauenmexico almost 11 years

You are such a help Metadings. Awesome! I still do something wrong. Added <a class="uber-grid-hover" target="_blank" href="weybridgestrategies.com/team/debra-porter-president-ce‌o"> as the link inside the cell but it doesn't work. Any idea why? Or shouldn't I do this?
metadings almost 11 years

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 almost 11 years

*I meant stackoverflow with "us". Did you try again? don't see changes actually.
clauenmexico almost 11 years

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
metadings almost 11 years

:-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+
clauenmexico almost 11 years

PPS: I still don't understand what I have to do with this: 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="weybridgestrategies.com/team/debra-porter-president-ce‌o"> I didn't insert this nowhere but it still works. Did I miss something? I'm so sorry this is so new for me...
metadings almost 11 years

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) ;)
clauenmexico almost 11 years

Where do I put this default link with an url in href (and optionally target _blank)? I'm more than embarrassed...
metadings almost 11 years

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.
clauenmexico almost 11 years

That's easy! But where do I have to add this: <a class="uber-grid-hover" target="_blank" href="weybridgestrategies.com/team/debra-porter-president-ce‌o">
metadings almost 11 years

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
clauenmexico almost 11 years

Wonderful! I'm so thankful. Can't thank you enough! Sleep well. Schöne Grüsse nach Deutschland und Gute Nacht!
metadings almost 11 years

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 almost 11 years

a final tip check out the docs on 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