Footer Toggle Content jquery

oshlo.blogspot.com - Footer Toggle Content jquery


Download

<style type="text/css">
body {
 font-size:72%;
 font-family:Arial, Helvetica, sans-serif;
 line-height:1.9em;
 color:#434343;
 background:#FCFCFC;
 }
a:hover {
 text-decoration:none;
 color:#7B7B7F;
 }
h3 {
 font:2em Arial, Verdana, Helvetica, sans-serif;
 color:#2A313A;
 padding-bottom:20px;
 }
ul, ol {
 margin:0;
 padding:0 0 20px;
 }

ul {list-style:none;}

ul li {
 margin:0;
 padding:5px 0 5px 21px;
 color:#434343;
 background:url(images/arr.gif) 0 9px no-repeat;
 }

ul li a {
 color:#434343;
 text-decoration:none;
 }

ol li {
 margin:0 0 0 2em;
 padding:0;
 color:#434343;
 }
.wrap {
 width:1000px;
 position:relative;
 margin:0 auto;
 z-index:300;
 }
.clear {clear:both; height:0px;}
#footer_button {
 width: 121px;
 height:22px;
 margin-right:34px;
 float:right;
 cursor: pointer;
 background:url(images/more_info.png) 0 0 no-repeat;
 }

#footer_higher {
 width:100%;
 background: #293139;
 position:relative;
 z-index:100;
 }

#footer_higher #footer_content {
 width: 932px;
 margin: 0 auto;
 display: none;
 }

#footer_higher #footer_content .footbox1 {
 float: left;
 width: 265px;
 margin: 20px 0 30px;
 }

#footer_higher #footer_content .footbox2 {
 float: left;
 width: 130px;
 margin: 20px 0 30px 50px;
 }

#footer_higher #footer_content .footbox3 {
 float: right;
 width: 260px;
 margin: 20px 0 30px;
 }

#footer_higher h3 {
 color:#ffffff;
 font-size:1.5em;
 padding-bottom:5px;
 }

#footer_higher .title {
 width:100%;
 position:relative;
 margin-bottom:15px;
 border-bottom:1px solid #191E23;
 }

#footer_higher .title:after {
 width:100%;
 content: '';
 position: absolute;
 border-bottom:1px solid #39444F;
 bottom:-2px;
 }

#footer_higher li {
 margin:0;
 padding:5px 0;
 background:none;
 border-bottom:1px solid #0D1012;
 }

#footer_higher #footer_content .footbox1 li {
 padding-left:20px;
 background:url(images/foot_arr.gif) 0 8px no-repeat;
 }

#footer_higher a {
 color:#9A9B9D;
 text-decoration:none;
 }

#footer_higher a:hover {
 color:#ffffff;
 text-decoration:none;
 }

#FootContact p {margin-bottom:3px; clear:both;}

#FootContact p label {
 width:45px;
 padding-right:5px;
 font-size:0.9em;
 padding-top:2px;
 text-transform:uppercase;
 float:left;
 color:#96999C;
 }

#FootContact input[type=text],
#FootContact textarea {
 padding:3px;
 font:0.95em/0.9em Arial, Helvetica, sans-serif;
 color:#96999C;
 background:#1B2025;
 border-top:1px solid #0D1012;
 border-left:1px solid #0D1012;
 border-bottom:1px solid #394550;
 border-right:1px solid #394550;
 }

#FootContact input[type=text] {
 width:199px;
 height:15px;
 }

#FootContact input[type=text]:hover,
#FootContact textarea:hover {background:#293139;}
#FootContact input[type=text]:focus,
#FootContact textarea:focus {background:#444A50;}

#FootContact input[type=submit] {
 border:1px solid #1A1F24;
 box-shadow:1px 2px 2px #1A1F24;
 -moz-box-shadow:1px 2px 2px #1A1F24;
 -webkit-box-shadow:1px 2px 2px #1A1F24;
 box-shadow:1px 2px 2px #1A1F24;
 text-transform:uppercase;
 background: #444A50;
 }

#FootContact textarea {
 width:249px;
 height:95px;
 overflow:hidden;
 }

#footer_lower {
 border-top:6px solid #14181B;
 width: 100%;
 color: #434343;
 padding: 25px 0px;
 position:relative;
 z-index:200;
 background:#fff;
 }

#footer_lower .valid {
 display:block;
 font-size:0.95em;
 color: #A1A1A1;
 }

#footer_lower #footer_info {
 width: 932px;
 margin: 0 auto;
 }

#footer_lower #copyright {
 width: 610px;
 float: left;
 text-align:left;
 }

#footer_lower #attr {
 width: 300px;
 padding-top:10px;
 float: right;
 font-size:1.3em;
 text-align:right;
 color:#A1A1A1;
 }

#footer_lower #attr b {font-weight:normal;}

#attr ul {
 margin:0;
 padding:0;
 list-style:none;
 float:right;
 }

#attr ul li {
 margin:0;
 padding:0 3px 0 0;
 float:left;
 background:none;
 }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 jQuery(function($) {
 var slide = false;
 var height = $('#footer_content').height();
 $('#footer_button').click(function() {
 var docHeight = $(document).height();
 var windowHeight = $(window).height();
 var scrollPos = docHeight - windowHeight + height;
 $('#footer_content').animate({ height: "toggle"}, 1000);
 if(slide == false) {
 if($.browser.opera) {
 $('html').animate({scrollTop: scrollPos+'px'}, 1000);
 } else {
 $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
 }
 slide = true;
 } else {
 slide = false;
 }
 });
 });
</script>

<div></div>
<div>
 <div></div>
 <div></div>
</div>
<div>
 <div>
 <div>
 <div><h3>Recent News</h3></div>
 <ul>
 <li><a href="#">Donec accumsan malesuada orcidonec sitmet eros lorem ipsum dolor...</a></li>
 <li><a href="#">Amet incon ectetuer adipiscing maurse pharetra magna donec accumsan...</a></li>
 <li><a href="#">Malesuada orcdonec umet lorem ipsum dolorconsec tetuer malesuada...</a></li>
 </ul>
 </div>
 <div>
 <div><h3>Archives</h3></div>
 <ul>
 <li><a href="#">June, 2010</a></li>
 <li><a href="#">May, 2010</a></li>
 <li><a href="#">April, 2010</a></li>
 <li><a href="#">March, 2010</a></li>
 <li><a href="#">February, 2010</a></li>
 <li><a href="#">January, 2010</a></li>
 </ul>
 </div>
 <div>
 <div><h3>Categories</h3></div>
 <ul>
 <li><a href="#">Advertising</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Web Design</a></li>
 </ul>
 </div>

 <div>
 <div><h3>Email Us</h3></div>
 <form action="">
 <p><label for="fname">Name:</label><input type="text" /></p>
 <p><label for="femail">E-mail:</label><input type="text" /></p>
 <p><textarea cols="5" rows="3"></textarea></p>
 <p><input type="submit" value="Submit" /></p>
 </form>
 </div>
 <div></div>
 </div>
</div>
<div>
 <div>
 <div>
 Copyright © 2012 • r-ednalan.blogspot.com • All rights reserved
 <span>http://r-ednalan.blogspot.com/</span>
 </div>
 <div>
 <ul>
 <li><b>Stay Connected</b></li>
 </ul>
 </div>
 <div></div>
 </div>
</div>

other source : http://bbc.co.uk, http://tutorial101.blogspot.com, http://youtube.com

Posted by Unknown