A Real World Example Using jQuery

The best way to learn any programming language is to practice real-world examples. While you do the examples, you can copy and paste the code, but you should also understand the purpose of the code and why specific statements are used.

One common real-world use for jQuery is creating inline popups on the home page of a website. You've probably seen the jQuery popups without realizing that the technology behind them are basic JavaScript. When you open a page, a popup displays showing an ad or an offer for discounts. This type of popup is also used as an interstitial for websites that have minimum age requirements. Users are asked to verify their age by clicking a button. These popups are used for several reasons, but the programming and technology are always the same. It's a combination of jQuery, JavaScript, HTML and CSS. This article will show you how to create one of these popups.

Setting Up the HTML

One advantage of using jQuery versus standard JavaScript is that jQuery does not force a new browser window to open on the user's computer. Not only is this annoying to the user, but many browsers have popup blockers that stop a new window from opening. They even stop a new window from opening if the user clicks a button and a new popup is supposed to open on-command.

To get around these restrictions, you can use jQuery with an inline HTML div container. The div container represents the popup, and you use the show and hide jQuery methods to display and close it. You can display the container based on user input or automatically open it when the user navigates to your home page.

Before you create too many popups on your site, just remember that too many of them will distract users, and some will cause users to bounce from your site. Make sure you have analytics set up to identify if these popups are causing people to drop from your site.

Now that you know the advantages and pitfalls, let's take a look at a simple HTML page that can be used to display a popup.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Verify Your Age

<div id="popupfoot"> <a href="#" id="verify">I am 21 or older</a> | <a style="color:red;" href="#" id="cancel">I am under the age of 21</a> </div>

</div>

</div>

</body>

</html>

We've used some inline CSS styles. We don't want the div container to show until we call it in jQuery. Therefore, we want to set the default visibility to hidden. We set the style to "display: none" in the main container.

We also need to set the height and width of the window. We don't want the popup to take up the entire screen. This would block the true home page and annoy users. We set the width and height to 500 pixels, but you should test these sizes to ensure that it's a good size for different screen resolutions.

Finally, we have two links at the bottom of the popup. The first one indicates that the user is 21 years or older. Of course, we are working with the honor system since we don't know for sure that the user is indeed over 21. However, this is the common way for sites to verify age before any content is shown to the user. The second link is for the user to cancel and leave the site. The text indicates that the user is under the age of 21. We set the cancel button to display in red, which is common for cancel buttons.

You may want to tweak the styles and add some CSS classes to work with your own site's color scheme. With this example, we will use inline styles for simplicity and illustration purposes. However, just know that it's common for developers to include CSS styles in an external file to organize classes and keep styles out of the HTML tags. Having external CSS styles makes the HTML code easier to read.

Designing and Coding jQuery

With the HTML set up, it's time to work with the jQuery code. Since this is about learning jQuery, we will step through the jQuery code that you need step by step and show you the complete code at the end of the section.

In the HTML section, you'll notice that we linked the jQuery JS framework library files in the head section. We used Google's cloud hosting for performance reasons, but remember that you can download the files and store them locally. You should also make sure that you download the latest jQuery files to ensure that you can use the latest methods and properties and your code is compatible with the latest framework syntax.

We will only show you the jQuery code. With this code, you can place it within the HTML script tags or you can create an external file and link to this file in your code.

First, we need variables that reference the main window's height and width. Your users will have different screen sizes and resolution. Some will even have mobile devices with small windows. You can't set a static location for your popup because you don't know the size of the screen. You want to place the popup in the middle of the screen, so we will perform a basic calculation to identify the number of pixels from the left and top of the screen that sets the window in the center of the DOM. Don't forget we need to set the "document ready" function, so the code only pops up when the DOM has loaded in the web page.

We can start our code with the following jQuery statements.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

});

Now we can use these values to create a mask that covers the screen. In the HTML code, you notice that we have a "mask" div container. This container is used as a layer that hides the content in the background until the user clicks one of the two links. We want to set the mask container with the window's height and width and then first show the mask that hides the site content.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

});

We added three new statements. We set the mask container to the height and width of the user's browser window. We then "show" the div container with the fadeIn method. Remember that this method slowly animates a container from invisible to visible. We set it to fade in over 1000 milliseconds or 1 second. Then, we use the fadeTo method to set its opacity. The lower the opacity number, the more transparent the image. A .8 value is very close to fully opaque. A value of 1 sets the container to fully opaque, so .8 blocks the user from seeing the background page content.

With the mask now set, we can work with the actual popup window and set its properties. At this point, it's also still invisible to the user, so we still need to show it.

Let's now set the main popup properties.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

$("#dialog").css('top', screenHeight /2-$("#dialog").height()/2);

$("#dialog").css('left', screenWidth /2-$("#dialog").width()/2);

});

We added two new statements to the jQuery function. We set the main dialog popup's width and height based on the user's window size. The calculation places the dialog window in the center by dividing the screen's height and width by 2. This gets the center of your screen, but you still want to place the popup to the left and above of this point. The popup is placed using the top-left corner of the square that makes up the popup content. For this reason, we again divide the dialog's height and width by 2 to properly place it in the browser window. You can test this function by changing the dialog's dimensions and changing the CSS values. Testing different values is how you better understand the reasoning behind calculations that we have in the dialog's placement function.

With the dialog window location properties set, you can now show it in the user's browser. The following code adds the fadeIn statement to our jQuery code.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

$("#dialog").css('top', screenHeight /2-$("#dialog").height()/2);

$("#dialog").css('left', screenWidth /2-$("#dialog").width()/2);

$("#dialog").fadeIn(2000);

});

We added the fadeIn function for the dialog window. The animation takes 2000 milliseconds to show in the window. We have the mask container taking 1 second, and the dialog window taking 2 second. You might need to work with these fadeIn values to identify which combination is the best for user friendliness. You don't want the mask to block the site content and then your dialog window takes too long to display. The user might think your site is broken. The window should show relatively quickly to avoid scaring off users who don't realize that the site is waiting to obtain input from a dialog window that takes too long to load.

At this point, we just have a mask container that hides the site's content and a dialog window that shows two links. However, if the user clicks either of these links nothing happens. We need to set up the jQuery code that executes when the user clicks either one of these links.

Let's first add the function that runs when the user clicks the first link that verifies his age is over 21.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

$("#dialog").css('top', screenHeight /2-$("#dialog").height()/2);

$("#dialog").css('left', screenWidth /2-$("#dialog").width()/2);

$("#dialog").fadeIn(2000);

$("#verify").click(function (e) {

e.preventDefault();

$('#mask').hide();

$('#dialog').hide();

});

We added a function that triggers when the "verify" link is clicked. The first part of the function is to override the default behavior. The "preventDefault" method stops the browser's default behavior, which is send the user to another web page. With the default behavior paused, the mask and dialog containers are hidden. Since the user verified that he is indeed 21, you want to hide the containers blocking the view to the web page. The "hide" methods returns both of these containers to a "hidden" state, so now the web page displays in the browser. The user can now continue using the site normally.

What happens when the user cancels? We can perform any action that makes sense. We can just leave the div containers visible, which essentially continues to hide the content from view. We can also send the user to another website. What you do with the cancel button depends on your own business rules. Let's send the user back to Google if the cancel link is clicked.

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

$("#dialog").css('top', screenHeight /2-$("#dialog").height()/2);

$("#dialog").css('left', screenWidth /2-$("#dialog").width()/2);

$("#dialog").fadeIn(2000);

$("#verify").click(function (e) {

e.preventDefault();

$('#mask').hide();

$('#dialog').hide();

});

$("#cancel").click(function () {

window.location.replace("http://google.com");

});

We added another click event trigger. When the user clicks the "cancel" link, we use plain JavaScript to redirect the user to Google. The JavaScript "window.location.replace" function sends the user to another location. The URL is placed in the function's parameter list. When you make a call to this function, it acts as a redirect. You can also use the "wndow.location.href" property. This property simulates a link click. The following jQuery code would perform the same action if you prefer to use the href property.

$("#cancel").click(function () {

wndow.location.href = "http://google.com";

});

The above code is the same click event, but we've just used the alternative JavaScript code.

Once you have this jQuery code in place, you're now ready to deploy your code. Let's assume that you place the jQuery code in your HTML script tags. The following code is the complete sample in one file that you can copy and paste to your own coding tools.

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

var screenHeight = $(document).height();

var screenWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

$("#dialog").css('top', screenHeight /2-$("#dialog").height()/2);

$("#dialog").css('left', screenWidth /2-$("#dialog").width()/2);

$("#dialog").fadeIn(2000);

$("#verify").click(function (e) {

e.preventDefault();

$('#mask').hide();

$('#dialog').hide();

});

$("#cancel").click(function () {

window.location.replace("http://google.com");

});

</script>

</head>

<body>

Verify Your Age

<div id="popupfoot"> <a href="#" id="verify">I am 21 or older</a> | <a style="color:red;" href="#" id="cancel">I am under the age of 21</a> </div>

</div>

</div>

</body>

</html>

That completes your first jQuery sample. This sample is simple to reproduce on your own, and it's commonly used on the web. You will see this code frequently on pages that display popups for subscriptions, age verification and even simple ads.