Id never used Cufón font replacement until a few weeks ago when I was sifting through some code that another designer had written and noticed that he was using Cufón. Not that many people seem to know about Cufón though. Cufón uses a blend of font generator tools and JavaScript to create a custom font renderer in canvas and VML. Here’s how to use Cufón to render the Junction font for all your headers.Generate the fontfirst of all youll need to head here and convert .

I thought Id share a little technique that I occasionally use when coding forms with a limited amount of space. Its a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fieldsThe JavaScriptfirstly we assign a class of form-field as well as adding the attribute defaultVal with the text that we want to display in our input field.The ...

The MySpace Search API allows you to search MySpace for user, videos, images, and music. With an individual feed for each search item. It is designed to function like a search on the MySpace website and to have a response format that is compatible with OpenSocial. The API returns either JSON or XML and in this tutorial ill be using PHP and CURL to parse an XML response to build a simple MySpace search page.Application useOpen Search could be used to mash data using the ..

Regular readers of Papermashup will have seen the post that I wrote last week on Easy Poll, the personal project that I launched a few weeks back that allows you to create a simple 2 answer poll that you can share and gather feedback on. You can read the post about it and check out easypoll.papermashup here Id love to hear your feedback.I thought id cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.The ...

I was scouring the internet for inspiration the other day and revisiting some interesting sites and noticed that MailChimp had changed their homepage integrating a slick full page slider. After a little investigation I noticed that they were using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images. Ive been looking for a full sized slider for a while now and was about to write a tutorial on building a plugin that does the same job.The CodeGetting &

Over a year ago I wrote an article on scrolling a page using Prototype, just to update things here Im going to run through scrolling a page using jQuery and the animate() function. Automated page scrolling is useful in many cases. A good example of this technique can be found in the personal project i worked on a few months back We Deliver which you can find here. The page scroll in this project was particularly important as its a single page site in that ...

I was sat in the sun at the weekend and sporadically decided to do a little project like wedeliver you can read about the adventure I had building the 24hr project here. This project on the other hand probably took about 24hrs to complete but I built it over a few days. Its basically a site where you can create a simple 2 answer poll, you then take the link to the poll and share it on your networks allowing other users to participate ...

I was recently in a situation where I needed to count a number of list items and pass the values to a form, I got around this problem by using JavaScript arrays, looping through the list items and picking up one of the attributes. Ive created a demo page to show an example of this here. Lets run through the code. We start with our dom ready function which has two click functions one function toggles a class which is either added or removed from ...

Its so easy to go on the hunt for a plugin for a project and end up with multiple plugins all doing different things maintained and managed by separate developers, but wait theres a common solution to this problem with jQuery Tools. jQuery Tools packages up some commonly used functions which are relatively easy to manipulate and use in any project.Whats in the PackagejQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy

Ive put together a nice little collection of scripts over the past year or so, and have decided as its approaching summer in the UK (sorry winter in Australia!) to do a download bundle of 20 assorted scripts where you can get the lot in one click for free! Although donations are also much appreciated. Check out the list below for all the details of the package. This collection is based on a variety of different techniques, from CSS, PHP jQuery to MySQL.Whats in the &#

Navigation is a key feature on any site and for a front end web designer or developer theres nothing more important than creating the perfect navigation menu. Today Im going to run through how to create a pure CSS navigation strip using basic HTML and CSS. This will give you a basic understanding of how to put together a CSS menu that works efficiently. This tutorial is aimed at beginners who are learning CSS.The HTMLThe HTML used to generate our menu are simple list items. &

Ive recently been working on a project where a client came to me with an idea to create a feature on their homepage which shows three sections of dynamic content, this lead me to think about writing a tutorial on how to create a jQuery feature such as this. I remember a few years back seeing a similar technique on a website but back then I had no idea how to create such a thing. You can check out the demo here.the photos used in ...

Last week I signed up Gravity a new site setup by a few guys that used to work at MySpace. As i was using the site I noticed these great little notifications popping up in my browser, Mac users will be familiar with this as they work in the same way as Growl notifications.I thought it was interesting that this technique of displaying live information to users could be presented in this way, so i went on the hunt for a similar jQuery plugin and ...

I recently ran through the technique of parsing JSON with jQuery and thought id pick this up and show you how to parse XML. Its pretty much the same although the big difference with using XML is that this wont work for xml files that dont sit outside of your domain as were making a standard AJAX request and you cant make cross domain ajax request unless youre using JSONP, more of which can be found here. The XMLHeres our XML code, and for the ...

I recently configured my site for mobile consumption, by using the WordPress Mobile Edition plugin along with the Carrington Mobile 1.0.2 theme. I noticed when I bookmarked my site using the iPhone that the home screen icon as missing. Today Im going to run through how to create and setup the home icon for your website.Create the iconYou will need to produce an image in PNG format that:Measures 57 x 57 pixels, with square corners the (if the image measures other than

I recently had the need for some client side form validation and happened to find the jQuery Ketchup plugin. Its a simple and flexible plugin that can be modified and styled for your own needs, plugin modifications are encouraged although the out of the box code will work just fine for your basic needs. Youll need to download the plugin files to get started. once download follow these simple steps to implement it into your application. Step 1include the files in the plugin as &#

A quick search on Google for the term Social Media currently retrieves over 203,000,000 results. Just before Facebook started to make a name for itself and emerged on the scene back in late 2006 the buzz word on the internet was Web 2.0, even then people were quick to chime in with there 10 pence worth and were happy to give you their opinion on the next best thing on the internet. This unfortunate movement also bought with it a hell of a lot of ...

Whilst working on my most recent project We deliver, I had the need for a simple logo that wasnt overly fussy but still slick contemporary and simple to design. I thought Id put the design stages together into a short blog post explaining the simple technique.The most important part of typographical logo design in my view is the font. A great free resource for fonts is DaFont.com, in fact this is where I found both of these fonts. the main font for the logo is ...

Ive been meaning to do something sporadic and creative for a while now but have never got around to it until now. I decided to challenge myself to build a site (wedeliver.papermashup.com) in under 24hrs from concept and design through to development. The site is a silly idea based on a simple delivery website with the twist of allowing users to deliver their precious package by an animal of their choice, much like we did in the war with carrier pigeons. I started by w

Ive recently been working on a large project that required a lot of JSONP encoding and parsing. To be honest its been a bit of a nightmare because of one simple problem. the formating that JSON spits out onto the page is non-existant its like a printing out a PHP array and viewing it in your web browser, however with an array you can either view the page source and see the formating or simple print_r($array); within pre tags which will format the array visually ...

Ive never really got the hang of PHP frameworks and have tended to use my own custom built CMS but even with this I still find myself writing the same code over and over again. In the past Ive dabbled with CakePHP and the Zend Framework and not really got very far, so a few days ago I downloaded CodeIgniter. Although Im extremely new to this I was pretty blown away by the simplicity of setting things up and getting an actual webpage that processes ...

Is your site reaching audiences that would probably rather content in their native language? well theres a simple solution which models itself on the popular social sharing site AddThis. TranslateThis developed by Jon Raasch, a front-end web programmer from Portland, OR is a very easy to implement translation solution that uses the Google Language API and AJAX to translate your page content on the fly.Why is it good?It has several advantages over using the Google translate widget

I was set a challenge last week to complete a Rubiks cube after tinkering with one by a colleagues desk and managing to get a complete line of matching colours with little effort. In the past ive never fully understood the concept and complexity of how to complete this popular 80s puzzle. However the same way as a programmer I work out the right way to complete a coding issue by using a set of pointers and algorithms, the same is applies to completing the ...

I wrote a post mid last year about protecting your site images from being hotlinked as I found a site that had word for word scrapped one of my blog posts, you can see the post here, and I really wanted to go back to this and run over a few more things the .htaccess file is useful for. I mainly use the .htaccess file to rewrite URIs for example http://mysite.com/site/pages/contact.php would be accessed by visiting http://mysite.com/

Ive come across quite a few sites that explain how to create flexible CSS3 buttons but ive never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So ive taken their example and tweaked it to fit my needs. Its worth noting that if your using Internet explorer youre not going to see all these effects as IE still doesnt support ...

Every couple of weeks I seem to find myself checking 9rules.com to see if theyre accepting new submissions as Id like to submit this site. Any how on this occasion I couldnt help but notice the browse by community section at the top of the page. Clicking the button reveals a section that contains a list of category names. I thought this would be a good example to base this post on, and to show how simple it is to achieve this effect. Ive ...

When I first started using jQuery to make AJAX requests event delegation always caught me out as I never understood what it was or how to use it. If youre manipulating the DOM you will surely come across the problem of when you dynamically add an element to a page you cant just go and add an event handler to this new element and expect it to work. For instance say I have a list item which is clickable with the aid of a click ...

As I was traveling home from work tonight reading the London Evening Standard, as I usually do, I couldn't help but notice the headline: "At 25, I'm not past it at work, I'm 'before it." This got me thinking about being a young developer in a fiercely competitive sector and ...

Planning a project thoroughly is often more important than the design, app or site. If a project is badly planned and organised then your heading for a disaster. Wireframing is usually one of the first steps to really mapping out your user flows, and is a place where all the ...

If you think you can just build a website and expect it to perform well you can think again. Getting a website to the top of search results is every marketing managers goal. Im going to run through five key points that will put you in good stead to ...

As a designer it's usually quite hard to get constructive feedback on a design. All the people I know are either friends or relatives who only say, 'Yeah that looks good', or 'Oh I like that'. Fivesecondtest.com aims to fix this problem by allowing you to upload any design and ...

"Easy PHP Websites with the Zend Framework" shows you how to use the powerful Zend Framework to build websites with amazing speed and efficiency. Embracing a teaching strategy of learning by doing, showing you how to build website features you'll actually want to use within your own websites. Among other ...

Google Analytics is great to tracking your site traffic. I started out using Statcounter.com to track my site visits, but over the years i've wanted more information so I switched over to using Google Analytics. Google provides an excellent dashboard to monitor and dig into your sites traffic and drill ...

Thanks to everyone who entered the competition! A good number of you entered and hopefully we'll run more in the future. Congratulations to, @jamieyork @santanajames @encantado_netDidn't Win?EasyPHPWebsites.com has provided PaperMashup readers with a special discount price of just $17.50 (£10.55) for the e-book version of "Easy PHP Websites with the ...

I recently revamped my portfolio as it was looking dreary and completely uninspiring, I wanted to present my work in a way that was both easy to navigate, easy to maintain and most importantly looked smart and un-cluttered. When I was brainstorming for ideas, I initially thought I would break ...

I've had a few pagination scripts over the years but I thought i'd share the one that i'm currently using as it's a useful script to have in your toolbox. As a developer you'll soon find a need to paginate data when displaying contents from the database, and rather than ...

I stumbled across this pretty useful jQuery Plugin the other day that i though some of you would appreciate. It was written by Jeremy Martin a few years back. The plugin solves a big problem in that, if you have too much text you can not truncate it, or split ...

As the title describes we're going to look at making cross domain ajax requests using JSONP I'm also going to show you how to get data from a MySQL database and encode it into a JSON string which can be parsed using JavaScript. JSON stands for JavaScript Object Notation and ...

There are some great JavaScript graph libraries out there and one that's recently come to my attention is Highcharts.com which is compatible with both the jQuery and Mootools frameworks. To get started point your browser here where you can download all the files you need including examples. Highcharts features ...