Mick Redman

Tuesday, 18 January 2011

Using jQuery to create a dynamic Wordle button

Wordle is a great tool for creating interesting tag clouds. The example below contains a bunch of Lorem ipsum just so that there is some content to feed Wordle. This is followed by a button which creates a Wordle from the content. The jQuery takes the page content and applies it to the text field required by the Wordle service.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery","1");
google.load("jqueryui","1");
</script>
<script>
$(document).ready(function()
{
$('#wordleParam').text($('#mainContent').text());
});
</script>
</head>
<body>
   <section id="mainContent">
<h1>HTML Ipsum Presents</h1>
<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>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>

   <form action="http://www.wordle.net/advanced" method="POST">
   <textarea name="text" id="wordleParam" style="display:none;">
   </textarea>
   <input type="submit" value="Submit content to Wordle">
</form>
   </section>
</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>

Smartphone and upwards

This layout works on the basis that smartphones have a minimum width of 480px or 30em. And so, this layout will happily work on anything greater than that. The result, no need to check which device is accessing it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smartphone and upwards</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;
}
#mainContent, hgroup, footer p, nav p
{
margin:0 auto;
width:30em;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
}
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
{
width:18.5em;
float:left;
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin-top:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
}
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-top: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">
<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>
<img />
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>

Monday, 10 January 2011

jQuery Radio Buttons

Happy New Year!
It took me about 20 minutes to work out how to use radio buttons with jQuery. The examples I found were a bit rubbish, so I thought I would share this code with you to save everyone the time.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Radio Buttons</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(function ()
{
$("input[name='radioTest']").change(
function()
{
if($(this).val()=='yes')
{
alert('Yes');
}
else
{
alert('No');
}
});
});
</script>
</head>
<body>
Try this radio button<br />
Yes<input name="radioTest" type="radio" value="yes">
No<input name="radioTest" type="radio" value="no">
</body>
</html>

Wednesday, 8 December 2010

Two equal row layout beginnings

I wanted to get a liquid layout with 2 rows taking up 50% of the browser hight each. I saw this type of layout on a site recently. It was a very minimalistic design. So I started to replicate it and do my own version. I then started to run into difficulties. I did some surfing and couldn't come up with the answer. So then I made a cup of tea, really put my brain into action, solved it, and now I'm sharing it with you.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
   height:auto;
   clear:both;
}
#bottom
{
   color:#FFFFFF;
   position:fixed;
   right:0;
   bottom:0;
   width:100%;
   _position: absolute;
   background:#FF0000;
   height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>

Thursday, 2 December 2010

How to set off multiple functions repeatedly using JavaScript

We are going to create an array of functions we'd like to kick off every 5 seconds. In this example I've used alerts, but this could make an excellent poll for changes to a file.

Once our array is created we can call a function which will perform the actions.

First we need to declare our function and stick it in the <head> of our page.
<script>

function runFunctions(funcArr, delay)
{
   setInterval(
   function()
   {
   for(i=0; i<funcArr.length; i++)
   {
   eval(funcArr[i]);
   }
   }, delay);
}

</script>

Now we can call our function from within the page <body> or just as easily in the <head>

<script>
   var myFuncs=new Array("alert('Mick')","alert('Mack')","alert('Paddy')","alert('Whack')");
   runFunctions(myFuncs, 5000);
</script>

Complete mess up of the Moodle layout

I have been adding the Google Feed reader to my Moodle setup. One line which has been repeated a few times in the standard CSS makes a real mess of things. The culprit is white-space:nowrap. I shall be avoiding using this line in my own CSS.