Mick Redman

Monday, 18 October 2010

Cross browser rotating divs using jQuery

Below, I have used the jQuery plugin called rotate at http://code.google.com/p/jquery-rotate/
Normally, I like to refer to these online, but for some reason, it didn't work, so you'll have to download it as I have done in the example below. Another unfortunately, is that I had to create a wrapper for IE. The code is still quite small.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#wrapper
{
margin:0 auto;
width:300px;
height:300px;
}
#container
{

width:200px;
height:200px;
background:#FF0000;
color:#FFFFFF;
border:2px solid #000000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.rotate.js"></script>
<script>
$(document).ready(function()
{
$('#container').css('rotate',6.1);
});
</script>
</head>
<body>
<br /><br />
<div id="wrapper">
<div id="container">
<h1>Hello World!</h1>
</div>
</div>
</body>
</HTML>

Wednesday, 13 October 2010

Simple Grid Layout

I've avoided using grids in CSS layouts for the most part. Whenever, looked into them, it always seemed more prescriptive than it should be. Below is an example of a grid system using the div tag which I hope, seems relatively straight forward. All columns are floated to the left. The '.first' class clears left so that it moves to a new row. I made a slight adjustment to the three column row so that it would be pixel perfect with the others by using the first column 1 pixel shorter. This is something which you need to take into account with columns which don't divide to a whole number.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
margin-bottom:10px;
background:#CCCCCC;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
</style>
</head>
<body><br />
<div class="twoCol first">
Two col
</div>
<div class="twoCol">
Two col
</div>
<div class="oneCol first">
One col
</div>
<div class="threeCol first">
Three col
</div>
<div class="threeCol">
Three col
</div>
<div class="threeCol">
Three col
</div>
</body>
</html>

Using overflow hidden to better align text and images into columns

I can't take credit for this. Credit must go to Soh Tanaka for this blog post
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/

I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
   <h3>Heading 1</h3>
   <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.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
   <h3>Heading 2</h3>
   <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.</p>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</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.

Monday, 11 October 2010

jQuery Functions and Toggle

Below are a few examples of how to create functions in jQuery. Th real beauty lies in the fact that you can create your own library of functions in an external file. You should try and make them as flexible as possible.

See demo.

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>jQuery Functions</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myToggleClass
{
background:#FF0000;
font-size:2em;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
/* Functions are declared here */
$.fn.firstWithoutParameters = function()
{
alert('Without parameters');
}
$.fn.secondWithParameters = function(param)
{
alert('With parameter of '+param);
}
$.fn.grow = function()
{
return $(this).css('font-size','2em');
}
$.fn.growSlowly = function()
{
return $(this).animate(
{
fontSize:'2em'
}, 1500 );
}
$.fn.doTheToggle = function()
{
return $(this).toggleClass('myToggleClass');
}

/* Functions are called here */
$(document).ready(function()
{
$('#first').click(function()
{
$(this).firstWithoutParameters();
});
$('#second').click(function()
{
$(this).secondWithParameters('Jimmy');
});
$('#third').click(function()
{
$(this).grow();
});
$('#fourth').click(function()
{
$(this).growSlowly();
});
$('#fifth').click(function()
{
$(this).doTheToggle();
});
});
</script>
</head>
<body>
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
<p id="fourth">fourth</p>
<p id="fifth">fifth</p>
</body>
</html>

Friday, 1 October 2010

Send a file attachment and send as an e-mail in PHP

This is not the full story. First you need a form to collect the data and put it in a field (in this case) called myValue.

This piece of code takes the field contents, creates a text file and sends it.

<?php
   $filetitle = "testFile.txt";
   $data = $_POST["myValue"]);
   $to = 'jimmy@googlemail.com';
   $subject = 'My subject';
   $filetype = "text/plain";
   $email_from = "jammy@googlemail.com";
   $headers = "From: ".$email_from;
   $semi_rand = md5(time());
   $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";

   $headers .= "\nMIME-Version: 1.0\n" .
   "Content-Type: multipart/mixed;\n" .
   " boundary=\"{$mime_boundary}\"";

   $email_message .= "This is a multi-part message in MIME format.\n\n" .
   "--{$mime_boundary}\n" .
   "Content-Type:text/html; charset=\"iso-8859-1\"\n" .
   "Content-Transfer-Encoding: 7bit\n\n" .
   $email_message . "\n\n";

   $data = chunk_split(base64_encode($data));

   $email_message .= "--{$mime_boundary}\n" .
   "Content-Type: {$filetype};\n" .
   " name=\"{$filetitle}\"\n" .
   "Content-Transfer-Encoding: base64\n\n" .
   $data . "\n\n" .
   "--{$mime_boundary}--\n";

   $ok = @mail($to, $subject, $email_message, $headers);

   if($ok)
   {
   echo "It worked";
   }
   else
   {
   die("It failed");
   }
?>

Send Form information to PHP through jQuery

"Why would I do this?", I hear you ask. The answer is simple, by sending information through jQuery you open yourself up to losing browser refresh and a better UI. There are 2 files in this example:
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.

See demo.

Let's start with the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</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>
$(document).ready(function()
{
$('#sendTheData').click(function()
{
$.post("sendThedata.php",
{
myValue:$('#lname').val()
}, function(data)
{
alert(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>

Now for the PHP file:

<?php
echo 'Got '.$_POST['myValue'];
?>