In other news apart from being snowed on a lot I’ve been learning Adobe After Effects and making some promos for my secret web project. Making good progress with it but knowing Photoshop animation already has really helped. VideoCopilot.com has been a real help learning After Effects and Andrew Kramer is a good coach.

Just got Stormdrum 2 for the studio rig and I’m loving it. The drum sounds are massive! Here’s a little orchestral demo I threw together while I was trying it out. It’s called Attack of the Dung Beetles as I couldn’t think of a better title! There’s a scary thought!

Till next time!

As far as this year goes with this blog I’m planning to do loads more guitar tutorials. I have about three big topics I want to cover so they may come in a few parts each. You can expect a small tutorial pretty soon on some useful pentatonic ideas.

2008 was a bit of a strange one for me as far as guitar goes as I was doing quite a bit of web stuff but I’m going to be scaling that back and really getting back to some good old playing this year. I guess I’d just burnt out a bit on music but that seems to be over now and I’m starting to feel a lot more creative musically ( lot’s of tunes rattling round the noggin! ).

In fact the only web stuff I’m planning is the launch of a new site aimed directly at guitar players. Can’t say much at the moment but it’s going to be amazing. Most of the material is written and I’ll start building the site soon. I’m hoping it’s going to be a big hit in the world of guitar, so stay tuned!!

You can check out the Logic tutorial here.

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

If you want to view the demo you’ll need the lastest Safari version or even better go get the latest nightly build of webkit. This might even work in Chrome but I haven’t checked it. Oddly enough it didn’t seem to like it on OSX Tiger in Coda but in Leopard it was fine? This is all a long way off anyway but good fun to play with!

Menu Demo

First off in the demo you might notice the gradient which is CSS too. Really easy to do that with this….

body { background: -webkit-gradient
           (linear, left top, left bottom, from(#ccc), to(#fff));
}

Now we’ll style the un-order list with some padding and a background image to create a ridge like effect that our menu items will appear out of. The cool thing about this is by using -webkit-background-size’ the image is stretched if you add more items to it making the whole thing a bit more dynamic.

ul#nav {
	list-style: none;
	display: block;
	width: 200px;
	position: relative;
	top: 100px;
	left: 100px;
	padding: 60px 0 60px 0;
	background: url(shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}

Everything else is pretty bog standard really. A simple un-ordered list and that’s about it. The styling for the list item anchor tags is where it all happens. The addition of the ‘-webkit-transition:’ is going to allow us to animate to the ‘:hover’ state.

ul#nav li a {
	-webkit-transition: all 0.3s ease-out;
}

It says ‘all’ animatable properties should animate over 300ms using ‘ease-out’, similar to jQuerys easing functions.

Next we’ll add the styling for the anchor tags with some fancy -webkit-border-radius and -webkit-box-shadow to give it some shape and depth and complete it with a backgroung image for each item to enhance our interface effect, making them look like their coming from underneath the ridge.

ul#nav li a {
	-webkit-transition: all 0.3s ease-out;
	background: #cbcbcb url(border.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
 	-webkit-border-bottom-right-radius: 10px;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
}

The properties we’re going to style are color, background-color and left-padding so let’s add them to the hover: state.

ul.nav li a:hover {
	background: #ebebeb url(border.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}

That’s about it really. No javascript and exactly the same effect. Probably be easy to make this degrade nicely for “certain” browsers. Now all you have to do is wait!

The collapsing effect

Collapsing the panels is the easy bit and just like every other ‘accordion’ and ‘collapsing panel’ plug-in can be achived with a simple toogle() function to slide the ‘ul’ inside each of the widgets when the ‘h2′ is clicked. The jQuery for that would look like this…

$("li.widget h2").toggle(
      function () {
   			$(this).next("ul").slideUp(500);
      },
      function () {
       		$(this).next("ul").slideDown(500);
      }
    );

Notice how we use .next(”ul”) to target the ‘ul’ as it immediately precedes the ‘h2′ which is the trigger for the effect. So far so good!

Next we need to add an ‘active’ class to the ‘h2′ on DOM ready so the user can see the state of the panels when the page loads, hopefully prompting them they can close it. When they click it we just remove the active ‘class’. This is really easy too by adding this….

$("li.widget h2").addClass("active"); // Add the class on page load.

$("li.widget h2").toggle(
      function () {
   		$(this).next("ul").slideUp(500);
   		$(this).removeClass('active');
                // Remove the class 'active' on slideUp
      },
      function () {
       		$(this).next("ul").slideDown(500);
       		$(this).addClass("active");
                // Add the class 'active' on slideDown
      }
    );

Here’s the CSS for the state change….

li.widget h2 {
background:transparent url(images/yourImage.jpg) no-repeat scroll right top;
/* various styling */
}

li.widget h2.active {
background-position:right bottom;
}

Pretty standard stuff! Now comes the interesting bits!

Baking the cookies!

First off I downloaded jQuery.cookies.js. This is a great jQuery plug-in for dealing with cookie operations. The basics of it are….

$.cookie('COOKIE_NAME','COOKIE_VALUE', { path: '/', expires: 10 });
//Make a cookie

$.cookie('COOKIE_NAME','null', { path: '/'});
 //Delete the cookie

$.cookie('COOKIE_NAME');
 //Get the cookie. Returns cookie value.

The problem is that all the tutorials for collapsing panels with cookies only dealt with one panel!..and one cookie! But I have multiple panels that need to have their states saved in multiple individual cookies! As Clay Davis from ‘The Wire’ would say,”SSSHHHIIIIIIIIIIIIIIIT!”.

Making unique cookies

So…first I needed to find the index of the widget I’d collapsed and store it’s state in an it’s own unique cookie. Finding the index or number of the widget can be done with this line…

$("li.widget h2").toggle(
      function () {

      		var num = $("li.widget h2").index(this);
               // Find the index of the widget. Starts at 0.

   			$(this).next("ul").slideUp(500);
   			$(this).removeClass('active');
      },
      function () {

      		var num = $("li.widget h2").index(this);
               // Find the index of the widget. Starts at 0.

       		$(this).next("ul").slideDown(500);
       		$(this).addClass("active");
      }
    );

    //Clicking the first widget 'h2' trigger will store 0 in the variable 'num'.

Now we can create some variables to store unique cookie names and values. Here’s how we do that….

var num = $("li.widget h2").index(this);

var cookieName = 'panel' + num;
// Returns ----> panel0, panel1, panel2  etc....
var cookieValue = 'closed' + num;
// Returns ----> closed0, closed1, closed2  etc.... 

Create the cookies

Now for every widget clicked we can create a unique cookie with a unique value. Let’s see how we set up the cookie…This creates a cookie for the first widget when it’s clicked.

var num = $("li.widget h2").index(this); // Find index of 0.

$(this).next("ul").slideUp(500); // Slide up panel
$(this).removeClass('active'); // Remove 'active' class

var cookieName = 'panel' + num;  // Returns ----> panel0
var cookieValue = 'closed' + num;   // Returns ----> closed0 

$.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 

// Cookie is stored as panel0 with a value of closed0.

Deleting the cookies

To delete the cookie when widget one is clicked or ‘toogled’ we do this…..

var num = $("li.widget h2").index(this); // Find index of 0.

$(this).next("ul").slideDown(500); // Slide down panel
$(this).addClass("active");   // Add 'active' class		

var cookieName = 'panel' + num; // Returns ----> panel0

$.cookie(cookieName, null, { path: '/', expires: 10 }); 

// Cookie with the name panel0 is deleted.

The whole code for this looks like this…..

$("li.widget h2.active").toggle(
      function () {
        	var num = $("li.widget h2").index(this);
   		$(this).next("ul").slideUp(500);
		$(this).removeClass('active');
		var cookieName = 'panel' + num;
    		var cookieValue = 'closed' + num;
    		$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });	

      },
      function () {
        	var num = $("li.widget h2").index(this);
     		$(this).next("ul").slideDown(500);
    		$(this).addClass("active");
    		var cookieName = 'panel' + num;
	  	$.cookie(cookieName, null, { path: '/', expires: 10 });
      }
    );

Getting the cookie values

Now we have to retrieve the cookies and their values to set the state of the widgets when the page is reloaded. This is easily achived using a for loop with an if statement inside it.

First were going to add a line to see how many widgets we have so we know how long the loop should be. I’ve also created a variable to define the ‘ul’ as ‘panel’. If you have nested lists you may want to add :first to the selector.

var l = $('li.widget h2').length;
var panel = $("li.widget ul");

I’ve done this for any widget that has a title or ‘h2′ tag. Some widgets like ‘text’ or ‘RSS’ widgets you may want to leave out. This is optional….

Heres the loop with some comments. c=0 is important it’s the loop index.

for (c=0;c<=l;c++){
// Loop up to the number of widgets. l is the length.

var cvalue = $.cookie('panel' + c);
// Store the value of found cookie in cvalue while looping.

if ( cvalue == 'closed' + c ) {
// If values match do this... 

   	$(panel).eq(c).css({display:"none"});
       // Hide the ul if cookie is found for element.

   	$(panel).eq(c).prev().removeClass('active').addClass('inactive');
       // Change state of effect trigger.
   };
};

If the loop finds a cookie with the name ‘panel0′ it will return a value of ‘closed0′ which tells the if statement to hide the widget ‘ul’ with an index of 0 and remove the ‘active’ class and add a class of ‘inactive’ on page load.

When the page loads any widget that has an ‘h2′ with the class ‘inactive’ will be hidden as it doesn’t have the class ‘active’…….Great!

Major Problem!!!

…..or not! Just like Microsoft there is one massive flaw in this code!!! I’d like to add that up to here took about an hour, what follows took a whole day!

The toogle() function works on the premise that the first part of the code (the first ‘click’ function) will slide the element UP and the second part (the second ‘click’ on the element) will slide the element DOWN. Well what if the element is already UP on page load. Clicking the trigger returns nothing as the element is already UP…?!? You need to click it again to get it to slide down which from a UI point of veiw it pretty…well, crap!

I tried so many different things from ‘if else’ statements to ‘click’ functions, the list goes on. It seemed if one thing worked something else wouldn’t. It was like a dream that you’re chasing something but can never catch up with it. At one point I thought I was losing my mind!

The answer turned out to be really simple in the end (Doh!) an lay in something I’d added to the code but never thought of using… the ‘inactive’ class. I discovered that if I duplicated the toggle() function and reversed the functions so the first click performed a DOWN slide and assigned that to $(’li.widget h2.inactive’) it produced the desired result. Not very elegant but then neither am I!

The whole thing looks like this….

$(document).ready(function(){

$("li.widget h2").addClass("active");

var l = $('li.widget h2').length;

var panel = $("li.widget ul");

for (c=0;c<=l;c++){

   var cvalue = $.cookie('panel' + c);

   if ( cvalue == 'closed' + c ) {

   		$(panel).eq(c).css({display:"none"});
   		$(panel).eq(c).prev().removeClass('active').addClass('inactive');
   };
};

$("li.widget h2.active").toggle(
      function () {
        	var num = $("li.widget h2").index(this);
        	var cookieName = 'panel' + num;
    		var cookieValue = 'closed' + num;
   		$(this).next("ul").slideUp(500);
		$(this).removeClass('active');
    		$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });	

      },
      function () {
        	var num = $("li.widget h2").index(this);
        	var cookieName = 'panel' + num;
     		$(this).next("ul").slideDown(500);
    		$(this).addClass("active");
	  	$.cookie(cookieName, null, { path: '/', expires: 10 });
      }
    );

$("li.widget h2.inactive").toggle(
      function () {
        	var num = $("li.widget h2").index(this);
        	var cookieName = 'panel' + num;
     		$(this).next("ul").slideDown(500);
    		$(this).addClass("active");
    		$(this).removeClass('inactive');
	  	$.cookie(cookieName, null, { path: '/', expires: 10 });

      },
      function () {
        	var num = $("li.widget h2").index(this);
        	var cookieName = 'panel' + num;
    		var cookieValue = 'closed' + num;
   		$(this).next("ul").slideUp(500);
		$(this).removeClass('active');
    		$.cookie(cookieName, cookieValue, { path: '/', expires: 10 });
      }
    );

});

Conclusion

Multiple collapsable panels with cookie states for every unique panel. Awesome!!!

I hope somebody finds this useful and is spared the brain ache I went through. To coolest thing is as the demo relies on Wordpress’ markup you can drop it straight into a theme your developing. I’m going to turn it into a plugin soon too (once I’ve figured out how to do that!). I’d love to hear if any knows of a better and more elegant way of doing this, so leave a comment if you do!

For a demo, look no further than the sidebar menu at the top of this page. Close some widgets and reload the page!

Infact that’s what the fine folk over at augasm.us do so you don’t have to! Came across this site a little while ago and if your into indie/alternative music with a slightly offbeat flavour this could be the site for you. I recommend checking it out!

So here we go….At

No5: Pendulum - In Silico

Great production and kickass drums! Two vital ingredients to a great record for me. This quasi Drum & Bass/Punk/Pop album has some great songwiting and arranging as well as being a really interesting and polished programming/production masterpiece! Did I mention the kickass beats!

The Other Side

No 4: Goldfrapp - Seventh Tree

Goldfrapp have always been a favorite of mine. The combination of Alison Goldfrapp’s smooth vocals and Will Gregory’s production and arranging are a match made in heaven. Nuff said!

Caravan Girl

No 3: Paul Gilbert - Silence followed by a Deafening Roar

Former Racer X and Mr Big guitarist Paul Gilbert returns without the singing and just does what he does best. Play amazing, over the top guitar! A lot more funky with some 70’s rock flavours this is a great guitar record. And a bloody nice chap with it!

Norwegian Cowbell

No 2: Wallis Bird - Spoons

Wallis Bird from Ireland plays guitar left-handed not because she’s left-handed but because she got all her fingers chopped off on her left hand ( she got them put back on! ). It doesn’t seem to have stopped her though as she’s one of the tightest acoustic rhythm guitarists I’ve heard in a while. That aside, she has the knack of writing really catchy songs and an awesome voice too! ‘Spoons’ is so infectious as an album with it’s mixture of folk and pop ( and even a hint of prog! ) it’s hard to stop listening to it! A breathe of fresh air! 5 Stars!!! Thanks Aurgasm!!!

Blossoms in the Street
Interview

No 1: Everything by The Bird and the Bee….ever!

When I first heard ‘Again & Again’ by The Bird and the Bee I thought it was the catchiest song I’d ever heard. I immediatly bought all their records and they’ve been on loop ever since. Consisting of Inara George ( I only found out after that Inara is the daughter of one of my all time heroes Lowell George from ‘Little Feat’ ) and pianist and producer Greg Kurstin. A totally magical mix of Jazz/Electro/Pop meets Burt Bacharach the Bird and the Bee just couldn’t be any cooler if they tried. Do yourself a favour and have a listen. If you like great pop music then the Bird and the Bee have it all!!!

Again & Again (2007)
Polite Dance Song
La La La

Honorable Mentions….

The Racontuers - Consolers of the Lonely

Jack White and co provide some kickass grooves and some of the best guitar sounds ever put to tape. He really is a very talented bloke!

Greg Howe - Sound Proof

Took a while to get into but now I’m there. Served as a reminder that you’ll never be as good as Greg Howe!

Brent and Randy Mason - Smoking Section

….Unless your Brent Mason! Nashvilles top session guitarist more than delivers with a mix of Western Swing/Country/Jazz and Blues. Totally baffling!!!

Dan Le Sac vs Scroobius Pip - Angles

Left field british Electro/Hip Hop. Totally mental but really inventive production and lyrics. Stand out track ‘Look for the Woman’

Dan Le Sac Vs Scroobius Pip Look For The X-Factor Hilarious…!!!

$("#box1").fadeIn("slow", function(){
  $("#box2").fadeIn("slow", function(){
    $("#box3").fadeIn("slow", function(){
      $("#box4").fadeIn("slow", function(){
        $("#box5").fadeIn("slow");
      });
     });
   });
});    

…… you can instead give them a class of ‘box’ and find the amount using .length; and use an if statement to loop through the until all the relevant elements are visible using a callback function.

var i = 0
var n = $(".box").length;

function showbox() {

	if(i <= n){ 

	$(".box").eq(i).fadeIn(600, function(){ i++; showbox(); });

		    }
        } showbox();

It’s a lot more efficient code wise and produces the same effect. Here’s the same thing but using a ‘click’ event to trigger the function.

var j = 0
var a = $(".list").length;

	$("#trigger").click(function showlist(){

		if(j <= a){
		$(".list").eq(j).fadeIn(200, function(){ j++; showlist(); });

		 }
	});

Might be a nice effect for a menu? I was going to use it to fade in the posts on the blog homepage but IE7 can’t render one transparent PNG over another when faded. It comes out looking like a jaged GIF with the top PNG’s transparent pixel looking black instead. Once again IE ruins everything!!!

View Demo

I was asked to do some arranging on the Johnny Borrell ( Razorlight ) track ‘Carrickfurgus’ which was in the demo stage at the time. Nick had the files which were in a pretty basic state with some loops and a vocal track and a rough sketch of the chords.

We eventually decided to re-record the entire track and just keep the vocal and ended up co-producing the track together. Nick took care of the engineering and mixing duties and I arranged the music and eventually ended up playing or programming all the instrumentation!

The whole thing was done in one day from start to finish in Studio 2 at Air.

It was only the fact I saw the track in my inbox that I remembered it. I went on iTunes and sure enough there it was. The album features tracks from KT Tunstall, Yusif Islam, Hot Chip, The Go! Team and Will.i.am to name a few. It’s called Amazon Tribe - Songs for Survival and is available from all good music retailers.

On a guitar note, I used my fantastic Atkin ‘Dreadnought’ for the acoustics ( and percussion! ) and my Telecaster though an old Vox AC30 with a Custom Audio Electronics boost pedal by MXR for the electrics.

Go out and buy it, it’s for a good cause! Did I mention we all did it for free!

I was great to sit around and talk about guitar to a bunch of guitar heads as it’s something I don’t get to do all that often. Still too busy to teach now…which is great!

Here’s me back when I was teaching. As you can see I really loved it!!!!

Carleen Anderson was also there giving a vocal masterclass too. She’s about the only musician I’ve ever been a bit starstruck with as I just think she’s bloody amazing!

Now I think about it I might do some practice!

The whole thing was in aid of the NSPCC which is a great cause. It’s apparently the first time that there has been this sort of musical extravaganza at a catwalk show so it was cool to be involved. The music varied from South American rap, classical, rock and funk. The whole thing was conducted by top man Mark Stephenson. All in all a fun night.

It was attended by lots of famous people ( yawn! ) including Claudia Schiffer, the Jagger mob and I think I even saw Nigel from Eastenders ( from back in the day )!

Here’s a pic of with some of the band. From left to right: Ana Paula Aranjo, Fernanda Bussinger, Gabriel Currington ( composer ), me, Martin Goulding, Bellatrix, Alyusha Chagrin.

I’ve been doing some other experiments recently with CSS3. Here’s a rather neat animation using transform:skew. Safari 3/4, Google Chome only!!!!

Cube animation

Probably not very exciting unless your into web stuff…which I am!

Doing a very bizarre gig tomorrow. See you then!