Mick Redman: September 2010

Wednesday, 29 September 2010

Using jQuery Dialog as a lightbox

Your first thought may be "Why?".
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.

Also, like many of my examples, the code is now easily transferable.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>

Tuesday, 28 September 2010

Panel Slider

The example below uses the excellent Coda-Slider by Niall Doherty at http://www.ndoherty.biz/tag/coda-slider/
All I have done is simplified the implementation, making it easy to begin using the code.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{

overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>

Image Slideshow

Here is a simple implementation of an image slideshow using the jQuery application at http://www.serie3.info/s3slider/
See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
   <ul id="s3sliderContent">
   <li class="s3sliderImage">
   <img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
   <span>Your text comes here</span>
   </li>
   <li class="s3sliderImage">
   <img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
   <span>Your text comes here</span>
   </li>
   <div class="clear s3sliderImage"></div>
   </ul>
</div>
</body>
</html>

Friday, 24 September 2010

SMTP from XAMPP on a localhost using your Google mail Account

This may seem a little obscure but believe me, this blog could save you a lot of time.

Imagine you have XAMPP installed on your Windows computer as localhost. You are writing an application which requires e-mails to be sent and you need to test your code. You have a Google e-mail account and you'd like to use the SMTP service which comes with that.

Let's start by creating our little PHP script which we are going to use for testing.

<?php
mail('jimmy@googlemail.com','test subject','test body');
?>
There. That wasn't too difficult was it.

Next we need to edit our php.ini file. The php.ini file will be in something like C:\XAMPP\php. We are looking for the [mail function] variables. For which we need entries like this:

[mail function]
sendmail_path = "C:/xampp/sendmail/sendmail.exe -t"

Couple things to note from above. The smtp_port and look carefully at the slashes of the sendmail_path.

Now we are on to our final step. We need to edit sendmail.php which would be under something like C:\XAMPP\sendmail. You need to replace the contents of the file with something like this:

[sendmail]
smtp_server=smtp.googlemail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=myaccountname@googlemail.com
auth_password=mypassword
force_sender=myaccountname@googlemail.com

You must now restart your Apache service in order for it to work.

Now to test your script. Open up your web browser and load it like this http://localhost/myscript.php
Check your Google mail account to see if it's arrived.

Good luck!

Simple layout #12

This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Static Image Overlay

Here is how to put those descriptions placed at the bottom of your images with a semi-opaque background.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>

Thursday, 23 September 2010

Simple layout #11

This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Prettier scrollbars

This demo offers a starting point to having prettier scrollbars for your web page. I am using jScrollPane at
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.

The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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><br /><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><br /><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><br /><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><br /><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><br /><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>
<div id="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>

Wednesday, 22 September 2010

Simple layout #10

Yes, we're into double figures this latest layout sports 100% height, 100% width, a background belt and 3 rows.
I also used gimp to create a sort of blue gel cats eye in neon for fun.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #10</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
background:url(images/bigBlackLine.png) repeat-x 0px 400px;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
min-height:100%;
}
#topPart
{
height:400px;
background:#73C2FF;
}
h1
{
font-family: 'Cuprum', arial, serif;
font-size:6em;
width:600px;
padding:20px;
}
#middlePart
{
height:200px;
background:url(http://farm5.static.flickr.com/4091/5014384774_918902e791_z.jpg) no-repeat center center;
}
#bottomPart
{
background:#69FFBF;
}
</style>
</head>
<body>
<div id="container">
<div id="topPart">
<h1>One of those new fangled big fonts</h1>
</div>
<div id="middlePart">
</div>
<div id="bottomPart">
</div>
</div>
</body>
</html>

Monday, 20 September 2010

Three column 100% height layout

I may create a more designer version of this later in the series. I just wanted to demonstrate how to create a multi column 100% height layout. Most examples I had seen on the web required a wrapper and lots of coding. I couldn't see why. No by doing it without lots of code and wrappers, I still can't.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Columns</title>
<style type="text/css">
* html body
{
height:100%;
}
*
{
margin:0;
padding:0;
height: 100%;
}
body
{
font-family:Sans-serif;
}
#column1, #column2, #column3
{
float:left;
min-height: 100%;
}
#column1, #column2
{
width:200px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:400px;
}
</style>
</head>
<body>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
</body>
</html>

Friday, 17 September 2010

How to create an e-mailable PDF form in OpenOffice.org

Suppose you wanted to send someone a PDF with form elements and a submit button at the bottom. Suppose when they clicked on the button you wanted the form contents to be sent as a PDF back to you. Here is how to do it.
Stage 1
Create the form in OpenOffice.org
Step 1
Create a new document using OpenOffice.org writer.
Step 2
Load the form controls using View->Toolbars->Form Controls and View->Toolbars->Form Design.
Step 3
Get your document ready for form elements by adding a title and pressing Carriage Return (Enter, <CR>, Return) a few times.
Step 4
Put the document in design mode using the 'Design Mode On/Off' switch in the form controls.
Step 5
Add form items to your document by selecting them from the form controls dialog, then dragging on to your page.
Step 6
Your final form entry should be a submit button. In the button properties, the 'Action' field should be set to 'Submit form'.
Stage 2
Set the form to e-mail
Step 1
Click on the 'Form' (properties) button on the form controls dialogue.
Step 2
Set the URL field to mailto:your.emailaddress@yourdomain
Stage 3
Export your document to PDF making sure that the 'Submit format' is FDF.
Stage 4
Test your newly exported PDF by filling in the fields and pressing the submit button.

jQuery Pagination

This is a nice, simplified version of a jQuery paginator plugin found at http://plugins.jquery.com/project/jquery-pagination
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.

There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</div>
</body>
</html>

Thursday, 16 September 2010

Simple layout #9

This one is very similar to Simple layout #8 (hope it's not a trend), but for 2 major differences. I have included a background image and colour in the header. I have increased and broadened the font of the header. These 2 small differences are to fall in line with current website trends.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #9</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:4em;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4145/4991020425_220a3fe3c4.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<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 id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<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>
</div>
<div id="highlights">
<div class="highlight">
<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>
</div>
<div class="highlight">
<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>
</div>
<div class="highlight">
<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>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>

Simple layout #8

Just for fun, on this one I've used a slate background. The difference with this particular layout is the use of the central graphic between the 2 items of content, which are padded from the top to provide balance.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #8</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#header, #highlights
{
height:340px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
float:left;
margin-left:20px;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
margin-left:20px;
margin-right:20px;
margin-top:60px;
}
#content p
{
text-align:justify;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:2.4em;
}
#highlights
{
border-bottom:1px solid #CCCCCC;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
padding-top:80px;
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Important Header</h1>
<div id="navigation">
<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 id="content">
<h2>Less important header</h2>
<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>
<div id="highlights">
<div class="highlight">
<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>
</div>
<div class="highlight">
<img src="http://farm5.static.flickr.com/4145/4995561662_1cd41c7302.jpg" alt="phone" >
</div>
<div class="highlight">
<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>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>

Simple layout #7

Another commonly used layout. This time using a graphic as a sort of underline. Also, a navigation bar which I've seen on many designer websites.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #7</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
color:#CCCCCC;
background:#000000 url(http://farm5.static.flickr.com/4150/4992675995_fb299546f0_b.jpg) no-repeat left bottom;
}
#nav, #content, #footer
{
width:920px;
margin-left:20px;
}
#nav, #footer
{
height:100px;
}
#nav a
{
display:block;
float:left;
width:100px;
color:#CCCCCC;
text-decoration:none;
border-right:1px solid #CCCCCC;
padding-right:40px;
padding-left:8px;
padding-bottom:60px;
margin-left:-4px;
}
#nav a:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
#content
{
min-height:360px;
}
h1
{
font-family:'Yanone Kaffeesatz', arial, serif;
font-size:3em;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">about</a>
</div>
<div id="content">
<h1>A Pretty Big Header</h1>
<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>
<div id="footer"></div>
</body>
</html>

Wednesday, 15 September 2010

Drop down menu using jQuery

This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Simple layout #6

In this layout I've tried to gain a clean look using green. I've also tried to use an image to separate the navigation from the content and provide a footer with the same graphic. Normally, I would have used a different font for the header. Still, you can take it apart and supply your own elements.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>green wave</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
background:#FFFFFF;
}
#waveHolder, #container
{
margin:0 auto;
}
#waveHolder
{
width:920px;
background:url(http://farm5.static.flickr.com/4150/4992713040_90495781a7_b.jpg) no-repeat top left;
min-height:600px;
}
#container
{
float:left;
width:580px;
min-height:600px;
background:url(http://farm5.static.flickr.com/4083/4992103573_f90491d9b8_m.jpg) no-repeat top right;
}
h1
{
text-align:right;
padding-top:80px;
margin-right:28px;
font-size:2em;
font-weight:lighter;
color:#00c600;
}
span#heading
{
color:#000000;
}
#mainContent
{
width:500px;
margin-top:100px;
margin-left:60px;
padding-right:40px;
}
#mainContent p
{
font-size:0.9em;
text-align:justify;
line-height:160%;
color:#6d6d6d;
}
#nav
{
float:left;
text-align:left;
height:224px;
width:200px;
margin-left:80px;
padding-top:200px;
font-size:1.2em;
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:100px;
height:40px;
padding-top:8px;
padding-left:10px;
padding-right:4px;
color:#00c600;
}
#nav a.subMenu:hover
{
background:url(http://farm5.static.flickr.com/4149/4992711584_49616c74dc_t.jpg) no-repeat;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="waveHolder">
<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 id="container">
<h1>welcome to the  <span id="heading">green wave</span></h1>
<div id="mainContent">
<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>
</div>
</div>
</body>
</html>

Tuesday, 14 September 2010

Simple layout #5

This layout has started to appear in many websites these days. I haven't added any clever graphics, but it is very flexible in that regard. In my own version it's black with a red radial aligned to the centre which fades to transparency. I tried adding to to flickr, but flickr is not good with such subtleties. I also didn't bother with any changes to hover over the navigation in an attempt to keep the code as small as possible. Anyway, enjoy playing!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 5</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #header, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
background:#000000;
color:#FFFFFF;
height:40px;
}
#header, #highlights
{
height:200px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
width:80px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
h1, img
{
float:right;
}
h1
{
margin-top:60px;
}
#content
{
clear:right;
height:80px;
padding-left:20px;
padding-right:20px;
border-bottom:1px solid #000000;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:left;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<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 id="header"><img src="http://farm5.static.flickr.com/4084/4989747012_e306b1cc6e.jpg" alt="bigImageLabel" /><h1>Important Header</h1>
</div>
<div id="content">
<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>
</div>
<div id="highlights">
<div class="highlight">
<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>
</div>
<div class="highlight">
<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>
</div>
<div class="highlight">
<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>
</div>
</div>
<div id="footer"><p>This could be quite a long footer</p></div>
</div>
</body>
</html>