Posts Tagged 'Javascript'

I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s 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 fields
The JavaScript
firstly 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 …

I’d 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 font
first of all you’ll need to head here and convert …

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 I’d love to hear your feedback.
I thought i’d 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. I’ve 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 Code
Getting …

Over a year ago I wrote an article on scrolling a page using Prototype, just to update things here I’m 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 it’s 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. It’s 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. I’ve 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 …

It’s 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 there’s 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.
What’s in the Package
jQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy …

I’ve put together a nice little collection of scripts over the past year or so, and have decided as it’s 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.

What’s in the …

I’ve 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 photo’s 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 i’d pick this up and show you how to parse XML. It’s pretty much the same although the big difference with using XML is that this won’t work for xml files that don’t sit outside of your domain as we’re making a standard AJAX request and you can’t make cross domain ajax request unless you’re using JSONP, more of which can be found here.
The XML
Here’s our XML code, and for the purpose …

I recently had the need for some client side form validation and happened to find the jQuery Ketchup plugin. It’s 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. You’ll need to download the plugin files to get started. once download follow these simple steps to implement it into your application.
Step 1
include the files in the plugin as shown …

I’ve 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 working …

I’ve 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 …

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 you’re manipulating the DOM you will surely come across the problem of when you dynamically add an element to a page you can’t 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 …

Every couple of weeks I seem to find myself checking 9rules.com to see if they’re accepting new submissions as I’d like to submit this site. Any how on this occasion I couldn’t 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. I’ve …

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 include slick tooltips to reference points on your charts, it’s compatible with all standard web browsers, the setup for a graph as demonstrated below is simple and uses the JSON data type, there are also …

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 essentially its a method which allows us to execute cross domain ajax requests without too much fuss. This post really follows on from my article about scraping content from a page but also allows you …

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 it into two section allowing you to hide and reveal the text when needed. The plugin works well if you have have for example a set of user generated comments where you want to keep …