Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: open

Setting jQuery and floating footer

   
11:45 am on Jun 27, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I like to know how to set floating footer.

Is there mistake in code that jQuery does not work. How to change it?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
overflow: auto;
background-color: blue;
}
#footer {
position: absolute;
left: 0;
right: 0;
bottom: 0px;
height: 50px;
overflow: hidden;
background-color: green;
}
</style>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
jQuery(function(){
positionFooter();
function positionFooter(){
if($(document).height() < $(window).height()){
$("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"})
}
}

$(window).scroll(positionFooter);
$(window).resize(positionFooter);
});
/*]]>*/
</script>


</head>
<body>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
<div id="footer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</body>
</html>


3:59 pm on Jun 27, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There is really no need to use jQuery for this. And, no, this is not a bug in jQuery. The problem is use of
position: absolute
instead of
position: fixed
, which is what you want.

I'd ditch the jQuery snippet, and simply style your footer using CSS:
#footer { 
position: fixed;
left: 0;
right: 0;
bottom: 0px;
height: 50px;
overflow: hidden;
background-color: green;
}
8:26 am on Jun 28, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I need jQuery working as there should be nice transition to bottom, toogle effect, position effect. Why is jQuery not working?
11:01 am on Jun 28, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



if($(document).height() < $(window).height()){

should that be the other way around ? or unconditional maybe ?
6:59 pm on Jul 2, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It's not that jQuery can't "work" ... but it doesn't add anything that CSS doesn't already handle, and with better cross-browser reliability than JavaScript.

Did you try the CSS provided? Are you saying it's lacking something else that you need?
9:13 am on Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have tested good sample:
<script>
jQuery(function($){
$('#ads_banner').delay(5000).animate({"bottom":"0px"},2000);
});
</script>

How to add also close button to this script?
<a class="button_close" href="#"><img src="images/close1.png"></a>
11:37 pm on Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



You need to make the link "do something" on a click rather than "go somewhere".

<a class="button_close" href="JavaScript:void(closeAds());"><img src="images/close1.png"></a>

<script>
jQuery(function($){
$('#ads_banner').delay(5000).animate({"bottom":"0px"},2000);
});

/* Then you need a function to change the display of the ads */

function closeAds() {
$('#ads_banner').fadeOut('slow');
}
</script>
7:51 am on Jul 24, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have tested many numbers and fast/slow. It takes 3 s to close. How to set number with very fast close and fadeOut function?

function closeAds() {
$('.ads_banner').fadeOut(100);
}
This should set fast fadeOut but it takes 3 s to act and close.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month