Mick Redman: div

Monday, 25 October 2010

Centre a DIV, interpret font sizes and snipplr

I have been subscribed to http://snipplr.com recently. It's very good. It's a sort of social networking site for coders. Below are a couple examples of things I got from the site this morning contained in the same page. The first technique is how to centre a DIV inside another DIV. Very useful.
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
   width:50%;
   margin:auto;
   background:#FF0000;
}
p
{
  font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>

Tuesday, 12 October 2010

Put external web content into your page using jQuery and PHP

I looked into using the jQuery .load and .get methods to do this, but it only seemed to work with content on my server. I knew that PHP had a really good function called file_get_contents, so I thought, I'll use that, but jQuery is still good for putting the contents into your page. Here is an example of how they work together to achieve the goal.

See demo.

First the HTML file :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
   $('a').click(function()
   {
   $.post("getTheContent.php",
   {
theAddress:$(this).attr('url')
   }, function(data)
   {
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
   });
   return false;
   });
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">

</div>
</body>
</html>

Now, the PHP file called getTheContent.php :

<?php
   echo file_get_contents($_POST["theAddress"]);
?>

You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.