Mick Redman: email

Tuesday, 9 November 2010

Pixel to em calculator

These days we need to use the most flexible means of sizing elements in our web content. Our websites have to cope with different devices, different resolutions, different user preferences, accessibility, etc...

Step forward em. This can, not only be used for font sizes, but layout too. We are used to sizing elements of our pages using pixels. To be more flexible, and get in the swing of thinking about em instead of pixels, in the early stages we need a converter. Now of course, IE certainly early versions of it need to be covered, if we want our pages to be rendered consistently. For this we should put an * before our properties.

The example below, provides you with a converter and an example of how to use it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel to em calculator</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage
{
margin:0 auto;
width:30.8em;
*width:30em;
}

</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
jQuery(function( $ )
{
$("#button").click(function()
{
$('#emlVal').val(parseFloat($('#pixelVal').val()*0.0625).toFixed(2));
$('#emForIEval').val(parseFloat($('#emlVal').val()*1.1).toFixed(2));
});
});
</script>
</head>
<body>
<div id="mainPage">
Pixel value<br /><input type="text" name="pixelVal" id="pixelVal" /><br />
Em value<br /><input type="text" name="emVal" id="emlVal" /><br />
Em for IE value<br /><input type="text" name="emForIEval" id="emForIEval" /><br />
<input type="submit" value="Submit" id="button" />
</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.