Mick Redman

Tuesday 17 August 2010

Resize Background Image

I've often seen background images being resized on designer websites and wondered, how do they do that? Anyway, here's how.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>

jQuery Image Overlay

I've been looking for a nice, simple image overlay. One which wouldn't make me create unnecessary code around my images. I found this one called jcaption. It's a very simple implementation, so I thought I'd share it with you.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image overlay</title>
<style type="text/css">
html
{
font-family:Sans-serif;
}
.caption
{
position: relative;
}
.caption p
{
position: absolute;
bottom:0;
left:0;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jcaption.min.js"></script>
<script>
$(function()
{
$('img').jcaption({
animate: true, show: {height: "show"},hide: {height: "hide"}
});
});
</script>
</head>
<body>
<div class="caption">
<img src="http://farm5.static.flickr.com/4092/4954283598_7e64000a5c_m.jpg" alt="purpleRingSmall" />
</div>
</body>
</html>

How to make the entire page fade in on load

I have often made a the entire page content fade in when loading a page. It seems to give a nice effect. I use jQuery to do this. In the example below I have coloured the page red for highlighting purposes.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Body Fade In</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#FF0000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('body').hide().fadeIn(2000);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</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>

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>

Big Text in the Background

Sometimes it is useful to design a web page with big text in the background of the main content. Below I have created a page which does that. The <h1> content is declared before the main page content and pushed to the back using position:absolute and z-index-1 in the CSS.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Big Text in the Background</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#999999;
}
h1
{
position:absolute;
left:60px;
top:-200px;
z-index:-1;
font-size:20em;
color:#F2D1F9;
}
#mainPage
{
margin:100px auto;
width:800px;
}
p
{
margin:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>The Big Text</h1>
<div id="mainPage">
<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>
</div>
</body>
</html>

Friday 13 August 2010

Automatic menu selection using PHP

Suppose I have a website. In this case a PHP driven HTML5 website, although what I'm about to explain doesn't really require HTML5 and can be easily adapted.

See demo.

I have a menu. I have a text file called menu.txt which contains my menu items like this:

index.php,home
index2.php,Page 2
index3.php,Page 3

And what I want to do is call a PHP script which:

Reads the file.
Creates the menu tags from the file contents.
Automatically selects the page I'm looking at as the selected item in the menu.

I can then apply CSS as I like to the menu appearance using a different colour for the selected item.

Here is how I do it. First place the include 'navigation.php'; in your page script where you want the navigation to appear.
This is what navigation.php looks like:

<nav>
<ul>
<?php
/* get the contents of menu.txt */
$fileArr = file('includes/menu.txt');
/* get the name of the PHP file referred to in the URL */
$fname = basename($_SERVER['REQUEST_URI']);
/* if there isn't a PHP file extension in the URL, it must be root. Therefore call it index.php */
if(substr($fname,-4) <> ".php")
{
$fname = "index.php";
}
/* create the menu from the lines in menu.txt */
foreach ($fileArr as $line)
{
$menuitems = explode(",", $line);
echo '<li><a href="'.$menuitems[0].'" ';
/* Check the current pathname in menu.txt with the one in the current URL */
if($menuitems[0] == $fname)
{
/* If they are the same add the menuSelected class to the link */
echo 'class="menuSelected"';
}
echo '>'.$menuitems[1].'</a></li>';
}
?>
</ul>
</nav>

Hey presto! Have fun.