Cross Browser JavaScript Exit Pop

MSN Cross Browser JavaScript Exit Pop

How to Create a Working Exit Popup

Although exit pops can be really annoying when over used, they do have their place when used properly. When you bombard someone with ten exit pops to different offers and up-sells, that’s probably overkill. However, if you use an exit pop to remind someone to save a form before leaving your site or you direct them to a discount or special offer, then that’s probably a much better use of this often frowned upon functionality.

Creating a working exit popup for an HTML page isn’t that difficult and we’re going to show you how to do it using JavaScript. And you don’t have to be a coding wiz to implement this solution; nor will you have to spend any money on some slick tool to do this either. So without further ado, here is a simple cross browser JavaScript exit pop solution that we use in our HTML pages.

Required jQuery Files

In order for our solution to work you’re going to need to download jQuery files and install them on your server. Note: we’re using the version 2.x file and haven’t had any issues, but if you’re worried about older browsers you might want to go with the version 1.x file; you only need one or the other version not both. Also, you’ll probably want to use the compressed version of the file, your code will run a little faster, however the uncompressed files work with our solution too.

When you download the file you’ll end up with a file similar to “jquery-2.1.1.min.js” – the 2.1.1 will be replaced with the version release of the file you downloaded, so don’t worry if it doesn’t exactly match the version we’re using.

We recommend that you upload this file to your webserver in a folder called “js” that your HTML pages will have access. We do this because we have other JavaScript routines we use and organizing them in one location makes things a little easier. A little organization now, makes things much easier down the road.

Cross Browser JavaScript Exit Pop Code

There are only a few pieces of code to this solution and the first is referencing the jQuery files. Add the following line of code within the HEAD statement of your HTML file:

<script src="yourpath/js/jquery-2.0.3.min.js"></script>

Make sure you change the “yourpath” portion of the code to the proper path name to your “js” folder based on where your HTML files are located. And you will most likely have to update the version of your jQuery file too.

The second piece of code you need will also go within the HEAD statement of your HMTL file and someplace AFTER the first line of code you added above (hint: we usually place both right before the final “/HEAD” tag.

<script type="text/javascript">
    function PopIt() { 
      var redirect_to = 'YourRedirectPage'; 

      window.onbeforeunload = UnPopIt;
      setTimeout(function() {
        window.onbeforeunload = function() {};
        setTimeout(function() {
          document.location.href = redirect_to;
        }, 500);
      },5);
      return "**********\n YourMessgeGoesHere\n**********";
      }

    function UnPopIt()  { /* nothing to return */ }

    $(document).ready(function() {
      window.onbeforeunload = PopIt;

      $("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });
      $("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });
    });
</script>

There are three things you need to change in the code above. First, change “YourRedirectPage” to the page you want your exit pop to send your visitor to when they click the “Stay On Page” button. Note: the value of “YourRedirectPage” can be a relative or absolute page value (e.g. special-offer-discount.html or http://yourdomain.com/squeezepages/special-offer-discount.html).

Second, you’ll want to change “YourMessgeGoesHere” to the message you want to display to your visitors in your exit popup window. Your message can be short and sweet or as long as you want, just make sure it conveys want you need it to and some type of Call-To-Action. Also, the \n characters represent a newline or linefeed, so use these and spaces to pretty up the message that is displayed in your exit popup window.

The last and final thing you need to change (well maybe) is “YourFormID”. This line of code is only needed if you’re using this exit pop code on a page that has an opt-in form. You’ll need to change “YourFormID” to the ID of your opt-in form. And if the HTML page your adding this code to does not have an opt-in form, you can delete this line of code:

$("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });

from the function; leaving it in won’t cause a problem either. By the way, if you forget to change the “YourFormID” on an page that has an opt-in form, then the exit popup will be shown when your visitor clicks your opt-in button.

Updating Hyperlink <a> Tags

We’ve also included a little bit of code in our function for hyperlinks. This little bit of code will stop the JavaScript exit popup from firing IF and ONLY IF you add the id=”nojump” code to your hyperlink tags.

$("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });

Below is an example of how you would add it to a hyperlink:

<a id="nojump" href="”some-page-on-your-site-link”">YourAnchorText</a>

We typically just add the id=”nojump” to the hyperlinks that reference pages on our site, that way the exit popup doesn’t fire and display to the visitor when they are staying on our site (accessing internal site pages).

However, if we have a link on our offer page that goes to some other site (external site pages), then we do NOT add the id=”nojump” code to the hyperlink and the exit popup will be shown when the visitor clicks the hyperlink and tries to leave our site.

Adding or not adding the id=”nojump” code to hyperlinks on the page allows us to independently control each hyperlink on the page as needed. Who knows, there might be a time when you want an exit pop to appear even when a users stays on your site.

Cross Browser JavaScript Exit Pop Compatibility

Unfortunately all browsers are not created equal and therefore not all browsers support JavaScript Exit Popups the same. Firefox is the real pain, since it does not display (return) your customized message. It will display its own message and buttons for staying on or leaving the page.

Other browsers do a much better job of displaying your exit pop window and message the way you want it to look. The text on the buttons for staying on or leaving a page are a little different from browser to browser, but at least your customized message is displayed the way you coded it.

Below is an example of how some browsers display the exit pop window.

MSN Cross Browser JavaScript Exit Pop Windows

JavaScript Exit Pop Code Sample

Here’s a small JavaScript exit pop code sample that you can pretty much Cut & Paste into your own HTML files and use going forward for all your exit pops. Don’t forget to download and install the jQuery files mentioned above.

We’ve included some comments (Step 1 – Step 7) in the file for your convenience and hopefully you won’t have any problems getting this to work. If you do, just leave us a comment and describe what’s happening or not happening the best you can and we’ll try to help you get it working.

Things To Consider

There are plenty of exit pop solutions out there, but this is one we’ve developed for our use with HTML files and it works well across all browsers that we’ve tested. Feel free to modify it for your needs and don’t go spending money on one of those pricey solutions, unless you really need some specific functionality that you just can’t get to work by modifying this code.

A couple of things you should realize: if someone turns off JavaScript in their browser, this solution isn’t going to do you any good. With JavaScript off the PopIt and UnPopIt functions won’t fire and no window pop will happen when someone closes their browser or tries to go to a new page. Also, Mobile browsers tend not to support this type of JavaScript function either, so mobile visitors to your site won’t see your popup and you can’t control what happens when they try to leave your page.

Oh well, free is free, and there is only so much you can control in your code when the browser or platform doesn’t support certain functions.

HTML5 Video Example

MSN HTML5 Video Feature

Adding HTML5 Video to your website is now easier than ever. Stop wasting time with Flash videos and convert all the videos on your website to use HTML5. With more and more individuals accessing content from mobile devices, specifically Apple products, you don’t want to alienate those visitors and have them leave your site because their device can’t render your video content properly.

Our HTML5 video example below will show you all you need to know to add rich video content to your website in a few simple steps that any visitor will be able to watch, regardless of their device type.

Web Video History

In the early days, actually not so long ago, there was no standard for showing videos/movies on web pages. In fact before HTML5 came along, most videos could only be played with a plug-in (like flash). And for the longest time different browsers supported different plug-ins, making it even a bigger pain to present your videos to all visitors.

Fortunately HTML5 came along and defined a new element which specifies a standard way to embed a video or movie on a web page. Using the <video> element, web developers can now easily add videos to their website.

Checkout JWPLAYER’s  State of HTML5 Video report for more details about HTML5; it’s a great resource that shows you not only which browsers support the HTML5 video standard, but also some of the key features of the standard that the browsers support too.

 HTML5 Video Example

Below is an HTML5 video example and the code used to render it on this page using the video element:

<video width="360" height="202" controls 
              poster="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.png">
    <source src="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.webm" 
                    type="video/webm" width="360" height="202" />
    <source src="https://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.mp4" 
                    type="video/mp4" width="360" height="202" />
    <!-- fallback -->
        Your browser does not support HTML5 video.
</video>

Getting Your HTML5 Code To Work

Even if you’re not an HTML expert it’s pretty easy to follow this example, and we’ll break it down for you just in case you really are an HTML novice and are clueless when it comes to coding.

  • Video Element: controls the setup of your video and there are four parameters that we reference: WIDTH, HEIGHT, CONTROLS, and POSTER. These are not required parameters, however, if height and width attributes are set the space required for your video is reserved when the page is loaded. If you do not set these attributes the browser does not know the size of the video it’s loading and cannot reserve the appropriate space on the page for the video while the page loads, thereby causing the page layout to change while the video loads. The controls attribute adds video controls, like play, pause, and volume, to your video player. The poster attribute controls the image displayed where your video will be shown on your page when the page is loaded. If you’ve ever worked with YouTube videos, you’re probably familiar with how your video cover images are somewhat limited. Using this attribute, especially if you’re referencing a YouTube video, gives you complete control of what video cover is shown when your page loads. By the way, make sure your poster image width and height are sized the same as your video.
  • Source Element: controls the different video formats that your page supports. In the early days of HMTL5 video support you had to specify a bunch of video formats, basically one for each browser type. Now most browsers support the MP4 format, however, we still include the WEBM source format for older versions of Chrome and Firefox. The key parameters of this element are the SRC, TYPE, WIDTH, and HEIGHT. The src parameter contains the URL path that points to the actual video file, which does not have to be on our server. The type parameter specifies the MIME video format for this source element and it must match the file referenced in the src attribute. Valid MIME types are MP4, WEBM, and OGG. Make sure you always include the type attribute in the source element, otherwise the browser of the person visiting your site will need to load each video file until it can find a type that it supports, which can be really annoying when you have large videos!
  • Text Element: although not a true element, you should include some text after your last source element and before the closing video tag about non-HTML5 support.  This text will be displayed by browsers that do not support the HTML5 video standard. Note: in the example above the <!– fallback –> text is just a comment (used for reference) and is not required.

That’s pretty much it or at least the coding basics that most individuals need to get the job of migrating their video code to HTML5 done. However, there’s plenty more to learn when it comes to the HTML5 video standard, so if you want to learn more check out any of these great resources: Mozilla Developer Network, w3schools (a great resource for when you want to learn some HTML feature you can’t quite figure out), and of course Wikipedia. Each of these resources can teach you tons of other little tricks that you can use to enhance your HTML5 video implementations.

HTML5 Video Gets Complicated

Well not really! As you can see from the example above, writing the code to display a video on a web page in HTML5 is pretty easy. The only complicated part of the process may be creating the different MIME video formats you need for all the different browsers. And this really isn’t that difficult either.

If you create your own videos, then you probably already know how to created all the MIME video formats that HTML5 supports.  If you don’t, creating the formats you need from the format you already have is a simple as downloading and installing some video conversion software. The following video conversion software items are all FREE and have versions that run on MAC and PC: FLV Crunch, HandBrake, and Miro Video Converter. Of course there are other products out there, but these are ones we use, we know they work, have some pretty handy features, and did we mention they are all free!

HTML5 Video Summary

Adding video to your website that supports all visitors, whether they have a mobile device that supports flash or not, is easier than ever before and opens some amazing new possibilities for you. With more and more people watching video on the web, make sure your site supports anyone that comes to your site and from any device they use.

So if you’re sites not using the HTML5 Video Standard today, schedule some time to update your code and make sure your visitors are seeing what you want them to see.

PS – the above video was just a short sample taken from our Internet Marketing Untold What You Wish They Told You… But Didn’t product. If you haven’t already, go get your free copy of this report and find out “What they don’t want you to know!”

Apple Touch Icon Customize Your Website For Apple Products

iPhone Screen Shot Apple Touch Icon

There are plenty of Apple mobile device users out there, so why not take an extra minute or two and add a little known customization to your website in the form of an Apple Touch Icon and make those visitors fell special. If you manage your website, this really is easier than it looks and it’s a customization that will make you standout above your competition.

What is an Apple Touch Icon?

Apple touch icons are basically favicons for Apple mobile devices and when set in your HTML it will be displayed when a user saves your web page to their home screen on any of their Apple mobile (iPad, iPhone, and iPod) devices.

Unfortunately Apple didn’t just use the already defined favicon standard and instead created their own short code to do this, thus you have to do a little work to setup this special icon. However, setting the Apple Touch Icon is relatively easy and a good idea, because by default iOS just saves a small thumbnail of your website as the application icon on a mobile device. These default thumbnails are often hard to identify and generally don’t look all that great.

Creating an Apple Touch Icon

To create an Apple touch icon you don’t have to be a professional graphic designer. As long as you have a good quality image that scales well and access to some simple image editing tools, you’ll be just fine. On the other hand, if you don’t already have an image that scales well or any image editing tools, then just hire a graphic designer to create your icon for you.

Begin by creating a square .png formatted graphic that is sized to 152 by 152 pixels. A 152-pixel image is the perfect size for the Apple iPad and will allow other Apple devices to properly resize the icon as needed. Although you can create individual icons specific to each of the Apple Mobile Device Types, we’ve found that creating one icon sized for the iPad works just fine. NOTE: if you love getting down and dirty and knowing all the little details about coding, checkout the iOS Human Interface Guidelines: Icon and Image Sizes or Safari Web Content Guide: Configuring Web Application articles.

By the way, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. Although some of these features were once key characteristics of Apple icons, some have since been deprecated and the device will automatically add those features that are still supported.

Implementing Your Apple Touch Icon

Implementing your Apple Touch Icon is very easy to do and requires one simple line of HTML code, unless of course you create individual touch icons for each device type. In that case you’ll need to add one line of HTML code for each of the images you create for the different devices; one more reason we use just one image for all device types.

<LINK REL=”apple-touch-icon” HREF=”http://your-dowmain.com/directory-path-to-image/apple-touch-icon.png” />

Make sure you upload your Apple Touch Icon to your web server and if you name your image file “apple-touch-icon.png” the only changes you need to make to the above line of code are to replace “your-domain.com” with your domain name and “directory-path-to-image” with the directory path to your touch icon.

Testing Your Apple Touch Icon

Once you’ve created your Apple Touch Icon, uploaded the image to your website, and made the appropriate HTML code edits you’re readying to test your handy work. Grab your favorite Apple mobile device, launch Safari, and visit your website. After your website loads press the AirDrop icon (looks like a box with an arrow pointing out the top of it) at the bottom of Safari. AirDrop will open and you should see a scrolling list of icons in the bottom portion of the display; press the “Add to Home Screen” icon and that’s it.

If all goes well you should see your customized Apple Touch Icon displayed on your mobile device; it will probably be the last icon on the last page of icons on your device. Below is how our Millionaire Success Network Apple Touch Icon looks on an iPhone. Oh… it looks the same on an iPad too!

iPhone Screen Shot Apple Touch Icon Preview

That’s it, simple and quick!

PS – this should work for your Android mobile devices visitors as well, with no other changes required. And if you have any problems getting the above code to work, try moving your Apple Touch Icon to the root directory of your web server and adjusting the image path accordingly.

Although this isn’t the same as having a dedicated iOS application, it does provide a better mobile user experience for visitors who routinely access your website from their mobile devices. More importantly it gives you complete control of how your brand is displayed to mobile users that bookmark your site to their home screen.

Being able to control every aspect of your brand and how it’s presented to your customers is priceless, so take an extra minute or two and add that Apple Touch Icon to your websites HTML code and take control of your branding today.