Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Hiya,
Well this blog post is tell you all about my good friend Sam Marks website Quilo that I have been working on.

Me and Sam used to work together for a few years at a company called Momo Web Communications and after both leaving there and progressing our careers we recently got back in touch to do a great skill swap. What we decided to do was that I would build the XHTML, CSS and put into onto a CMS platform (obvioulsy Umbraco) for him to easily update and edit his site, in return he agreed that he would redesign my blog for me. So watch this space very soon for my site update - all I can see its going to be very different from what it is now!

So heres a very quick rundown of what I done in this project

• Handcode the XHTML templates and the appropiate CSS required from the Photoshop design Sam gave me
• Use jQuery to create a semi-transparent image caption that slides up when you rollover the image
• Use jQuery to create a feature slider, which slides panels horizontally to view new content
• Use the Umbraco opensource .NET CMS solution to allow Sam to update his site easily with new content
• Create an XSLT script to use in Umbraco, to show Sams latest tweet from Twitter

Hello with a few days to go until Christmas, I thought I would share with you a mashup tip using Umbraco to list my recently listened to tracks using the Last.FM service and then using jQuery I am able to do an AJAX call to get the album art image remotely.

Before I start I will show you the method that can achieve this result entirely using XSLT in Umbraco however this is a slow process and is alot quicker to use the jQuery method which I will show you afterwards.

XSLT solution
Below is the XSLT code for you to view how easy it is to create a mashup just using XSLT in Umbraco.

 ]>





	
		
		
		
		
		
		
			
			
			
			
			
			
			
			
			
				
					
					
				
				
					
					
				
			
			
			

by

I have neglected my code-snippet blog, so this evening I share with you another easy but effective jQuery demo.

This demo shows how to click smaller thumbnails to swap a larger fullsize image, this is ideal for product gallery on an e-commerce site, but there are many other uses as well.

Click here to view the jQuery image switcher demo
(View the source of the demo page to see how it works, with lots of comments to help you understand what is going on)

This is a brief post revisiting my original post on File type icons on links using CSS however this time around I will be using jQuery to acheive the same affect as CSS3 is not fully supported in all browsers yet, so this is a good alternative.

Click here to view the jQuery demo on file type icons on links
Note: I need to address the CSS issue that is causing the icon to be clipped from the bottom.

With another ‘revisited’ post done expect to see some more jQuery examples I have been working on shortly, until then enjoy

Hello all,
After a long time away I have decided to start using this blog again to post about useful code snippets mainly for my own benefit, but feel free to use or modify it to help you learn.

This is a very quick blog post revisiting the alternative table row styling AKA “Zebra tables” blog post I made back in May of this year, I have recently started using the Javascript library called jQuery, which I have managed to revisit this topic and reduce the lines of code dramatically. By using the jQuery library I have manged to produce Javascript which is easy to read and understand.

Here is the example of the improved alternative table row example.

As always I look forward to hearing your comments.