Some pages only have a small amount of content and aesthetic reasons you'l like your page footer to extend all the way to the edge of the browser window. There are ways to do this using CSS, but this method also requires to to code your pages differently too. I like to keep the code of my pages straight forward. HTML should not be altered for styling purposes.
So I wrote a jQuery plugin to do this. See below.
(function($)
{
$.fn.extend(
{
footersizeset: function(options)
{
var defaults =
{
footertag:'footer',
ofh:100
};
options = $.extend(defaults, options);
var windowheight = $(this).height();
var footer = $(options.footertag);
var footerposition = footer.position();
var footerheight = options.ofh;
var footerbottom = footerheight + footerposition.top;
if(windowheight > footerbottom)
{
difference = windowheight - footerbottom;
footer.height(footerheight + difference);
}
}
});
})(jQuery);
Here's how to call the plugin. First you find what the height of the footer would be before the footer is reset. This is done outside all other jQuery calls so that this value doesn't keep getting reset as the browser window size changes.
Then, I make 2 calls to the plugin, once for the page load and subsequently for browser window changes.
var originalfooterheight = $('footer').height();
(function()
{
$(window).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
$(window).resize(function()
{
$(this).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
});
})();
Hope that makes sense.
Showing posts with label footer. Show all posts
Showing posts with label footer. Show all posts
Monday, 10 November 2014
Friday, 6 June 2014
jQuery sticky plugin
The jQuery plugin below allows you to name an element as a sticky header or footer. You can also set the height, width and background colour. This is similar to those available in Twitter Bootstrap and ZURB Foundation.
First the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery sticky footer</title>
<style>
body
{
font:90%/1.6 sans-serif;
}
section
{
margin-top:6em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Hello, world!</h1>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pretium velit. Morbi scelerisque vel risus sed ullamcorper. Integer nec dui vel magna malesuada tempus. Vivamus dictum elit sem, at mattis leo volutpat in. Phasellus felis metus, dapibus semper nisi non, sagittis lacinia erat. Fusce in diam et velit commodo rutrum in in dui. Sed imperdiet est non dui molestie consequat. Duis ac ipsum in purus tempor dictum. Curabitur ac neque sed sem semper congue. Pellentesque enim enim, congue sed consequat et, lobortis id tortor. Cras a faucibus sem. Mauris sed enim quam. Aenean sollicitudin posuere mauris. Curabitur sollicitudin orci orci, a sagittis neque feugiat nec.</p>
</section>
<footer>
<p>Hello footer world!</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="sticky.plugin.js"></script>
<script>
/* Example parameters
$('header').sticky(
{
position:'top',
height:'10em',
width:'50%',
background:'red'
});
*/
$('header').sticky(
{
position:'top'
});
$('footer').sticky(
{
position:'bottom'
});
</script>
</body>
</html>
Now the jQuery plugin, sticky.plugin.js
(function($)
{
$.fn.extend(
{
sticky:function(options)
{
var defaults =
{
position:'bottom',
height:'4em',
width:'100%',
background:'white'
}
var options = $.extend(defaults, options);
return this.each(function()
{
var o = options;
$(this).css('position','fixed').css('_position','absolute').css(o.position,0).css('background',o.background);
$(this).height(o.height);
$(this).width(o.width);
$(this).css('z-index', 9999);
});
}
});
})(jQuery);
First the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery sticky footer</title>
<style>
body
{
font:90%/1.6 sans-serif;
}
section
{
margin-top:6em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Hello, world!</h1>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pretium velit. Morbi scelerisque vel risus sed ullamcorper. Integer nec dui vel magna malesuada tempus. Vivamus dictum elit sem, at mattis leo volutpat in. Phasellus felis metus, dapibus semper nisi non, sagittis lacinia erat. Fusce in diam et velit commodo rutrum in in dui. Sed imperdiet est non dui molestie consequat. Duis ac ipsum in purus tempor dictum. Curabitur ac neque sed sem semper congue. Pellentesque enim enim, congue sed consequat et, lobortis id tortor. Cras a faucibus sem. Mauris sed enim quam. Aenean sollicitudin posuere mauris. Curabitur sollicitudin orci orci, a sagittis neque feugiat nec.</p>
</section>
<footer>
<p>Hello footer world!</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="sticky.plugin.js"></script>
<script>
/* Example parameters
$('header').sticky(
{
position:'top',
height:'10em',
width:'50%',
background:'red'
});
*/
$('header').sticky(
{
position:'top'
});
$('footer').sticky(
{
position:'bottom'
});
</script>
</body>
</html>
Now the jQuery plugin, sticky.plugin.js
(function($)
{
$.fn.extend(
{
sticky:function(options)
{
var defaults =
{
position:'bottom',
height:'4em',
width:'100%',
background:'white'
}
var options = $.extend(defaults, options);
return this.each(function()
{
var o = options;
$(this).css('position','fixed').css('_position','absolute').css(o.position,0).css('background',o.background);
$(this).height(o.height);
$(this).width(o.width);
$(this).css('z-index', 9999);
});
}
});
})(jQuery);
Monday, 27 January 2014
Twitter Bootstrap sticky footer (without the pain)
Strangely enough, the sticky footer examples which I've seen for Twitter Bootstrap 3 seem to ignore the fact that there is now a class which takes all the pain away. It's called 'navbar-fixed-bottom', and it is usually used to create a bottom up navigation bar. However, if you add it to your footer code, it works better than any other sticky footer examples. Here's how it works:
Create a footer thus:
<footer class="navbar-default navbar-fixed-bottom">
<div class="container">
<p>Hello world!</p>
</div>
</footer>
Then style it using CSS thus:
footer.navbar-default.navbar-fixed-bottom
{
background:red;
color:white;
padding:1em 0;
}
footer.navbar-default.navbar-fixed-bottom p
{
margin:0;
}
Easy! Sticky footers all the way for me now. They're really useful for mobile web apps.
Create a footer thus:
<footer class="navbar-default navbar-fixed-bottom">
<div class="container">
<p>Hello world!</p>
</div>
</footer>
Then style it using CSS thus:
footer.navbar-default.navbar-fixed-bottom
{
background:red;
color:white;
padding:1em 0;
}
footer.navbar-default.navbar-fixed-bottom p
{
margin:0;
}
Easy! Sticky footers all the way for me now. They're really useful for mobile web apps.
Monday, 16 May 2011
More use of radial gradients
Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
Wednesday, 12 January 2011
Semi-liquid Layout
The layout below offers 2 things. A liquid layout for the main content and a sticky header and footer. It works well across multiple screen resolutions including phones.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-liquid Layout</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
margin-left:0.2em;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
float:right;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent"><img />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-liquid Layout</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
margin-left:0.2em;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
float:right;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent"><img />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
Monday, 15 November 2010
HTML5 tags I am currently using
Why would I write this article?
It's just to give you a flavour of the HTML5 features I have found to be reliable and how I use them. There is a simple template below, but essentially they are <header></header>, <footer></footer>, <section></section>, <article> </article> and <aside></aside>.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HTML5 example</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage, header, footer
{
margin:0 auto;
width:30.8em;
*width:30em;
}
#leftContent
{
float:left;
}
#rightContent
{
float:right;
}
footer
{
clear:both;
}
</style>
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<header>
<h1>My header</h1>
</header>
<section id="mainPage">
<section id="leftContent">
<article>Article 1</article>
<article>Article 1</article>
</section>
<aside id="rightContent">Content on the aside</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Friday, 3 September 2010
Simple layout #3
For this one, I have used the approach of having the header, contained in the footer. I have also created quite a lot of space around the navigation.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
</div>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
</div>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>
Monday, 16 August 2010
Fixed body and footer
This example combines a fixed body and footer height. Commonly used on designer websites.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
How to make a sticky footer
Sometimes you want the footer of your page to always be available at the same height no matter how much you resize your web browser. This is called a sticky footer. Here is a pretty simple way to code it for your site.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
Subscribe to:
Posts (Atom)