CODEWITHSUNDEEP
javascriptjqueryhtmlfancybox
Mukesh
Mukesh

Reputation: 7778

How to stop page redirection on closing the fancybox?

I have following code

<script type="text/javascript">
        jQuery(document).ready(function() {
            beginCartnotification();
        });
        setTimeout(function () {
            window.location.href = "http://www.someurl.com";
        }, 5000);
    </script>


<script type="text/javascript">
        jQuery.fancybox({
            'width': '300',
            'height': '90',
            'padding': '40px',
            'autoDimensions': false,
            'border': '1px solid #005195',
            'autoScale': false,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'showCloseButton': true,
            'type': 'inline',
            'href': '#cartnotification-popup',
            'onClosed': function(){ //perform some task on closing the fancybox.}
        });
    }
</script>

Now what I want to do is if user clicks on the close button on fancy box, page should not redirect.

If user do not click on the close button after 5 seconds user should be redirected to another page.

How can I achieve inside onClosed function ?

http://fancybox.net/api

Upvotes: 0

Views: 734

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

Just add a setTimout to the onComplete property of fancybox, which will be called once the content is displayed. If timeout is reached before closing fancybox, do your redirect.

In the onClose property function clear the timeout, to make sure the window.loaction change will not be fired.

Also add the fancybox setup to jQuery's .ready() method to make sure initialization takes place as soon as the document is ready. 

<script type="text/javascript">
jQuery(document).ready(function() {

  beginCartnotification();

  // ADD A VAR TO HOLD YOUR TIMER.
  var timer;

  jQuery.fancybox({
    'width': '300',
    'height': '90',
    'padding': '40px',
    'autoDimensions': false,
    'border': '1px solid #005195',
    'autoScale': false,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'showCloseButton': true,
    'type': 'inline',
    'href': '#cartnotification-popup',
    'onComplete': function() {
      timer = setTimeout(function () {
        // REDIRECTING TAKES PLACE AFTER 5 SEC.
        window.location.href = "http://www.someurl.com";
      }, 5000);
    },
    'onClosed': function() {
      // CLEAR THE TIMEOUT !!!
      clearTimeout(timer);
    }
  });

});
</script>

Upvotes: 2

Related Questions