I've been a bit quiet on the blog front over the last week because I've been knee deep in stuff. One of the things I've been working with is jQuery Mobile. A real solution for me. I didn't want to re-learn Java to create Android apps. I certainly didn't want to learn Objective-C for iPhone apps. I do want to use all my existing web and PHP skills to develop apps for mobile devices. jQuery Mobile suits this perfectly.
It's only really in alpha at the moment and be prepared to reconfigure everything you're done as each version changes, but it's already looking very good.
Below is my Hello World! page using jQuery Mobile.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page">
Hello jQuery Mobile
</div>
</body>
</html>
Monday, 4 April 2011
Hello jQuery Mobile
Monday, 28 March 2011
Google TTS API for my paragraphs using HTML5, jQuery and PHP
Most of the credit for this post goes to Abu Ashraf Masnun for this post http://www.masnun.me/2009/12/14/googles-text-to-speech-api-a-php-wrapper-class.html
You'll need to take a copy of his code for this to work. Then you need to append the following lines to the end of the PHP (after his object declaration).
$tts = new TextToSpeech();
$tts->setText($_POST['text']);
$tts->saveToFile("masnun.mp3");
Once you've done this, you can create a HTML file like mine below. To use the page, click on the speaker icons.
Note:This will not work in rubbish browsers. For this you will need to change my HTML5 <audio> tag for something awful like the <object> tag.
Another note:The Google TTS has a 100 character limit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text to speech</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
var audioText = '<audio controls="controls" autoplay="autoplay">';
audioText += '<source src="masnun.mp3" type="audio/mpeg" />';
audioText += 'Your browser does not support the audio element.';
audioText += '</audio>';
$(document).ready(function()
{
$('.tts').each(function()
{
$(this).after('<a href="#" class="speaker"><img src="http://farm6.static.flickr.com/5091/5568186294_a396c02f4f_t.jpg" /></a>');
});
$('.speaker').click(function()
{
$.post('tts.php',
{
text:$(this).prev('p').text()
}, function(data)
{
$(this).after(audioText);
});
return false;
});
});
</script>
</head>
<body>
<section id="mainContent">
<p class="tts">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="tts">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="tts">Johnny Diamond. Peter Sam</p>
</section>
</body>
</html>
Lorem Ipsum API using PHP
Below are some examples of using the Lorem Ipsum API. A useful tool for someone like me. I always need dummy text. I got the documentation from http://loripsum.net/
See demo.
Uncomment at will.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem Ipsum API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
</head>
<body>
<?php
/* Standard set of items. By default they are paragraphs. */
/* echo file_get_contents('http://loripsum.net/api'); */
/* Set number of items */
/* echo file_get_contents('http://loripsum.net/api/2'); */
/*
Set length of items
Options can be short, medium, long, verylong.
*/
/* echo file_get_contents('http://loripsum.net/api/long'); */
/*
Set decoration of items
Options can be bold, italic and marked.
*/
/* echo file_get_contents('http://loripsum.net/api/bold'); */
/* Add links to some of the text */
/* echo file_get_contents('http://loripsum.net/api/link'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add ordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ol'); */
/* Add description lists. */
/* echo file_get_contents('http://loripsum.net/api/dl'); */
/* Add blockquotes. */
/* echo file_get_contents('http://loripsum.net/api/bq'); */
/* Add code samples. */
/* echo file_get_contents('http://loripsum.net/api/code'); */
/* Add headers. */
/* echo file_get_contents('http://loripsum.net/api/headers'); */
/* Use ALL CAPS. */
/* echo file_get_contents('http://loripsum.net/api/allcaps'); */
/* Prude version. Takes out latin words like 'sex' or 'homo'. Cheer up! */
echo file_get_contents('http://loripsum.net/api/prude');
?>
</body>
</html>
See demo.
Uncomment at will.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem Ipsum API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
</head>
<body>
<?php
/* Standard set of items. By default they are paragraphs. */
/* echo file_get_contents('http://loripsum.net/api'); */
/* Set number of items */
/* echo file_get_contents('http://loripsum.net/api/2'); */
/*
Set length of items
Options can be short, medium, long, verylong.
*/
/* echo file_get_contents('http://loripsum.net/api/long'); */
/*
Set decoration of items
Options can be bold, italic and marked.
*/
/* echo file_get_contents('http://loripsum.net/api/bold'); */
/* Add links to some of the text */
/* echo file_get_contents('http://loripsum.net/api/link'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add ordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ol'); */
/* Add description lists. */
/* echo file_get_contents('http://loripsum.net/api/dl'); */
/* Add blockquotes. */
/* echo file_get_contents('http://loripsum.net/api/bq'); */
/* Add code samples. */
/* echo file_get_contents('http://loripsum.net/api/code'); */
/* Add headers. */
/* echo file_get_contents('http://loripsum.net/api/headers'); */
/* Use ALL CAPS. */
/* echo file_get_contents('http://loripsum.net/api/allcaps'); */
/* Prude version. Takes out latin words like 'sex' or 'homo'. Cheer up! */
echo file_get_contents('http://loripsum.net/api/prude');
?>
</body>
</html>
Friday, 25 March 2011
Icon holder
I'm starting to get into iconography and it's use in my websites. In the example below I have created an icon holder. This is sort of case which all navigation icons would sit.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icons</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
width:100%;
margin:4em;
}
.iconOuterSquare, .iconInnerCircle
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.iconOuterSquare
{
background:#87B7D6;
width:10em;
height:9em;
border-radius:0.62em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
padding-top:1em;
}
.iconInnerCircle
{
margin:auto;
background:#FFFFFF;
width:8em;
height:6.5em;
border-radius:4em;
-moz-border-radius:4em;
-webkit-border-radius:4em;
text-align:center;
padding-top:1.5em;
}
</style>
</head>
<body>
<figure class="iconOuterSquare">
<figure class="iconInnerCircle">
<img src="http://farm6.static.flickr.com/5261/5558426054_a79fb5bffe_t.jpg" />
</figure>
</figure>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icons</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
width:100%;
margin:4em;
}
.iconOuterSquare, .iconInnerCircle
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.iconOuterSquare
{
background:#87B7D6;
width:10em;
height:9em;
border-radius:0.62em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
padding-top:1em;
}
.iconInnerCircle
{
margin:auto;
background:#FFFFFF;
width:8em;
height:6.5em;
border-radius:4em;
-moz-border-radius:4em;
-webkit-border-radius:4em;
text-align:center;
padding-top:1.5em;
}
</style>
</head>
<body>
<figure class="iconOuterSquare">
<figure class="iconInnerCircle">
<img src="http://farm6.static.flickr.com/5261/5558426054_a79fb5bffe_t.jpg" />
</figure>
</figure>
</body>
</html>
Wednesday, 23 March 2011
Two by Two Layout
In this example I deliver to the user a browser divided by 4 sections of equal height and width. As the user resizes the browser, the page is refreshed so that the dimensions can be recalculated. You can also see how this would work with my previous blog post on font resizing. See http://effectivewebdesigns.blogspot.com/2011/03/resize-chosen-fonts-dynamically.html
I just chose not to include both entries because I like to keep my blog entries small.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two by Two Layout</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#FFFFFF;
width:100%;
color:#525252;
line-height:1.5em;
}
#topLeft, #topRight, #bottomLeft, #bottomRight
{
color:#FFFFFF;
float:left;
padding:1em;
}
#topLeft
{
background:#000000;
text-align:right;
}
#topRight
{
background:#9CB82E;
}
#bottomLeft
{
background:#A69A00;
text-align:right;
}
#bottomRight
{
background:#B1009B;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('section').each(function()
{
$(this).height(($(window).height()*0.5)-32);
$(this).width(($(window).width()*0.5)-32);
});
$("#topLeft p").position(
{
my: "right bottom",
at: "right bottom",
of: "#topLeft",
offset:"-20 -20"
});
$("#topRight p").position(
{
my: "left bottom",
at: "left bottom",
of: "#topRight",
offset:"20 -20"
});
$(window).resize(function() {
location.reload();
});
});
</script>
</head>
<body>
<section id="topLeft">
<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 id="topRight">
<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 id="bottomLeft">
<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 id="bottomRight">
<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>
</body>
</html>
I just chose not to include both entries because I like to keep my blog entries small.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two by Two Layout</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#FFFFFF;
width:100%;
color:#525252;
line-height:1.5em;
}
#topLeft, #topRight, #bottomLeft, #bottomRight
{
color:#FFFFFF;
float:left;
padding:1em;
}
#topLeft
{
background:#000000;
text-align:right;
}
#topRight
{
background:#9CB82E;
}
#bottomLeft
{
background:#A69A00;
text-align:right;
}
#bottomRight
{
background:#B1009B;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('section').each(function()
{
$(this).height(($(window).height()*0.5)-32);
$(this).width(($(window).width()*0.5)-32);
});
$("#topLeft p").position(
{
my: "right bottom",
at: "right bottom",
of: "#topLeft",
offset:"-20 -20"
});
$("#topRight p").position(
{
my: "left bottom",
at: "left bottom",
of: "#topRight",
offset:"20 -20"
});
$(window).resize(function() {
location.reload();
});
});
</script>
</head>
<body>
<section id="topLeft">
<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 id="topRight">
<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 id="bottomLeft">
<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 id="bottomRight">
<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>
</body>
</html>
Resize chosen fonts dynamically
Again, I can't take much credit for this. The real credit goes to the author of this blog entry http://www.pukkared.com/2010/10/resizing-text-with-jquery-and-window-resize/. I have just made a few changes and calls for my own purposes. Namely, passing which fonts I would like to resize, what the original size should be and what size the page should be before resizing begins. Enjoy!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic font resize</title>
<style>
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>
$.fn.resizeFonts = function(fontName, originalFontSize)
{
var originalWinWidth = $(window).width();
var ratioOfChange = 50;
$(fontName).css('font-size', originalFontSize);
$(window).resize(function()
{
var winWidth = $(window).width();
var widthDiff = winWidth - originalWinWidth;
if(widthDiff > 0)
{
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
var newFontSize = originalFontSize + pixelsToIncrease;
$(fontName).css('font-size', newFontSize);
}
else
{
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
var newFontSize = originalFontSize - pixelsToDecrease;
$(fontName).css('font-size', newFontSize);
}
})
}
$(document).ready(function()
{
$(window).resize(function() {
if($(this).width() < 800)
{
$(this).resizeFonts('h1',20);
$(this).resizeFonts('p',10);
}
});
});
</script>
</head>
<body>
<h1>Big Mick's Recipe Book</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>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic font resize</title>
<style>
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>
$.fn.resizeFonts = function(fontName, originalFontSize)
{
var originalWinWidth = $(window).width();
var ratioOfChange = 50;
$(fontName).css('font-size', originalFontSize);
$(window).resize(function()
{
var winWidth = $(window).width();
var widthDiff = winWidth - originalWinWidth;
if(widthDiff > 0)
{
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
var newFontSize = originalFontSize + pixelsToIncrease;
$(fontName).css('font-size', newFontSize);
}
else
{
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
var newFontSize = originalFontSize - pixelsToDecrease;
$(fontName).css('font-size', newFontSize);
}
})
}
$(document).ready(function()
{
$(window).resize(function() {
if($(this).width() < 800)
{
$(this).resizeFonts('h1',20);
$(this).resizeFonts('p',10);
}
});
});
</script>
</head>
<body>
<h1>Big Mick's Recipe Book</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>
</body>
</html>
Saturday, 19 March 2011
Big fonts for header
This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>
Subscribe to:
Posts (Atom)