1

I have been working on jQuery colorbox, I am stuck at this place where

I need to open a colorbox upon the closing the browser, I have tried different codes taken from the internet but nothing worked, I am placing the sample code which I have tried pl verify and suggest what needs to be done.

Sample Code:

 <script type="text/javascript">
$(document).ready(function(){
parent.fn.colorbox({href:
'http://www.google.com',
iframe:true,width:'960px',height:'500px', onLoad: function() { }});
});
</script>
<body onunload="$.fn.colorbox({href:'http://www.google.com',
iframe:true,width:'960px',height:'500px', onLoad: function() { }});">

This code throws a syntax exception in velocity.

Any help here would be really appreciated.

Rahul
  • 31
  • 1
  • 3

2 Answers2

1

unfortunately we don't have as much control over the user leaving the page as some would like. This is generally a good thing, because it tends to lead to annoying messages like "Are you sure you don't want to buy something first?".

But before I get to that, I'll address the code you have. First, on both instantiations of colorbox you are missing the "open: true" option. Whenever you want to open colorbox without a click, you'll need this option.

I am assuming that your code in the docReady means you want colorbox to open when the page if first loaded. To do that, change your code to this:

$(document).ready(function(){
    $.colorbox({href:'http://www.google.com', open: true, iframe:true,width:'960px',height:'500px'});
});

The code you had there was what was throwing the syntax error. "parent" doesn't have "fn" defined (and as previously mentioned, is generally used in iframes). fn is a property of Jquery (and it's actually just a shortcut for prototype). Also, I left out your onLoad property because it serves no purpose with an empty function.

Now getting to the "onunload", here you should be using the "onbeforeunload" attribute, as that will be the one to fire first. However, I don't think you'll be satisfied with that either because we can't do much with that. For more information on that, there's a great answer here: Answer to overriding window.onbeforeunload. The quick answer is to put this anywhere in your JS code:

window.onbeforeunload = function() {
    return "A string that will be ignored";
}

If you still prefer to put it inline in your html, this works too:

<body onbeforeunload="return ''">

This will open the browser's default "Leave this site?" dialog. Unfortunately, at the moment there is no workaround for overriding the contents or functionality of this dialog, which is why I say we can't do much with it. You could open a colorbox behind the dialog, but it may not even fully load, and there's no stopping the browser if the user clicks "yes" at this point. And as a side note, this event also gets fired on a page refresh, not only when navigating to a new site.

If you can live with only watching out for clicks on external links, you could use something like this in your docReady, which will open a colorbox when user clicks on any link that starts with "http://" (in this example, I use the "html" option, but you could alternatively use the href option with "iframe: true"):

$('a[href^="http://"]').click(function() {
    var href = $(this).attr("href");

    $(this).colorbox({
        html: "Thanks!",
        width: "50%",
        height: "50%",
        onClosed: function() { window.location = href; }
    });
});
Community
  • 1
  • 1
uɥƃnɐʌuop
  • 14,022
  • 5
  • 58
  • 61
0

The snippet you posted may be mixing modes. Using parent.fn.colorbox is usually done from an iFramed child to refer back to the parent window. The snippet doesn't show enough of your context to see if that is correct use.

You should also note which call generates the error, the onDoc ready or the unload.

CSSian
  • 1,621
  • 13
  • 19