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>
Wednesday, 12 January 2011
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>
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>
<!--[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
{
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>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</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
{
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>
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.
Unexpected CSS3pie issue
I have shifted between using CSS3pie and not over the past year from http://css3pie.com. I really appreciate all the work that's gone into it. Sometimes it just doesn't work for me. This morning, I started to look at why it was not working on my portableCMS. I started to gradually remove elements and discovered that if I removed the colour from my body background ie from:
background:#FFFFFF url(images/bodyBackground.png) repeat-x;
to
background:url(images/bodyBackground.png) repeat-x;
I got partial site of my rounded corners etc.
Then I found this blog post. http://www.jakobloekkemadsen.com/2010/10/how-to-make-css3pie-work/
So I put, position:relative; in the CSS call to my selector which used PIE.htc and hey presto!
background:#FFFFFF url(images/bodyBackground.png) repeat-x;
to
background:url(images/bodyBackground.png) repeat-x;
I got partial site of my rounded corners etc.
Then I found this blog post. http://www.jakobloekkemadsen.com/2010/10/how-to-make-css3pie-work/
So I put, position:relative; in the CSS call to my selector which used PIE.htc and hey presto!
Wednesday, 1 December 2010
Two lessons learned about IE from the coal face
Yesterday was a difficult day. It's my own fault. I should have started testing my portableCMS in IE earlier. I came across 2 problems which took more time than I was prepared for in debugging.
So here is tip number 1. Don't even think of trying to refer to JavaScript constants in your jQuery calls. It's just not worth the hassle.
Tip number 2. As well as referring to a html5 reset, (I use http://html5resetcss.googlecode.com/files/html5-reset.css), add your own HTML 4 reset. Mine is listed below. You will still have problems, but less.
*
{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body
{
font-family:Sans-serif;
font-size:1em;
}
h1, h2, h3, h4, h5, h6
{
margin:0;
padding:0;
font-weight:normal;
}
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea
{
margin:0;
padding:0;
}
blockquote
{
margin:1.25em;
padding:1.25em
}
q
{
font-style:italic;
}
acronym, abbr
{
cursor:help;
}
small
{
font-size:.85em;
}
big
{
font-size:1.2em;
}
a, a:link, a:visited, a:active, a:hover
{
text-decoration:none;
}
table
{
margin:0;
padding:0;
border:none;
}
form
{
margin:0;
padding:0;
display:inline;
}
label
{
cursor:pointer;
}
.clear { clear:both; }
.floatLeft { float:left; }
.floatRight { float:right; }
.textLeft { text-align:left; }
.textRight { text-align:right; }
.textCenter { text-align:center; }
.textJustify { text-align:justify; }
.blockCenter { display:block; margin-left:auto; margin-right:auto; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { text-decoration:underline; }
.noindent { margin-left:0; padding-left:0; }
.nomargin { margin:0; }
.nopadding { padding:0; }
.nobullet { list-style:none; list-style-image:none; }
Subscribe to:
Posts (Atom)