My Easy way to make "Sticky Footers" with CSS. - GoFuckYourself.com

sortie · 10-19-2010, 12:12 PM

I saw someone asking for this in the hiring section, but it's so easy that I will
post my code to do it here.

This is an easy way to make those footers that always float at the bottom of
your webpage even when the surfer scrolls like on youtube when viewing your playlist.

This is the "framework" code. Just place your footer HTML inside the DIV tags.

If you tried it before and it didn't work then maybe you didn't use a Doctype tag.
Internet explorer needs the Doctype for this to work.

The html for a page to do this is below and notice that the Doctype tag
comes first before the HTML tag.

Also note that if you have javascript/css doing things on your web page then
this Doctype tag can change the way these things work in some cases, so
you need to re-check everything to make sure it still works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.pos_fixed
{
position:fixed;
bottom:0px;
right:0px;
}
</style>
</head>
<body bgcolor=black text=white>

<br>data data data data<br>

<br>data data data data<br>

<div class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>
</div>

</body>
</html>

That's it; the key to this is in the CSS style sheet :

You must set the position to "fixed".
Then you must set the x and y position of the DIV tag using "bottom:" and "right:"
(you could alternatively use "top:" and "left:").

In the above "bottom:0px" means : place the Div data at position of zero pixels from the
bottom.

"right:0px" means place the Div data at position of zero pixels from the right.

You can use positive or negative numbers also like "bottom:-10px";

Play with it because it works kind of opposite of what some might think.

Verbal · 10-19-2010, 12:16 PM

Very cool sir, I thank you!

CaptainWolfy · 10-19-2010, 12:52 PM

tnx for sharing mate!

sortie · 10-19-2010, 02:29 PM

More advanced :

Add a toggle switch :

This is used if you want to allow the surfer to remove the footer but be able to
pull it back up.

- First add "id=footer" to the DIV tag from above post
- then add the code highlighted code below under the DIV tag

<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>

</div>

<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
mytog=0;
}
}
</script>
<span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();">^^</span>

Use a gif or jpg image in the "footerbutton" span tag instead of the up arrows for a better looking button.

.

JD · 10-19-2010, 02:36 PM

good stuff

bns666 · 10-19-2010, 02:58 PM

appreciated info

woj · 10-19-2010, 03:00 PM

put up a demo?

sortie · 10-19-2010, 03:12 PM

Quote:

Originally Posted by woj

put up a demo?

Ok.

This is the code above and what it does :

http://ooaz.com/gfy/gfytest.html

Of course this is just the "framework"; all kinds of stuff can go into the footer but
putting a lot of stuff in sample code makes it more confusing.

Ethersync · 10-19-2010, 03:14 PM

Quote:

Originally Posted by sortie

Ok.

This is the code above and what it does :

http://ooaz.com/gfy/gfytest.html

Of course this is just the "framework"; all kinds of stuff can go into the footer but
putting a lot of stuff in sample code makes it more confusing.

Very cool. Thanks for sharing.

alias · 10-19-2010, 03:16 PM

Welcome back!

u-Bob · 10-19-2010, 03:18 PM

thnx

Domain Broker · 10-19-2010, 03:18 PM

not happy with the freebie.

Tempest · 10-19-2010, 03:19 PM

Quote:

Originally Posted by sortie

More advanced :

Add a toggle switch :

This is used if you want to allow the surfer to remove the footer but be able to
pull it back up.

- First add "id=footer" to the DIV tag from above post
- then add the code highlighted code below under the DIV tag

<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>

</div>

<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
mytog=0;
}
}
</script>
<span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();">^^</span>

Use a gif or jpg image in the "footerbutton" span tag instead of the up arrows for a better looking button.

.

Instead of saving the contents and replacing it, why not just hide it? i.e. document.getElementById("footer").style.display="n one";

scouser · 10-19-2010, 03:20 PM

position:fixed doesn't work well in ie... http://www.quirksmode.org/css/contents.html

sortie · 10-19-2010, 03:31 PM

OK, now toggle the look of your button :

- You need to first move the "footerbutton" span tag above the script.
( it must be defined in your browser before the script can access it to load the
first button)

- I can delete the up arrows from the span tag since the script now loads it

- Now add the aqua colored line of code to the same script as above.

<span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();"></span>

<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "X";

function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "^^";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "X";
mytog=0;
}
}
</script>

I updated the demo to show this : http://ooaz.com/gfy/gfytest.html

To use an images instead of "X" and "^^"

Just change this "

document.getElementById("footerbutton").innerHTML = "X";

to this :

document.getElementById("footerbutton").innerHTML = "<img src=/images/closebutton.jpg border=0>";

And change this :

document.getElementById("footerbutton").innerHTML = "X";

To this :

document.getElementById("footerbutton").innerHTML = "<img src=/images/showbutton.jpg border=0>";

* making sure that any quotes in the HTML are single quotes, because double quotes
are already used. (this is interchangeable)

Renzo · 10-19-2010, 03:36 PM

hi,

thanks for the tutorial.
do i need xhtml doctype in order to get this work?

sortie · 10-19-2010, 03:38 PM

Quote:

Originally Posted by Tempest

Instead of saving the contents and replacing it, why not just hide it? i.e. document.getElementById("footer").style.display="n one";

Because I did it the way that I thought would make it easier to understand.
I mean, why not just embed it in a document.write for that matter and confuse the
hell out of everybody.

Or why not do an xmlHTTP request to get it and hide it altogether.
And also, why put the javascript there when I can load it dynamically from a .js file.

Or why not just do it in a flash object.

Or..

Or..

Or why not just fucking do it and be done.

IllTestYourGirls · 10-19-2010, 03:40 PM

This great thanks. Do you have any ideas on making a facebook type footer?

Inter-Sex · 10-19-2010, 03:45 PM

Quote:

Originally Posted by sortie

Or why not just fucking do it and be done.

Off Topic : Thats what i've mailed Chris serveral times, but not any response.

On Toppic : Very cool Sortie, sure a lot gonna use it. I'm gonna give it also a shot at some sites.

sortie · 10-19-2010, 03:45 PM

Quote:

Originally Posted by Renzo

hi,

thanks for the tutorial.
do i need xhtml doctype in order to get this work?

You need the Doctype I posted above or it will not work in internet explorer.

There may be another Doctype that works but that's the one I know works
for sure.

sortie · 10-19-2010, 03:49 PM

Quote:

Originally Posted by deadmoon

position:fixed doesn't work well in ie... http://www.quirksmode.org/css/contents.html

Yeah, that's why you have to add the correct Doctype as stated above.

rogueteens · 10-19-2010, 04:01 PM

excellent

if i could rep, you'd have some.

Renzo · 10-19-2010, 04:42 PM

changing the doctype can have a massive impact. check w3c validator to see if it works with your code.
Anybody tested with html 4.01 doctype?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

CYF · 10-19-2010, 04:51 PM

nice stuff, thanks for sharing

sortie · 10-19-2010, 05:00 PM

OK, lets move on to putting something in the footer and using images for the buttons.

- replace the text in the Div tag with HTML.
I'm putting a table there with images that link to pages.

- I'm going to use a gif for the close button that is the same height
as my other images in the table. The close gif has a red x box at top and is
clear at the bottom so that it will line up in the top right.

- I'm going to use a gif for the openbutton but it will not be as big as the
other images which will make it appear to shrink down when clicked.

- I nolonger want the back ground color etc for the button so I removed that
for the style element of the footerbutton span tag.

- now change the "X" and "^^" in the previous code to the proper image tags :

change this :
document.getElementById("footerbutton").innerHTML = "X"

to this :

document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";

change this :
document.getElementById("footerbutton").innerHTML = "^^"

to this :

document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>";

DEMO : http://ooaz.com/gfy/gfytest002.html

Here is the new code :

<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>

<table width=100% bgcolor=orange border=0 cellspacing=0 cellpadding=0 style="border:solid silver 1px;">
<tr>
<td><a href=/><img src=/logo01.jpg border=0></a></td>
<td><a href=/ooaz/poker.html><img src=/pokerbut.jpg border=0></a></td>

<td><a href=/ooaz/blackjack.html><img src=/blackjackbut.jpg border=0></a></td>
<td><a href=/ooaz/lucky7.html><img src=/lucky7but.jpg border=0></a></td>
<td><a href=/ooaz/wheeloff.html><img src=/wheeloffbut.jpg border=0></a></td>

</tr>
</table>

</center>

</div>

<span id=footerbutton style="position:fixed;right:0px;bottom:0px;" onClick="footexpand();"></span>
<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";

function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";
mytog=0;
}
}
</script>

</body>
</html>

Juicy D. Links · 10-19-2010, 05:02 PM

put my face in the demo , lolol

sortie · 10-19-2010, 05:05 PM

Quote:

Originally Posted by Renzo

changing the doctype can have a massive impact. check w3c validator to see if it works with your code.
Anybody tested with html 4.01 doctype?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Yes, they need to check their code when changing the Doctype.

I felt it was worth changing a few scripts on my site to work with the new
Doctype especially since having a doctype might help in SEO(don't know, just guessing)

minicivan · 10-19-2010, 05:23 PM

Dude this is fucking awesome - I was looking for similar tutorials the other day. Thanks man.

Sharky · 10-19-2010, 06:15 PM

Great post. This is what webmaster boards used to be.. helping eachother. I can't + rep you, but I hope others will!

NaughtyRob · 10-19-2010, 06:29 PM

Good way to put ad banners that the surfer can close if they are annoyed. I like it.

sortie · 10-19-2010, 06:47 PM

Ok, Let's add just one more thing and call it quits :

Instead of having links to my games in my footer, I'm just going to have the
game load on that page when the surfer mouses over the game name image in the
footer.

- I need a container for the game so I add an empty span tag :

<span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span>

I fixed the position and set the z-index to 1 so the game will show on top of the
other content on the page.

- I add a script called loadgame and it will receive a parameter named thisgame
whenever a game image is moused over.

- I will set the innerHTML of gameholder to equal embed code, but will have the game name
replaced with the parameter named thisgame.

this part sucks : your html will have to be concatenated for each line of code; meaning
you must put the + sign at the end of each line.
The entire html code must be enclosed in single quotes(can't conflict with double quotes)

Also the parameter named thisgame must be outside of all quotes so that it is recognized
as a variable and will be replaced with the correct game name.

Example :

this code :

<tag something="something"></tag>
<tag another="thisgame"></tag>

Becomes this :

'<tag something="something"></tag>' +
'<tag another="' + thisgame + '"></tag>'

* Note the tiny yellow single quotes in the interior!!!!!!!

- now add the mouseover code to each image in the footer like this
<img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')">

- I want a button to close the game so I use my same close button and add this
code to the innerHTML for the gameholder :

<img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();">

DEMO : http://ooaz.com/gfy/gfytest003.html

Here's the new code : (board changed ":" and "D" to smile with glasses in classid)

<script type="text/javascript">
var thisgame = "";
function loadgame(thisgame) {

document.getElementById("gameholder").innerHTML =
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '+
'id=test width=768 height=346 '+
'codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=7,0,0,0"> '+
'<param name="movie" value="/ooaz/' + thisgame + '"> '+
'<param name="quality" value="high"> '+
' <param name="play" value="true"> '+
' <param name="loop" value="true"> '+
' <param name="allowfullscreen" value="true"> '+
'<param name="bgcolor" value="#000000"> '+
'<embed src="/ooaz/' + thisgame + '" '+
'width=768 height=346 bgcolor="#000000" quality="high" loop="true" allowfullscreen="true" '+
'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/"> '+
'</EMBED> '+
'</OBJECT> <img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();">';

}
function gameout() {
document.getElementById("gameholder").innerHTML = "";

}
</script>

<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>

<table width=100% bgcolor=orange border=0 cellspacing=0 cellpadding=0 style="border:solid silver 1px;">
<tr>
<td><a href=/><img src=/logo01.jpg border=0></a></td>
<td><a href=/ooaz/poker.html><img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')"></td>

<td><img src=/blackjackbut.jpg border=0 onmouseover="loadgame('blackjack.swf')"></td>
<td><img src=/lucky7but.jpg border=0 onmouseover="loadgame('lucky7.swf')"></td>
<td><img src=/wheeloffbut.jpg border=0 onmouseover="loadgame('wheeloff.swf')"></td>

</tr>
</table>

</center>

</div>

<span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span>

<span id=footerbutton style="position:fixed;right:0px;bottom:0px;" onClick="footexpand();"></span>
<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";

function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";
mytog=0;
}
}
</script>

Well that was kind of fun; especially since I made that up as I went along.

This would have been better if I had planned it and made better graphics etc but
I hope it works for you.

sortie · 10-19-2010, 07:32 PM

Quote:

Originally Posted by IllTestYourGirls

This great thanks. Do you have any ideas on making a facebook type footer?

Sorry I missed your question.

I haven't joined facebook so I don't know what their footer does.

Chances are pretty good that I could make one though.

potter · 10-19-2010, 09:18 PM

Giving a DIV tag 100% width?

And using CENTER tags?

And using PX for 0 attributes?

And not using JQUERY for the scripting?

The CSS for the div should be:

Code:

.whateverclass{
position:fixed;
z-index:99999999; /* only needed if you have other positioned elements on the page */
left:0;
bottom:0
}

You div would be

Code:

<div class="whateverclass">HTML HERE</div>

Then, us jquery for the hide/show

Code:

<script>
$('.closeclass').click(function() {
  $('.whateverclass').hide();
  $('.showclass').show();
});

$('.showclass').click(function() {
  $('.whateverclass').show();
  $('.showclass').hide();
});
</script>

.whateverclass = the fixed div
.closeclass = the link to close the fixed div
.showclass = the link to reshow the fixed div

clicking the .closeclass link hides the fixed div, and it shows the reshow link. and then clicking the reshow link shows the fixed div and hides the reshow link.

So you'd also have these two links somewhere on your page (obviously don't put the reshow link in the fixed div, because it wouldn't be visible unless the div was as well.

Code:

<a href="" class="closeclass">close</a>
<a href="" class="showclass">show</a>

didn't mean to piss in your cheereos here but the code you posted is some seriously bloated and out of date load of html.

sortie · 10-19-2010, 11:32 PM

potter's code :

Quote:

Originally Posted by potter

whateverclass{
position:fixed;
z-index:99999999; /* only needed if you have other positioned elements on the page */
left:0;
bottom:0
}

<div class="whateverclass">HTML HERE</div>

<script>
$('.closeclass').click(function() {
$('.whateverclass').hide();
$('.showclass').show();
});

$('.showclass').click(function() {
$('.whateverclass').show();
$('.showclass').hide();
});
</script>
<a href="" class="closeclass">close</a>
<a href="" class="showclass">show</a>[/code]

My code :

Quote:

Originally Posted by me

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.pos_fixed
{
position:fixed;
bottom:0px;
right:0px;
}
</style>
<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>This is the footer that does not scroll. Place any HTML you like here.</center>
</div>
<span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();"></span>
<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "X";
function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "^^";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "X";
mytog=0;
}
}
</script>

Anyone can copy my code quoted above and it will work with nothing else added.
Try it. Your code cannot be copied into a webpage and work as is and needs a
175k library called jquery to execute. So how are you using "less code"?

You didn't write any code to position the hide/show links.
When the surfer scrolls he'll have to scroll back the other way to click your
hide/show links.

Why are you using anchor tags if the surfer isn't going any fucking where?

Both your hide and show links are visible the whole time.
My hide/show buttons toggle.

You forgot to put your style sheet inside a style tag.

z-index:999999???? Only if you don't know what's on your own web page.

You use the script tag without specifying the script type.

Your code doesn't even work unless you use use the jquery library, but
my code is self contained, freestanding and works in all browsers.
Anybody can use my code without doing anything extra.

You didn't include the code to access jquery in your example :
(<script type="text/javascript" src="jquery.js"></script>)

Also of note is that you say my code is out of date, but my code is exactly the same javascript as what's inside of jquery.
So jquery code is out of date too I guess.

Here is the latest jquery source code : (all 175K of it

)

http://ooaz.com/gfy/jquery-latest.txt

Jquery is for people who need help writing javascript code.

And last but not least, you didn't bother to make a better tutorial, just
sitting there all day trying to pick other people's code apart.
And you failed at that.

My conclusion is that jealousy sucks dude. Get a life.

fris · 10-20-2010, 12:23 AM

here is a good example

http://fris.net/labs/sticky/

plsureking · 10-20-2010, 12:27 AM

save yourself the trouble:
http://www.wibiya.com/

fris · 10-20-2010, 12:27 AM

Quote:

Originally Posted by NaughtyRob

Good way to put ad banners that the surfer can close if they are annoyed. I like it.

this jquery plugin is good for that

http://meerkat.jarodtaylor.com/demo/basic-usage/

2012 · 10-20-2010, 12:33 AM

excellent work sir, your CSS is fun to read

sortie · 10-20-2010, 12:49 AM

Quote:

Originally Posted by fris

here is a good example

http://fris.net/labs/sticky/

I like that.

Keep in mind that this thread was only meant to show a very easy way to do it yourself.

I had no plans to even add any code beside the first post and did the rest on the fly.

I'm not trying to sell this.

Question : Does using jquery take more bandwidth since it's "src"ed in?
Answer : yes.

So the webmaster is paying for using jquery instead of the small amount of code I use.

They are serving up 175k of jquery code for every surfer but probably only
using 2k of the 175k to actually do anything.

Some people pull jquery from google to save bandwidth.

http://perishablepress.com/press/200...libraries-api/

sortie · 10-20-2010, 12:50 AM

Quote:

Originally Posted by 2012

excellent work sir, your CSS is fun to read

WTF!!

Paul&John · 10-20-2010, 01:13 AM

Looks awesome, thanks for sharing

Zorgman · 10-20-2010, 06:07 AM

I tried this for my iphone website but the bottom is only on the first page. Might there be a fix for that?

selena · 10-20-2010, 07:15 AM

Bookmarking thread for future use. I would give you rep if I could, and I think rep is stupid. ;)

Much thanks!

docputer · 10-20-2010, 07:25 AM

Thank you. As others have said, if I could give you rep, you would have some more.

dready · 10-20-2010, 07:59 AM

Great post!

NaughtyRob · 10-20-2010, 09:30 AM

Very nice.

Quote:

Originally Posted by fris

here is a good example

http://fris.net/labs/sticky/

Dirty Dane · 10-20-2010, 09:46 AM

div id with position:absolute works too.

In CSS:

body {margin: 0;}
#bottom {position:absolute; width:100%; bottom:0;}

In HTML:

<div id="bottom"> your spam here </div>

The absolute will ignore other elements.

IllTestYourGirls · 10-20-2010, 09:55 AM

Quote:

Originally Posted by fris

here is a good example

http://fris.net/labs/sticky/

I would love something like this.

sortie · 10-20-2010, 11:26 AM

Quote:

Originally Posted by Zorgman

I tried this for my iphone website but the bottom is only on the first page. Might there be a fix for that?

Maybe I don't quite get what you are asking because the code only
works on the page that it is on; so clicking to the second page will
mean the bottom is not there unless you add the code to that page.

Package the script and html elements in a .js file then rel link to .js on
all pages you want the bottom.

Doing that in this example would have been too confusing I think.

tonyparra · 10-20-2010, 04:45 PM

Fresh off bannage with already more rep than me

10-19-2010, 12:12 PM	#1
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	My Easy way to make "Sticky Footers" with CSS. I saw someone asking for this in the hiring section, but it's so easy that I will post my code to do it here. This is an easy way to make those footers that always float at the bottom of your webpage even when the surfer scrolls like on youtube when viewing your playlist. This is the "framework" code. Just place your footer HTML inside the DIV tags. If you tried it before and it didn't work then maybe you didn't use a Doctype tag. Internet explorer needs the Doctype for this to work. The html for a page to do this is below and notice that the Doctype tag comes first before the HTML tag. Also note that if you have javascript/css doing things on your web page then this Doctype tag can change the way these things work in some cases, so you need to re-check everything to make sure it still works. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> .pos_fixed { position:fixed; bottom:0px; right:0px; } </style> </head> <body bgcolor=black text=white> <br>data data data data<br> <br>data data data data<br> <div class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;"> <center>This is the footer that does not scroll. Place any HTML you like here.</center> </div> </body> </html> That's it; the key to this is in the CSS style sheet : You must set the position to "fixed". Then you must set the x and y position of the DIV tag using "bottom:" and "right:" (you could alternatively use "top:" and "left:"). In the above "bottom:0px" means : place the Div data at position of zero pixels from the bottom. "right:0px" means place the Div data at position of zero pixels from the right. You can use positive or negative numbers also like "bottom:-10px"; Play with it because it works kind of opposite of what some might think. __________________

10-19-2010, 02:29 PM	#4
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	More advanced : Add a toggle switch : This is used if you want to allow the surfer to remove the footer but be able to pull it back up. - First add "id=footer" to the DIV tag from above post - then add the code highlighted code below under the DIV tag <div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;"> <center>This is the footer that does not scroll. Place any HTML you like here.</center> </div> <script type="text/javascript"> var mytog = 0; var putback = document.getElementById("footer").innerHTML; function footexpand() { if (mytog == 0) { document.getElementById("footer").innerHTML = ""; mytog=1; } else { document.getElementById("footer").innerHTML = putback; mytog=0; } } </script> <span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();">^^</span> Use a gif or jpg image in the "footerbutton" span tag instead of the up arrows for a better looking button. . __________________

10-19-2010, 02:58 PM	#6
bns666 Confirmed Fetishist Industry Role: Join Date: Mar 2005 Location: Fetishland Posts: 11,525	appreciated info __________________ ⭐ CAM SODA ⭐ STRIPCHAT ⭐ ⭐ CHATURBATE ⭐ X LOVE CAM ⭐

10-19-2010, 03:00 PM	#7
woj <&(©¿©)&> Industry Role: Join Date: Jul 2002 Location: Chicago Posts: 47,882	put up a demo? __________________ Custom Software Development, email: woj#at#wojfun#.#com to discuss details or skype: wojl2000 or gchat: wojfun or telegram: wojl2000 Affiliate program tools: Hosted Galleries Manager Banner Manager Video Manager Wordpress Affiliate Plugin Pic/Movie of the Day Fansign Generator Zip Manager

10-19-2010, 03:16 PM	#10
alias aliasx Join Date: Apr 2001 Posts: 19,010	Welcome back! __________________ https://porncorporation.com

10-19-2010, 12:16 PM	#2
Verbal Confirmed User Join Date: Dec 2001 Location: Tampa, FL Posts: 3,420	Very cool sir, I thank you!

10-19-2010, 12:52 PM	#3
CaptainWolfy Playa Industry Role: Join Date: Dec 2005 Location: Somewhere on the Earth Posts: 8,439	tnx for sharing mate!

10-19-2010, 02:36 PM	#5
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	good stuff

10-19-2010, 03:18 PM	#11
u-Bob there's no $$$ in porn Industry Role: Join Date: Jul 2005 Location: icq: 195./568.-230 (btw: not getting offline msgs) Posts: 33,063	thnx

10-19-2010, 03:18 PM	#12
Domain Broker So Fucking Banned Industry Role: Join Date: Oct 2004 Posts: 2,427	not happy with the freebie.

10-19-2010, 03:20 PM	#14
scouser marketer. Industry Role: Join Date: Aug 2006 Location: bcn Posts: 2,280	position:fixed doesn't work well in ie... http://www.quirksmode.org/css/contents.html

10-19-2010, 03:31 PM	#15
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	OK, now toggle the look of your button : - You need to first move the "footerbutton" span tag above the script. ( it must be defined in your browser before the script can access it to load the first button) - I can delete the up arrows from the span tag since the script now loads it - Now add the aqua colored line of code to the same script as above. <span id=footerbutton style="position:fixed;right:0px;bottom:0px;backgro und-color:blue;border:solid red 1px;" onClick="footexpand();"></span> <script type="text/javascript"> var mytog = 0; var putback = document.getElementById("footer").innerHTML; document.getElementById("footerbutton").innerHTML = "X"; function footexpand() { if (mytog == 0) { document.getElementById("footer").innerHTML = ""; document.getElementById("footerbutton").innerHTML = "^^"; mytog=1; } else { document.getElementById("footer").innerHTML = putback; document.getElementById("footerbutton").innerHTML = "X"; mytog=0; } } </script> I updated the demo to show this : http://ooaz.com/gfy/gfytest.html To use an images instead of "X" and "^^" Just change this " document.getElementById("footerbutton").innerHTML = "X"; to this : document.getElementById("footerbutton").innerHTML = "<img src=/images/closebutton.jpg border=0>"; And change this : document.getElementById("footerbutton").innerHTML = "X"; To this : document.getElementById("footerbutton").innerHTML = "<img src=/images/showbutton.jpg border=0>"; * making sure that any quotes in the HTML are single quotes, because double quotes are already used. (this is interchangeable) __________________

10-19-2010, 03:36 PM	#16
Renzo Confirmed User Industry Role: Join Date: Feb 2001 Location: Europe Posts: 129	hi, thanks for the tutorial. do i need xhtml doctype in order to get this work?

10-19-2010, 03:40 PM	#18
IllTestYourGirls Ah My Balls Industry Role: Join Date: Feb 2007 Location: Under the gold leaf ICQ 388-454-421 Posts: 14,311	This great thanks. Do you have any ideas on making a facebook type footer? __________________

10-19-2010, 04:01 PM	#22
rogueteens So fucking bland Industry Role: Join Date: Jul 2006 Location: England Posts: 8,005	excellent if i could rep, you'd have some. __________________ Free traffic and backlinks from one of the fastest growing adult pinsites on the net - SAUCY PICTURES! Easily my best performing webcam sponsor - CLICK HERE!!

10-19-2010, 04:42 PM	#23
Renzo Confirmed User Industry Role: Join Date: Feb 2001 Location: Europe Posts: 129	changing the doctype can have a massive impact. check w3c validator to see if it works with your code. Anybody tested with html 4.01 doctype? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

10-19-2010, 04:51 PM	#24
CYF Coupon Guru Industry Role: Join Date: Mar 2009 Location: Minneapolis Posts: 10,973	nice stuff, thanks for sharing __________________ Webmaster Coupons Coupons and discounts for hosting, domains, SSL Certs, and more! AmeriNOC Coupons \| Certified Hosting Coupons \| Hosting Coupons \| Domain Name Coupons

10-19-2010, 05:00 PM	#25
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	OK, lets move on to putting something in the footer and using images for the buttons. - replace the text in the Div tag with HTML. I'm putting a table there with images that link to pages. - I'm going to use a gif for the close button that is the same height as my other images in the table. The close gif has a red x box at top and is clear at the bottom so that it will line up in the top right. - I'm going to use a gif for the openbutton but it will not be as big as the other images which will make it appear to shrink down when clicked. - I nolonger want the back ground color etc for the button so I removed that for the style element of the footerbutton span tag. - now change the "X" and "^^" in the previous code to the proper image tags : change this : document.getElementById("footerbutton").innerHTML = "X" to this : document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>"; change this : document.getElementById("footerbutton").innerHTML = "^^" to this : document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>"; DEMO : http://ooaz.com/gfy/gfytest002.html Here is the new code : <div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;"> <center> <table width=100% bgcolor=orange border=0 cellspacing=0 cellpadding=0 style="border:solid silver 1px;"> <tr> <td><a href=/><img src=/logo01.jpg border=0></a></td> <td><a href=/ooaz/poker.html><img src=/pokerbut.jpg border=0></a></td> <td><a href=/ooaz/blackjack.html><img src=/blackjackbut.jpg border=0></a></td> <td><a href=/ooaz/lucky7.html><img src=/lucky7but.jpg border=0></a></td> <td><a href=/ooaz/wheeloff.html><img src=/wheeloffbut.jpg border=0></a></td> </tr> </table> </center> </div> <span id=footerbutton style="position:fixed;right:0px;bottom:0px;" onClick="footexpand();"></span> <script type="text/javascript"> var mytog = 0; var putback = document.getElementById("footer").innerHTML; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>"; function footexpand() { if (mytog == 0) { document.getElementById("footer").innerHTML = ""; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>"; mytog=1; } else { document.getElementById("footer").innerHTML = putback; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>"; mytog=0; } } </script> </body> </html> __________________

10-19-2010, 05:02 PM	#26
Juicy D. Links So Fucking Banned Industry Role: Join Date: Apr 2001 Location: N.Y. -Long Island -- Posts: 122,992	put my face in the demo , lolol

10-19-2010, 05:23 PM	#28
minicivan Confirmed User Join Date: Jun 2007 Posts: 943	Dude this is fucking awesome - I was looking for similar tutorials the other day. Thanks man.

10-19-2010, 06:15 PM	#29
Sharky Confirmed User Industry Role: Join Date: Mar 2002 Location: Tampa, FL Posts: 4,938	Great post. This is what webmaster boards used to be.. helping eachother. I can't + rep you, but I hope others will! __________________ Sharky

10-19-2010, 06:29 PM	#30
NaughtyRob Two fresh affiliate progs Industry Role: Join Date: Nov 2004 Location: Inside teen pussy Posts: 29,602	Good way to put ad banners that the surfer can close if they are annoyed. I like it. __________________ [email protected] Skype: 17026955414 Vacares Web Hosting - Protect Your Ass with Included Daily Backups

10-19-2010, 06:47 PM	#31
sortie Confirmed User Industry Role: Join Date: Mar 2007 Posts: 7,771	Ok, Let's add just one more thing and call it quits : Instead of having links to my games in my footer, I'm just going to have the game load on that page when the surfer mouses over the game name image in the footer. - I need a container for the game so I add an empty span tag : <span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span> I fixed the position and set the z-index to 1 so the game will show on top of the other content on the page. - I add a script called loadgame and it will receive a parameter named thisgame whenever a game image is moused over. - I will set the innerHTML of gameholder to equal embed code, but will have the game name replaced with the parameter named thisgame. this part sucks : your html will have to be concatenated for each line of code; meaning you must put the + sign at the end of each line. The entire html code must be enclosed in single quotes(can't conflict with double quotes) Also the parameter named thisgame must be outside of all quotes so that it is recognized as a variable and will be replaced with the correct game name. Example : this code : <tag something="something"></tag> <tag another="thisgame"></tag> Becomes this : '<tag something="something"></tag>' + '<tag another="' + thisgame + '"></tag>' * Note the tiny yellow single quotes in the interior!!!!!!! - now add the mouseover code to each image in the footer like this <img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')"> - I want a button to close the game so I use my same close button and add this code to the innerHTML for the gameholder : <img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();"> DEMO : http://ooaz.com/gfy/gfytest003.html Here's the new code : (board changed ":" and "D" to smile with glasses in classid) <script type="text/javascript"> var thisgame = ""; function loadgame(thisgame) { document.getElementById("gameholder").innerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '+ 'id=test width=768 height=346 '+ 'codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=7,0,0,0"> '+ '<param name="movie" value="/ooaz/' + thisgame + '"> '+ '<param name="quality" value="high"> '+ ' <param name="play" value="true"> '+ ' <param name="loop" value="true"> '+ ' <param name="allowfullscreen" value="true"> '+ '<param name="bgcolor" value="#000000"> '+ '<embed src="/ooaz/' + thisgame + '" '+ 'width=768 height=346 bgcolor="#000000" quality="high" loop="true" allowfullscreen="true" '+ 'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/"> '+ '</EMBED> '+ '</OBJECT> <img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();">'; } function gameout() { document.getElementById("gameholder").innerHTML = ""; } </script> <div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;"> <center> <table width=100% bgcolor=orange border=0 cellspacing=0 cellpadding=0 style="border:solid silver 1px;"> <tr> <td><a href=/><img src=/logo01.jpg border=0></a></td> <td><a href=/ooaz/poker.html><img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')"></td> <td><img src=/blackjackbut.jpg border=0 onmouseover="loadgame('blackjack.swf')"></td> <td><img src=/lucky7but.jpg border=0 onmouseover="loadgame('lucky7.swf')"></td> <td><img src=/wheeloffbut.jpg border=0 onmouseover="loadgame('wheeloff.swf')"></td> </tr> </table> </center> </div> <span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span> <span id=footerbutton style="position:fixed;right:0px;bottom:0px;" onClick="footexpand();"></span> <script type="text/javascript"> var mytog = 0; var putback = document.getElementById("footer").innerHTML; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>"; function footexpand() { if (mytog == 0) { document.getElementById("footer").innerHTML = ""; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>"; mytog=1; } else { document.getElementById("footer").innerHTML = putback; document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>"; mytog=0; } } </script> Well that was kind of fun; especially since I made that up as I went along. This would have been better if I had planned it and made better graphics etc but I hope it works for you. __________________ Last edited by sortie; 10-19-2010 at 06:50 PM..

10-19-2010, 09:18 PM	#33
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	Giving a DIV tag 100% width? And using CENTER tags? And using PX for 0 attributes? And not using JQUERY for the scripting? The CSS for the div should be: Code: .whateverclass{ position:fixed; z-index:99999999; /* only needed if you have other positioned elements on the page */ left:0; bottom:0 } You div would be Code: <div class="whateverclass">HTML HERE</div> Then, us jquery for the hide/show Code: <script> $('.closeclass').click(function() { $('.whateverclass').hide(); $('.showclass').show(); }); $('.showclass').click(function() { $('.whateverclass').show(); $('.showclass').hide(); }); </script> .whateverclass = the fixed div .closeclass = the link to close the fixed div .showclass = the link to reshow the fixed div clicking the .closeclass link hides the fixed div, and it shows the reshow link. and then clicking the reshow link shows the fixed div and hides the reshow link. So you'd also have these two links somewhere on your page (obviously don't put the reshow link in the fixed div, because it wouldn't be visible unless the div was as well. Code: <a href="" class="closeclass">close</a> <a href="" class="showclass">show</a> didn't mean to piss in your cheereos here but the code you posted is some seriously bloated and out of date load of html. __________________

10-20-2010, 12:23 AM	#35
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,356	here is a good example http://fris.net/labs/sticky/ __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

10-20-2010, 12:27 AM	#36
plsureking bored Industry Role: Join Date: Aug 2003 Location: Metaverse Posts: 4,677	save yourself the trouble: http://www.wibiya.com/ __________________ #

10-20-2010, 12:33 AM	#38
2012 So Fucking What Industry Role: Join Date: Jul 2006 Posts: 17,189	excellent work sir, your CSS is fun to read

10-20-2010, 01:13 AM	#41
Paul&John Confirmed User Industry Role: Join Date: Aug 2005 Location: YUROP Posts: 8,601	Looks awesome, thanks for sharing __________________ Use coupon 'pauljohn' for a $1 discount at already super cheap NameSilo! Anal Webcams \| Kinky Trans Cams Live \| Hotwife XXX Tube \| Get your Proxies here

10-20-2010, 06:07 AM	#42
Zorgman Confirmed User Join Date: Aug 2002 Location: Sydney, Australia Posts: 6,103	I tried this for my iphone website but the bottom is only on the first page. Might there be a fix for that? __________________ ---

10-20-2010, 07:15 AM	#43
selena Confirmed User Join Date: Aug 2004 Location: On The Edge Posts: 7,992	Bookmarking thread for future use. I would give you rep if I could, and I think rep is stupid. ;) Much thanks! __________________ ~ Doer of Things at MetArtMoney Where Flawless Beauty Meets Art ~The MetArt Network ~ selena.delgado9

10-20-2010, 07:25 AM	#44
docputer Confirmed User Industry Role: Join Date: Jun 2006 Posts: 1,103	Thank you. As others have said, if I could give you rep, you would have some more.

10-20-2010, 07:59 AM	#45
dready Confirmed User Industry Role: Join Date: Oct 2002 Location: Toronto, ON Posts: 5,247	Great post! __________________ ICQ: 91139591

10-20-2010, 09:46 AM	#47
Dirty Dane Sick Fuck Industry Role: Join Date: Feb 2004 Location: www Posts: 9,491	div id with position:absolute works too. In CSS: body {margin: 0;} #bottom {position:absolute; width:100%; bottom:0;} In HTML: <div id="bottom"> your spam here </div> The absolute will ignore other elements. Last edited by Dirty Dane; 10-20-2010 at 09:48 AM..

10-20-2010, 04:45 PM	#50
tonyparra Confirmed User Industry Role: Join Date: Jul 2008 Location: In your back seat with duck tape Posts: 4,568	Fresh off bannage with already more rep than me __________________ High Performance Vps $10 Linode Manage your Digital Ocean, Linode, or Favorite Cloud Server. Simple, fast, and secure Server Pilot