Mick Redman

Friday, 17 June 2011

Using PHP to create a dynamic page navigation based on filenames

Here is the problem. You create a bunch of pages. You want to highlight the current page within the navigation. You don't want to manually change the navigation elements to each page.

See demo.

In the example below I create an associative array which contains two elements:

The name of the page which the navigation points to.
The name which should appear in the navigation.

I then grab the filename of the of the current page in the browser.
I then traverse the associative array, each time comparing the filename against the current file shown in the browser, each time creating an anchor using the values.

If array filename and current page filename are the same, then I add a CSS ID to the anchor tag.

You will need to write a little CSS to highlight the current page anchor such as:

nav a#activeMenuItem
{
background:#EEEEEE;
}

But other than that, it works like a charm. Have fun!

<nav>
<?php
$navArray = array('index.php'=>'home', 'services.php'=>'services','portfolio.php'=>'portfolio','contact.php'=>'contact');
$fileName = substr(strrchr($_SERVER['SCRIPT_NAME'],47),1);
foreach($navArray as $fname => $linktitle)
{
echo '<a href="'.$fname.'"';
if($fname==$fileName)
{
echo ' id="activeMenuItem"';
}
echo '>'.$linktitle.'</a>';
}
?>
</nav>

Monday, 13 June 2011

Using lorempixum as background images

I've been finding lately that lormepixum is also pretty darn useful in providing background images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>lorempixum background</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<style>
#content
{
margin:auto;
width:40em;
min-height:40em;
background:url(http://lorempixum.com/g/640/640/food) no-repeat;
padding:1em;
}
h1
{
font:4em/1.5em 'Ultra', arial, serif;
color:orange;
}
h2
{
font:2em/1.5em 'Ultra', arial, serif;
}
h3
{
font:1em/1.5em 'Ultra', arial, serif;
}
h2, h3
{
color:#4577D4;
}
#innerText
{
background:url(images/opaque.png);
width:37em;
font:1em/1.5em Sans-serif;
color:#222222;
padding:0.5em;
}
</style>
</head>
<body>
<section id="content">
<header><h1>Header 1</h1></header>
<section id="innerText">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
</section>
</body>
</html>

Friday, 10 June 2011

Simple liquid grid layout

I was reading this blog post earlier today, in which it recommends to "Use liquid layouts" and "Roll your own grids". The example below does just this, so with jQuery mobile, fttext etc. I may just be in a good place to develop responsive web designs.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Liquid Grid</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol, .goldenRatioLeft, .goldenRatioRight
{
clear:left;
}
.oneCol
{
width:100%;
}
.twoCol section
{
width:50%;
}
.threeCol section, .goldenRatioLeft section.first, .goldenRatioRight section.last
{
width:33.3%;
}
.oneCol, .twoCol section, .threeCol section, .goldenRatioLeft section, .goldenRatioRight section
{
background:#EEEEFE;
float:left;
}
.goldenRatioLeft section.double, .goldenRatioRight section.double
{
width:66.6%;
}
h1, p
{
margin:0.5em;
}
</style>
</head>
<body>

<section class="oneCol">
<h1>Header 1</h1>
</section>

<section class="twoCol">
<section class="first"><p>Column 1 of 2 columns.</p></section>
<section><p>Column 2 of 2 columns.</p></section>
</section>

<section class="threeCol">
<section class="first"><p>Column 1 of 3 columns.</p></section>
<section class="second"><p>Column 2 of 3 columns.</p></section>
<section><p>Column 3 of 3 columns.</p></section>
</section>

<section class="goldenRatioLeft">
<section class="first"><p>Golden ratio left column 1.</p></section>
<section class="double"><p>Golden ratio left column 2.</p></section>
</section>

<section class="goldenRatioRight">
<section class="double"><p>Golden ratio right column 1.</p></section>
<section class="last"><p>Golden ratio right column 2.</p></section>
</section>

</body>
</html>

Fittext - Not bad

I came across a great new jQuery plugin today. Namely FitText. I've done dynamic text resizing myself before, but this seems like a better implementation. To test it, resize your browser.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>FitText</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
h1
{
font-size:4em;
color:red;
line-height:1.5em;
}
h2
{
font-size:3em;
color:orange;
line-height:1em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.fittext.js"></script>
<script>
$(document).ready(function()
{
$('.fittext').fitText();
});
</script>
</head>
<body>
<header><h1 class="fittext">Header 1</h1></header>
<section id="mainContent">
<h2 class="fittext">It's all in the detail</h2>
<article>
<p class="fittext">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>
</article>
</section>
<footer>Footer</footer>
</body>
</html>

Tuesday, 7 June 2011

SIMPLE LAYOUT #36

This latest layout makes use of a seamless, tiled paper texture. Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design template 36</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli:light,regular' rel='stylesheet' type='text/css'>
<style>
*
{
background:url(images/sedona.jpg);
}
body
{
margin:auto;
width:60em;
font:1em/1.5em 'Muli', arial, serif;;
color:#E5D6C3;
}
.floatLeft, aside, article, footer
{
margin:0.5em;
}
.floatLeft, aside
{
width:29em;
float:left;
}
section, footer
{
clear:both;
}
section#titleImages
{
float:right;
margin:-7.5em 0.5em 0 0;
}
article
{
width:19em;
float:left;
}
h1, h2, h3, h4
{
font-family:'Playfair Display', arial, serif;
color:white;
}
h1
{
font-size:7em;
margin:0.5em 0 0.25em 0.05em;

}
h2
{
font-size:2em;
margin:1.5em 0 0em 0.25em;
}
h3, h4
{
font-size:1.6em;
margin:0.5em 0 0.25em 0em;
}
p
{
text-align:justify;
}
</style>
</head>
<body>
<header>
<h1>Header 1</h1>
<h2>Strapline for you</h2>
</header>
<section id="titleImages">
<img src="http://lorempixum.com/150/150/food" />
<img src="http://lorempixum.com/150/150/technics" />
<img src="http://lorempixum.com/150/150/people" />
</section>

<section class="floatLeft">
<header>
<h3>Section header</h3>
</header>
<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>
<aside>
<header>
<h3>Aside header</h3>
</header>
<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.</p>
</aside>
<section>
<article>
<img src="http://lorempixum.com/300/300/food" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/technics" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/people" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
</section>
<footer>This is my footer which goes on quite a long time.</footer>
</body>
</html>

Monday, 6 June 2011

lorempixum placeholder

I am going to start using the placeholder from http://lorempixum.com/ from here on. In my last post, I added one of my GIMP creations, but it didn't give the best effect, so I've now added on of these placeholders.

Your also going to fined some of the code I use even leaner. I've been reading the excellent Smashing Book #2. It contains many of the things I'm interested in at the moment and has been improving the quality of my work no end.

For those of you with an addiction for free design code, here is a nice font display.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font test</title>

<link rel="stylesheet"
href="http://meyerweb.com/eric/tools/css/reset/reset.css" /> <style> body {
background:#CCCCCC;
color:#777777;
font:italic 1.1em/1.2em Georgia, serif; } p {
margin:4em;
width:20em;
text-align:justify;
}
</style>
</head>
<body>
<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.</p>
</body>
</html>

Friday, 3 June 2011

Simple layout #35

The template is very similar to a previous one. I've just changed the colours, fonts, etc. This does give an entirely different impression and can therefore act as an inspiration for doing other things with the design.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 35</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
body
{
margin:auto; /* center in viewport */
width: 960px;
background:#333333;
}
body, nav a
{
color:#999999;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
padding:0.25em 0 0.5em 0;
margin:0 0.2em 0 0;
background:#444444;
}
nav a:hover
{
background:orange;
color:white;
}
h1
{
font:6em/1em 'Anton', arial, serif;
color:orange;
}
h2
{
font:2em 'Anton', arial, serif;
color:#A66C00;
}
section p, footer p, img, hgroup
{
margin:0.5em 1em 1em 1em;
}
#glass
{
width:28em;
}
p, a
{
font:normal 0.9em/1.5em Sans-serif;
}
.j
{
text-align:justify;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section id="glassHolder" class="yui3-u-1-2">
<img src="http://lorempixum.com/400/300/food" id="glass" />
</section>
<section class="yui3-u-1-2 j">
<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 class="yui3-u-1-3 j">
<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.</p>
</section>
<section class="yui3-u-1-3 j">
<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.</p>
</section>
<section class="yui3-u-1-3 j">
<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.</p>
</section>
<footer class="yui3-u-1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>