CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com:80/tutorials/blindtoggle-for-jquery/","20100822100624","https://web.archive.org/","web","/_static/", "1282471584"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and sli..."/> <meta name="keywords" content="bottom check,core code,Drop Down Menu,element,fn,jquery,slide effect,Slides,toggle,"/> <title>Blind Toggle for jQuery | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20100822100624cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20100822100624im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Blind Toggle for jQuery Comments Feed" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/blindtoggle-for-jquery/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100822100624js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://bavotasan.com/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://bavotasan.com/wp-includes/wlwmanifest.xml"/> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Shorten Your Post Titles in WordPress" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/"/> <link rel="next" title="Great Font Resources for Web Development" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/articles/great-font-resources/"/> <link rel="canonical" href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/blindtoggle-for-jquery/"/> <link rel="shortlink" href="https://web.archive.org/web/20100822100624/http://bit.ly/buaryV"/> <script type="text/javascript" src="https://web.archive.org/web/20100822100624js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Blind Toggle for jQuery"/> <meta property="og:description" content="jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on Moderno to see what I mean. I wanted to create an element that [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20100822100624im_/http://bavotasan.com/wp-content/uploads/2010/07/jquery-silver.jpg"/> </head> <body class="single single-post postid-2551"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20100822100624/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100822100624/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100822100624/http://support.bavotasan.com/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100822100624/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100822100624im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20100822100624/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Jul</div><div class="day">21</div><div class="year">2010</div></div> <h1>Blind Toggle for jQuery</h1> <br class="clear"/> <p><a href="https://web.archive.org/web/20100822100624/http://jquery.com/">jQuery</a> has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on <a href="https://web.archive.org/web/20100822100624/http://demos.bavotasan.com/?wptheme=Moderno">Moderno</a> to see what I mean. </p> <p>I wanted to create an element that slides out from the bottom up and came across this piece of <a href="https://web.archive.org/web/20100822100624/http://jquery.com/">jQuery</a> code which creates a “blind” toggle.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">blindToggle</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span>speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> callback<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #003366; font-weight: bold;">var</span> h <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">height</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'paddingTop'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'paddingBottom'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span>marginTop<span style="color: #339933;">:</span> parseInt<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'marginTop'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;"><</span><span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> <span style="color: #339933;">-</span>h<span style="color: #009900;">}</span><span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> callback<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span><span style="color: #339933;">;</span></pre></div></td></tr></table></div> <p>I have included it in my upcoming Premium theme Elemental Portfolio and I wanted to give props to Karl Swedberg on <a href="https://web.archive.org/web/20100822100624/http://www.learningjquery.com/2008/02/simple-effects-plugins">Learning jQuery</a> for pointing me in the right direction.</p> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked reading this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20100822100624/http://twitter.com/home?status=Blind Toggle for jQuery http://bit.ly/buaryV (via @bavotasan)" title="Click to send this page to Twitter!" target="_blank" rel="nofollow" class="twitter-icon"></a></li> <li><a href="https://web.archive.org/web/20100822100624/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/blindtoggle-for-jquery/&t=Blind Toggle for jQuery" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20100822100624/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/blindtoggle-for-jquery/&title=Blind Toggle for jQuery&bodytext=jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on Moderno to see what I mean. I wanted to create an element that [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20100822100624/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20100822100624/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/blindtoggle-for-jquery/')+'&title='+encodeURIComponent('Blind Toggle for jQuery'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20100822100624/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/blindtoggle-for-jquery/&title=Blind Toggle for jQuery" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20100822100624if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fblindtoggle-for-jquery%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/bottom-check/" rel="tag">bottom check</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/core-code/" rel="tag">core code</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/drop-down-menu/" rel="tag">Drop Down Menu</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/element/" rel="tag">element</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/fn/" rel="tag">fn</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/slide-effect/" rel="tag">slide effect</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/slides/" rel="tag">Slides</a>, <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tag/toggle/" rel="tag">toggle</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20100822100624/http://bit.ly/buaryV" title="Blind Toggle for jQuery">http://bit.ly/buaryV</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/tips-speed-up-jquery/" rel="bookmark" title="Permanent Link to 6 Tips to Speed Up jQuery">6 Tips to Speed Up jQuery</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/scrolling-back-to-top-button-jquery/" rel="bookmark" title="Permanent Link to Creating a Scrolling Back to Top Button with jQuery">Creating a Scrolling Back to Top Button with jQuery</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/sliderota-jquery-plugin/" rel="bookmark" title="Permanent Link to Sliderota jQuery Plugin">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/" rel="bookmark" title="Permanent Link to 8 jQuery Plugins to Improve the Way your Forms Look">8 jQuery Plugins to Improve the Way your Forms Look</a></li> </ul> </div>  <div id="bsap_1249050" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100822100624/http://bavotasan.com/tutorials/blindtoggle-for-jquery/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20100822100624/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required="true"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required="true"/></p> <p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2551" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20100822100624/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/" title="Easy Overlay Modal Window jQuery Plugin">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/12-free-illustrator-vector-buttons/" title="12 Free Illustrator Vector Buttons">12 Free Illustrator Vector Buttons</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20100822100624/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100822100624/http://wordcampmontreal.org/" title="I'm Speaking at WordCamp Montreal 2010 - Aug 28-29" class="wordcamp"></a> <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100822100624/https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93121" class="digwp"></a> <a href="https://web.archive.org/web/20100822100624/https://www.e-junkie.com/ecom/gb.php?cl=94455&c=ib&aff=93121" target="ejejcsingle" class="defender"></a> <a href="https://web.archive.org/web/20100822100624/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20100822100624/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100822100624/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100822100624/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100822100624/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100822100624/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/">Create bit.ly Short URLs for your Posts in WordPress</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/optimizing-your-mysql-database/">Optimizing your MySQL Database</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/draw-smiley-face-css3/">How to Draw a Smiley Face with CSS3</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/jquery-replace-word-with-link/">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/using-ajax-with-wordpress/">Using Ajax with WordPress</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/blindtoggle-for-jquery/">Blind Toggle for jQuery</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/">Shorten Your Post Titles in WordPress</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/display-rss-feed-with-php/">An Easy Way to Display an RSS Feed with PHP</a></li> <li><a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/tutorials/tips-speed-up-jquery/">6 Tips to Speed Up jQuery</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100822100624/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100822100624/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20100822100624js_/http://stats.wordpress.com/e-201033.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'2551'}); var load_cmc = function(){linktracker_init(5317602,2551,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20100822100624js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20100822100624/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>