Mick Redman

Wednesday, 20 October 2010

Simple Grid Layout #2

I have extended the simple grid layout here to include rows of differing sizes within columns.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</div>
</div>
</body>
</html>

Applying Social Bookmark Links to your website

I wanted to create more links to my website for SEO purposes. To make it easy for people to add links to my website from social networks. I wanted to do this with the minimum amount of coding and updating. I therefore used http://www.addthis.com/
All I had to do was create an account (which was free).
Click on the "Get Your Button", button.
Copy the code.
Paste it into an appropriate location in my web page.

The code looks something like this :


<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=yourusername" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=yourusername"></script>

I did 2 things beyond this. I created a div wrapper around it thus:
<div id="socialWrapper">

<a href="http://www.addthis.com/bookmark.php?v=250&username=yourusername" class="addthis_button_compact">Share</a>

</div>

</div>

I then, applied some style to my wrapper in the stylesheet thus:

#socialWrapper

{

position:fixed;

top:0px;

right:1%;

background:#FFFFFF;

}

This way, the social bookmarks would always appear at the top right of my browser window and would not clash with the page content.

See demo.

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>