{"id":225,"date":"2008-09-16T21:54:21","date_gmt":"2008-09-17T02:54:21","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=225"},"modified":"2008-09-16T21:54:21","modified_gmt":"2008-09-17T02:54:21","slug":"jquery-popout-ad-part-2","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/jquery-popout-ad-part-2\/","title":{"rendered":"jQuery-Based Popout Ad: Part 2"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Note: <\/strong>Part 1 of this series is available here.<\/a> Be sure to read it first, or what comes here won\u2019t make a lot of sense. :)<\/p>\n

Part 2 of our series is going to build on what we accomplished last week. Namely, we\u2019re going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We\u2019ll be using jQuery for most of what we do, so you\u2019ll need to include the jQuery library script<\/a> at the top of your document for this to work (see the source of the example page<\/a> to see how this is done).<\/p>\n

Before we get started on our JavaScript, however, we\u2019ll need to make one tiny addendum to our CSS from last week:<\/p>\n

#popout #adbox {\n\tmargin-left: -300px;\n}<\/pre>\n
This bit of CSS moves our ad box (the bit we hope to animate) 300 pixels to the left of where it sits normally. And because our ad is 300 pixels wide (convenient, no?) this effectively hides the ad off the side of the screen. This way, our ad is hidden by default, and we can use jQuery to slide it back onto the screen.<\/p>\n
Now let\u2019s get started with the jQuery. We\u2019ll wrap everything we write today in a \u201cdocument ready\u201d function, which looks like this: <\/p>\n
$(document).ready(function() {\n});<\/pre>\n
This prevents everything we put inside from firing until the document has finished loading, which is a good thing for us: we don\u2019t want our ad to start moving until it\u2019s all loaded!<\/p>\n
Set Some Variables<\/h3>\n
We\u2019ll start by defining a few variables that we\u2019ll use throughout the script:<\/p>\n
var popOut = \"#popout\";\nvar adBox = \"#adbox\"; \nvar adWidth = $(adBox).width() + $(\"#cap\").width();<\/pre>\n
The first variable, popOut, contains the CSS ID of the overall popout container that we built last week. popOut contains the ad and the ad\u2019s cap both. The second variable (adBox) is the ID of just the animated bit of the ad. And finally, adWidth is a custom-built variable which gives us the total width of the area our ad takes up (the width of the ad plus the width of the cap). This variable will come in handy when we start animating our ad, to let us know how much space we have to work with.<\/p>\n
The Animation Functions<\/h3>\n
Now that we\u2019ve defined our primary variables, let\u2019s delve into the actual animation of the ad. I\u2019ve broken both parts of our animations (sliding in to the page and sliding back out again) into two functions. The opening function looks like this:<\/p>\n
function openAd() {\n\t$(popOut).width(adWidth+\"px\");\n\t$(adBox).animate({marginLeft: \"0\"},1200);\n}<\/pre>\n
This tiny little function is doing a surprising amount of work (which is really the power of jQuery). The first line simply sets the width of the popout container to be the width of the ad plus the cap \u2013 making sure we have enough room to do our animation. This may seem redundant, but it\u2019ll make more sense later.<\/p>\n
The second line of our function is the real workhorse. Here, we\u2019re using jQuery to build a custom animation, which we\u2019re attaching to our adBox variable. We\u2019re telling jQuery to set a left margin of zero on the adBox (to move it back to its \u201creal\u201d position, in other words). But instead of doing it all at once, we\u2019re telling jQuery to slowly make the change over the course of 1200 milliseconds (or 1.2 seconds, if you prefer). Pretty powerful stuff for a single line of code, no?<\/p>\n
And now that we\u2019ve built the function to open our ad, we can build the function to close it back up again:<\/p>\n
function closeAd() {\n\t$(adBox).animate({marginLeft: \"-\"+adWidth+\"px\"},1200,\"linear\",\n\t\tfunction(){ $(popOut).width($(\".cap\").width() + \"px\"); }\n\t);\n}<\/pre>\n
This function is obviously a little more complicated, although it wouldn\u2019t have to be if it weren\u2019t for a but in Internet Explorer 6.<\/p>\n
The first bit looks somewhat familiar, I hope. We\u2019re setting another animation here, this time setting the left margin of the ad  to be the negative<\/em> of the width of the ad space, effectively hiding it off the side of the screen. And we\u2019re doing it over the same 1.2 seconds as our last animation (though you can tweak these numbers to your heart\u2019s content).<\/p>\n
After that, things get a little more complicated. The next bit, \u201clinear,\u201d simply tells the animation function to maintain the same speed throughout the animation \u2013 not to slow down at the beginning or end. <\/p>\n
And when the animation is finished, we\u2019re firing off yet another function. This function sets the width of the popout area to be only as wide as the cap, since that\u2019s the only part of the ad that is visible (hence why we have to set a width at the beginning of our openAd function). <\/p>\n
This is because of a bug in Internet Explorer 6 that prevents the user from \u201cclicking through\u201d an empty div. What that means is, if the user tried to close your ad and then click on anything that had been previously hidden by the ad \u2013 a link in your sidebar, for example \u2013 they wouldn\u2019t be able to click. Even though the ad is gone, IE6 would assume you were reserving the space for some greater purpose. So to get around this, we grow and shrink the popout space as necessary.<\/p>\n
Create Click Events<\/h3>\n
Now that we\u2019ve created our animation functions, we can attach them quickly and easily to the anchors we built last week for such a purpose. As you\u2019ll recall, we included a \u201cclose\u201d button in the corner of the ad \u2013 clicking this should obviously close the ad. And if someone ever wanted to see the ad again (we should be so lucky!), clicking the cap will bring it right back out.<\/p>\n
$(\"#open\").click(function() {\n\topenAd();\n\treturn false; \n});\n$(\"#close\").click(function() {\n\tcloseAd();\n\treturn false;\n});<\/pre>\n
These functions are fairly simple: We\u2019re simply using jQuery to assign an onClick event to our cap (with a CSS ID of \u201copen\u201d) and our close button (which we called \u201c#close\u201d last week). When the user clicks on either of those elements, the function inside (openAd and closeAd, respectively) will trigger. After that, we\u2019ve included a \u201creturn false,\u201d which simply tells the browser not to bother following the href in our anchors (it was blank anyway, but we don\u2019t want the page refresh that would go along with an attempt).<\/p>\n
And now, one last line of jQuery magic. When we open our page, we want our ad to pop out of the side of the page, catching the user\u2019s eye and drawing their attention to our box\u2019s content. To do that, we use this line:<\/p>\n
$(popOut).animate({opacity: 1.0}, 1500, \"linear\", openAd);<\/pre>\n
jQuery is very powerful, but one thing it lacks is a simple \u201cdelay\u201d function. And here\u2019s the problem: I don\u2019t want my ad to start animating the very instant that my document becomes \u201cready.\u201d For one, I\u2019d like the reader to be able to orient themselves on the page. For another, just because the document is ready (i.e., our code has downloaded) doesn\u2019t mean that all of my images have finished downloading. And an animated ad without any images is far less impressive than the image-rich variety.<\/p>\n
Luckily, I found a solution on a blog titled \u201cPanagiotis Karageorgakis,\u201d and modified it to fit my needs. The basic concept is this: we animate the ad in some way that makes absolutely no change whatsoever<\/em> on the screen, and then we chain on a second animation when we\u2019re done.<\/p>\n
So here, our animation, which will fire on load, tells jQuery to slowly set the opacity of our ad to \u201c1.0\u201d (opaque) over the course of 1.5 seconds. Of course, our ad was already fully opaque, so this has no effect at all. And then after the first \u201canimation\u201d is completed, we fire off another function: namely, our openAd function, which will do all the heavy lifting involved in actually opening our ad.<\/p>\n
And that\u2019s all there is to it! We now have a fully functioning popout ad. You can see it in action here.<\/a> And here\u2019s the completed JavaScript, so you don\u2019t have to hunt it down:<\/p>\n
$(document).ready(function() {\n\tvar popOut = \"#popout\";\n\tvar adBox = \"#adbox\"; \n\tvar adWidth = $(adBox).width() + $(\".cap\").width();\n\n\tfunction openAd() {\n\t\t$(popOut).width(adWidth+\"px\");\n\t\t$(adBox).animate({marginLeft: \"0\"},1200);\n\t}\n\t\n\tfunction closeAd() {\n\t\t$(adBox).animate({marginLeft: \"-\"+adWidth+\"px\"},1200,\"linear\",\n\t\t\tfunction(){ $(popOut).width($(\".cap\").width() + \"px\"); }\n\t\t);\n\t}\n\n\t$(\"#open\").click(function() {\n\t\topenAd();\n\t\treturn false; \n\t});\n\t$(\"#close\").click(function() {\n\t\tcloseAd();\n\t\treturn false;\n\t});\t\n\t\n\t$(popOut).animate({opacity: 1.0}, 1500, \"linear\", openAd);\n});<\/pre>\n
Of course, that isn\u2019t to say we couldn\u2019t make our ad a little fancier than it is. Next week, we\u2019ll go over some ways to make the ad even more advanced \u2013 like remembering whether the ad should be open or closed, or letting the user open and<\/em> close the ad by clicking on the cap. Stay tuned!<\/p>\n
Note:<\/strong> Part 3 of this series is available here.<\/a> And if you missed it, here’s part 1.<\/a><\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Part 2 of our series is going to build on what we accomplished last week. Namely, we\u2019re going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,184],"tags":[201,55,291,321],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/225"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}