homepage Welcome to WebmasterWorld Guest from 54.166.123.2
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




msg:4588156
 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




msg:4588209
 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




msg:4588423
 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




msg:4588447
 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




msg:4589658
 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




msg:4595265
 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




msg:4595546
 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




msg:4595995
 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