Copy & paste the code below to embed this comment.
Will Rickards
Thanks for the second part, that is just what I needed for a project I’m working on. I now am able to keep the form’s reset and submit buttons in the viewport while the user scrolls through the form. You really should put a note in the article about this and not keep it buried in the comments. At first I tried the code from the article and it didn’t appear to do anything, since the form was longer than the viewport. Then I remembered sometimes revised methods are posted in the comments and I found what worked for me:
http://www.bobbyvandersluis.com/articles/ala_footer_variation2.html
I was trying to hack this to get a floating navigation menu. While the theory is good, I don’t seem to be able to make it work in practice. (And perhaps I’m putting the elephant in the cart, coding-wise.)
Working sample is at:
http://www.hedgewizard.net/test/PA-test.htm
(and yes, I know the rest of the site is a mess… I’m working on cleaning it up.) <grin>
Copy & paste the code below to embed this comment.
Pete
I had been looking for something similiar for quite a while. As more design orientated myself, as my JS skills are limited, having a footer placed in such a manner helps the look of the site, but yes it is a headache.
Just a comment on my issue and how I resolved it for people who may come across it themselves. My content is not at the edge, it is offset by using the position absolute, and a left and top value. This posed a major issue with the script as it would obviously not see this and the footer would go over the text. If you defined a top value it would make the footer vanish completely. I tried using margins, margin-top would cause an issue too. I used (no break white space) to position it properly, which is bad obviously as a web designer! But I managed to come up with a solution, so for anyone with the same issue.. just change the following line in the function setFooter(); … var contentHeight = document.getElementById(‘content’).offsetHeight + document.getElementById(‘content’).offsetTop; … it adds the offsetTop and pronto works. Sorry post is a bit long!
Thanks again for such a great solution to a simple problem!
Copy & paste the code below to embed this comment.
david
hi,
i’m not programmer at all, just designer,
my problem is simple as possible:
i have 2 tables : the first must be center dead, the second must be footer all time and disapear behind the centering table if height not enought…
the page here :
www.portfolio360vr.com/folios/test8.htm
checked with
http://www.danvine.com/icapture/
and “ie capture” on same page..
seems good behaviors on all browser except opera…
i’ve tried way of table inside of table(old method) and your css+jscript but my knowledges with programming is very poor and if someone could help me , peep a look inside the source page to see what’s wrong with opera wich keep the footer as header
119 Reader Comments
Back to the ArticleBobby van der Sluis
To be more clear, the first point should say:
1. Apply the fixed width to the content (and footer) block instead of to the main container block
Will Rickards
Thanks for the second part, that is just what I needed for a project I’m working on. I now am able to keep the form’s reset and submit buttons in the viewport while the user scrolls through the form. You really should put a note in the article about this and not keep it buried in the comments. At first I tried the code from the article and it didn’t appear to do anything, since the form was longer than the viewport. Then I remembered sometimes revised methods are posted in the comments and I found what worked for me:
http://www.bobbyvandersluis.com/articles/ala_footer_variation2.html
Will Rickards
When trying to print it only prints the viewport contents and not the entire page. Is there a way to fix this?
Bobby van der Sluis
Will, you can customize your print-outs by using a print style sheet.
With something like:
<style type=“text/css”>
<!—
media print {<br /> #content { height: 100%; }<br /> #footer { display: none; }<br /> }<br />media screen {…current style rules…
}
—>
</style>
you should be king again.
PNDesign
MS IE is big piece of …. :-)
Grant Hogarth
I was trying to hack this to get a floating navigation menu. While the theory is good, I don’t seem to be able to make it work in practice. (And perhaps I’m putting the elephant in the cart, coding-wise.)
Working sample is at:
http://www.hedgewizard.net/test/PA-test.htm
(and yes, I know the rest of the site is a mess… I’m working on cleaning it up.) <grin>
Grant
grant@hedgewizard.net
Pete
I had been looking for something similiar for quite a while. As more design orientated myself, as my JS skills are limited, having a footer placed in such a manner helps the look of the site, but yes it is a headache.
Just a comment on my issue and how I resolved it for people who may come across it themselves. My content is not at the edge, it is offset by using the position absolute, and a left and top value. This posed a major issue with the script as it would obviously not see this and the footer would go over the text. If you defined a top value it would make the footer vanish completely. I tried using margins, margin-top would cause an issue too. I used (no break white space) to position it properly, which is bad obviously as a web designer! But I managed to come up with a solution, so for anyone with the same issue.. just change the following line in the function setFooter(); … var contentHeight = document.getElementById(‘content’).offsetHeight + document.getElementById(‘content’).offsetTop; … it adds the offsetTop and pronto works. Sorry post is a bit long!
Thanks again for such a great solution to a simple problem!
howai
Great article, but one slight glitch, when you resize the text.
Especially bad in Mozilla and Netscape, no scroll bar, when you resize the text, no way you can see footer when it moves down the page.
david
hi,
i’m not programmer at all, just designer,
my problem is simple as possible:
i have 2 tables : the first must be center dead, the second must be footer all time and disapear behind the centering table if height not enought…
the page here :
www.portfolio360vr.com/folios/test8.htm
checked with
http://www.danvine.com/icapture/
and “ie capture” on same page..
seems good behaviors on all browser except opera…
i’ve tried way of table inside of table(old method) and your css+jscript but my knowledges with programming is very poor and if someone could help me , peep a look inside the source page to see what’s wrong with opera wich keep the footer as header
thanxs for help very much appreciated