Mick Redman

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.

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!

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

}

{

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; }

Monday, 29 November 2010

At long last a proper mobile simulator

http://iphone4simulator.com/
If you know of another good one let me know.

Friday, 26 November 2010

portableCMS

My updates have not been as frequent or as detailed lately because I've been writing a CMS which I have so far name portableCMS. So far I have been able to:

Create a set of configuration files
Create a method of providing CSS to the correct devices
Hold editable content data without the need for a database
Minimise the requirement for developers to code beyond the HTML body if required
Provide a method of creating plugins
Provide the opportunity to enhance the CMS with external Functional PHP, OOP PHP, jQuery and JavaScript sources

At the moment I am working on delivering real-time data.