Have you ever wondered how some websites manage to create popup that appears half-way down the page to provide information? It’s a lot easier than you think with jQuery!
The tutorial will walk you through the steps required to create a popup so that users of your site can read important information, like your Facebook page, etc. For the purpose of this information I’ll show you how to add a Facebook Like popup, but the information can be changed to anything.
Injecting popup code
The first thing that we will want to do is inject popup code. We want to place this as close to the bottom of your page code as possible, because of the way that it positions itself on the screen. This means placing it just before your closing body tag.
Here’s the code we can use:
You can create your own Facebook App code by going to the the Facebook Like generator here. Then simply replace the entire <div class=”fb-like” width=”300″, which I have highlighted above, with your own code.
Note: Facebook will provide you with custom JavaScript code that you will need to place (usually in the footer) to be used to load the widget you just created.
Default CSS positioning
We are also going to require some custom CSS styles for starting popup to not be displayed and setup properly. We can use the code below but feel free to change it appropriately.
The most important sections are from the top to #likeus h2 since the remaining are simply theming changes for the interface which you can modify as you see fit.
Making it all mesh
The great thing about JQuery is that it does all the heavy lifting for you! It’s an incredible set of tools that is ever-expanding and always available for your needs.
Essentially, the popup mechanism is controlled by the scroll function in Javascript. Here is the code and below that I will describe the various sections.
Window Scroll
The first section simply uses the window scroll and calculate the users position relative to the size of the popup. If you have changed the dimensions or size of the popup in the CSS you don’t need to do the same here, because it automatically calculates that!
Cookies! Yumm
You might like to prevent the popup from appearing if a user has already liked your site. In that case, we included a “Close forever” link which uses cookies. You will need to download the JQuery Cookies library to your site, and include the JS in your <head> tag along with the other script.
When a user clicks “I already like Bees on a Bike” then a cookie is set and they will no longer view your popup. You can obviously remove this code and comment out the cookie code if you do not need this functionality, but I prefer to give users the option.
Note: You need to include this library before you include the popup JQuery above, because your popup code will not work otherwise.
Check position of DIV popup code
All the magic happens after the cookie check! Basically, the system verifies that the popup is still hidden, and then compares the position of the user vs. where we want the popup to appear (in this case half way down the screen).
If the popup code is hidden then we animate it to appear for the user, and display it appropriately. Otherwise, it continues to follow the user on the side of the page until an action occurs.
Stop following me
The close and close-forever buttons are position at the bottom of the popup. These allow the user to close the popup (temporarily until a fresh page load) or alternatively permanently. As you see above they are reacting to the click command of the two href’s that appeared in the popup DIV code.
Small note:
You will need to include this JQuery script, customized for Drupal, within your site <head> tag like <script type=”text/javascript” src=”<your site path>/popup.js”></script>
I had to piece this together from a bunch of different JQuery sources to make something concrete so I thought it would be useful to post to others. I hope it helps other folks too!