SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body onunload event

    Hi Guys!

    I am trying to initiate fancybox popup on page unload (i.e. when the user closes the browser window). I managed to find the following script which does the opposite (launches when the page loads). How can I reverse this code so that it executes on body unload?

    Code JavaScript:
    <script type="text/javascript"> 
    	$(document).ready(function () {
            $.fancybox({
                'width': '40%',
                'height': '40%',
                'autoScale': true,
                'transitionIn': 'fade',
                'transitionOut': 'fade',
                'type': 'iframe',
                'href': 'http://www.example.com'
            });
    });
    </script>
     
    </head>
    <body id="home" onUnload="$('#aLink').trigger('click');">

    Thanks in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The onbeforeunload event is the one that you're after.

    Demo: http://www.4guysfromrolla.com/demos/...nloadDemo1.htm
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The onbeforeunload event is the one that you're after.

    Demo: http://www.4guysfromrolla.com/demos/...nloadDemo1.htm
    Okay so I tried this code, but it doesn't seem to work:

    Code JavaScript:
    <script type="text/javascript"> 
    	$(window).onbeforeunload(function () {
            $.fancybox({
                'width': '40%',
                'height': '40%',
                'autoScale': true,
                'transitionIn': 'fade',
                'transitionOut': 'fade',
                'type': 'iframe',
                'href': 'http://www.exallgroup.com'
            });
    });
    </script>

    Any idea whats wrong with it?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Zaggs View Post
    Any idea whats wrong with it?
    I don't think that you can do that.

    Please actually take the time to read the information about onbeforeunload on the onbeforeunload demo page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    JQuery doesn't have processing for the beforeunload event as it is not a standard event. You would therefore need to use ordinary JavaScript calls to process that particular event in the browsers that support it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by felgall View Post
    JQuery doesn't have processing for the beforeunload event as it is not a standard event. You would therefore need to use ordinary JavaScript calls to process that particular event in the browsers that support it.
    This is demonstrated quite well at the following resource:
    Using JQuery to Warn Users About Losing Data When Navigating Away from Form
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •