homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Setting jQuery and floating footer
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4588154 posted 11:45 am on Jun 27, 2013 (gmt 0)

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>



 

DrDoc

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



 
Msg#: 4588154 posted 3:59 pm on Jun 27, 2013 (gmt 0)

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;
}

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4588154 posted 8:26 am on Jun 28, 2013 (gmt 0)

I need jQuery working as there should be nice transition to bottom, toogle effect, position effect. Why is jQuery not working?

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4588154 posted 11:01 am on Jun 28, 2013 (gmt 0)

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

should that be the other way around ? or unconditional maybe ?

DrDoc

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



 
Msg#: 4588154 posted 6:59 pm on Jul 2, 2013 (gmt 0)

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?

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4588154 posted 9:13 am on Jul 22, 2013 (gmt 0)

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>

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4588154 posted 11:37 pm on Jul 22, 2013 (gmt 0)

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>

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4588154 posted 7:51 am on Jul 24, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved