If they stick to their timetable Google is due to step into the world of web browers later today with the release of their own browser going by the name of Google Chrome.

It does look like Google got a little ahead of themselves and had made some screenshots and a product tour public at http://gears.google.com/chrome/ but these have been hastily taken down.

Download: Google Chrome

In this demo we’ll be creating a simple tabbed interface using html and css and utilising the power of JQuery to control the appearance of the content. The mechanics of this tutorial are to have a tabbed interface that when a link is clicked displays the corresponding information in the content area below. The interface will degrade gracefully if the user has javascript disabled.

Demo – View demo

The Visual Layout

Firstly we are going to look at our visual layout. For this tutorial I have kept the layout simple with a common tabbed interface with a content area below.

The HTML

Secondly we are going to set up the page structure for our tabbed interface using an unordered list for the navigation controls and a container div for each section. Each link is linked to each section div by the divs corresponding unique id, this is required for our jQuery and we will cover this in the next section.

<div id="tabs">
<ul>
<li><a href="#tab-1">Tab One</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>
</div>

The CSS


#tabs {
font-size: 90%;
margin: 20px 0;
}
#tabs ul {
float: right;
background: #E3FEFA;
width: 600px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
}
#tabs ul li.active a {
background: url(img/nav-left.gif) no-repeat left top;
color: #333333;
}
#tabs div {
background: #CEE1EF;
clear: both;
padding: 20px;
min-height: 200px;
}
#tabs div h3 {
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 1px;

#tabs div p {
line-height: 150%;
}

The JQuery

I have commented each line of the jQuery to explain why each step was undertaken.

<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide(); // Hide all divs
$('#tabs div:first').show(); // Show the first div
$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
$('#tabs ul li a').click(function(){ //When any link is clicked
$('#tabs ul li').removeClass('active'); // Remove active class from all links
$(this).parent().addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#tabs div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
</script>


Today I found a trailer for a brand new sitcom coming to ITV2 later in the year called No Heroics. The 8 part story will follow the lives of four London-based superheroes and their struggles in their everyday lives. The series stars Nicholas Burns and Claire Keelan from Nathan Barley, Patrick Baladi from The Office (The British One not the crappy US version) and James Lance from Spaced, amongst others.

If the trailer is anything to go by it looks like one to watch out for and a welcome change from reality TV.

I finally bit the bullet this week and coughed up the $299 (approx £150) for an expidited review of my business website www.apricot-studios.com. I had been considering Yahoo Directory entry for a couple of years and with the strong pound against the very weak dollar it finally made sense to give it a try.

The category I opted for is “Website Designers” and I expect the real return on investment will be the additional targeted traffic the listing will bring. Although I’m also interested to see if there is any increase in Google Pagerank or if it will open up Google sitelinks for my site too.

Thankfully the entry was approved this morning, though I never thought inclusion was ever really in doubt. I’d be interested to know if anyone has had an entry refused – with the cost being non-refundable that’s got to be a pain?

I’ll post more when I have more results.

I received an email this morning notifying me that as of April 1, 2008, the Adobe Stock Photos royalty-free image service is to be discontinued. Apparently Adobe have made this decision in order to focus efforts in other areas.

Here’s hoping some of those efforts are focused towards improving the next release of Fireworks.

Welcome one and all. Yet another blog in the already overflowing sea of interweb blogs – great!  We are looking to be a little bit different -  we’ll were going to give it a try.

Hold on tight – it’s going to be a bumpy ride.