How to focus main web page after opening a new window?

Question

I want to be able to focus the original page after opening a new window/tab, the same way as it's done on this website: http://www.vouchercodes.co.uk/laredoute.co.uk

Answer 1

Its when you click on the green button 'Get code and open site'.

the code is all there for you to see. I used firebug to find the <a> object that had the click event bound to the code that did the popup behind the main browser window. I scrolled down to look inside the global.js file and found this:

Basically the .blur() on the named popup window will pass focus back to the main window for browsers that support it and return false; will ensure the link doesn't open in the current window which is the default behaviour. Scroll down the code below and you'll see it towards the bottom.

// -- VoucherClick --
// This baby does the funky stuff when the user clicks to reveal the voucher code
(function($) {
    $.fn.extend({
        voucherClick: function(config) {    

            return this.each(function() {

                // What is the objects parent?
                var theObject = $(this);                
                if ($(this).hasClass('the-image')) {    
                    var theParent = theObject.parent().parent();
                } else {
                    var theParent = theObject.parent().parent().parent();               
                }

                theObject.click(function() {

                    // Revealed codes have a light yellow background
                    // First we remove the background of any currently selected vouchers            
                    $('.selected-voucher').css('backgroundColor','#fff').removeClass('selected-voucher');       

                    // Now we add the yellow background. We have to check what was clicked as it affects
                    // how far up the DOM tree the voucher DIV starts

                    // We also must check if we are on an indiviual page with an expired voucher,
                    // because the yellow background can overlap the left hand edge of the voucher
                    if (theParent.parent().hasClass('individual-expired')) {                        
                    } else {                                                        
                        theParent.css('backgroundColor','#ffffee').addClass('selected-voucher');
                    }                   

                    // Check to see if the voucher has alread been revealed - we only want to run this
                    // if it hasn't yet been clicked                
                    if (!theParent.data('voucherRevealed')) {   

                        // Make a note that this voucher has been clicked
                        theParent.data('voucherRevealed', true)

                        // Make a note of the voucher code and create the revealed code module          
                        var thisCode = theParent.find('strong').html();

                        // If the code is over 18 characters, we need to reduce the font size
                        if (thisCode.length > 8) {
                            thisCode = '<span class="revealedVoucherCode small">' + thisCode + '</span>';
                        } else {
                            thisCode = '<span class="revealedVoucherCode">' + thisCode + '</span>';                     
                        }

                        // Fade out the initial module and fade in the revealed voucher module
                        theParent.find('.code-wrapper').fadeOut('normal', function() {
                            // If it's an individual page there is no H3
                            if (theParent.find('h3').length == 0){
                                // So we add the revealed module after the dates
                                theParent.find('.dates').after('<div class="revealedVoucher">' + thisCode + '</div>');
                            } else {
                                theParent.find('h3').after('<div class="revealedVoucher">' + thisCode + '</div>');
                            }
                            theParent.find('.revealedVoucher').fadeIn();
                        })
                    }

                    // Open the merchant link in a new window
                    var mer_window = window.open(theObject.attr('href'), '_blank', 'toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');

                    // Where browsers support it, let's pop this new window BEHIND the current window
                    if (typeof mer_window === "object") {
                        mer_window.blur();
                    }

                    // Reveal the What Just Happened Text, which was set up in the VoucherInit function
                    theParent.find('.what-just-happened').slideDown();

                    // Don't open the link in this current window
                    return false;

                }); // end theObject click function
            }) // end this.each function

        } // end function(config)
    }) // end $.fn.extend

}) (jQuery);

Answer 2

based on the above example, I've put together the following code, however click event doesn't work...

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;          
<script type="text/javascript">   
(function($) {
    $.fn.extend({
        myClick: function(config) {    
            return this.each(function() {
                var theObject = $(this);                
                theObject.click(function() {        
                    var new_window = window.open(theObject.attr('href'), '_blank', 'toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');
                    if (typeof new_window === "object") {
                        new_window.blur();
                    }
                    return false;
                });
            }) 
        } 
    })
}) (jQuery);
$('.fade').myClick();                             
</script>                                                               
</head>                                                                 
<body>                                                                  
<a href="http://www.google.com" class="fade" target="_blank">Google</a><br />                                       
</body>                                                                 
</html>