Posts Tagged 'Javascript'

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 …

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 up my portfolio into categories to make it both easier to navigate and more structured in presentation. After much consideration I completely scrapped categories and decided on the simpler approach of having large thumbnails with …

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 down the information to see exactly what content on your site is popular. For advertising campaigns at MySpace we use a JavaScript technique to track specific clicks on content on a page, with the ability …

“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 topics you’ll learn how to manage data submitted through web forms, send e-mail through your website (both text and HTML), manage the user registration, login, and password recovery processes, and even create a simple social …

So we have content on another domain that we want to load via AJAX into a page how can we do this?…. This was a question that was put to the other day at work. More experienced web developers will know that JavaScript doesn’t allow cross domain XMLHttpRequest’s or AJAX requests (Asynchronous JavaScript and XML). There is a ‘dirty’ way to get around this using PHP and CURL to pull the HTML of the page you want to get the content from so JavaScript …

Inline editing as it’s known, or being able to edit content directly on a page is a great tool have under your belt. I’m going to run through exactly how it works as well as how to POST the updated text content through to a PHP script for server side processing to put in the database.
The Code
It looks a little complex so i’m going to quickly run through exactly what’s going on.

When you visit the demo page are presented with a block of text. …

API Knowledge
A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more …

Yesterday I had the need to read a URL GET variable and complete an action based on the url parameter. I searched high and low for a solution and came across this little piece of code on Snipplr. It basically reads the current page url, perform some regular expression on the URL then saves the url parameters in an associative array, which we can easily access.
So as an example if we had the following url with the javascript at the bottom in place.
http://papermashup.com/index.php?id=123&page=home
All …

Learning a new programming language can be daunting to say the least. I’ve recently cracked it when it comes to jQuery. I wouldn’t say Im a pro by any stretch of the imagination but I can successfully build applications. It wasn’t an easy ride learning a new syntax, I’m going to run over a few tips and techniques that i found useful learning both jQuery and PHP.
Take Time To Learn
In order to get into your new programming language you need time and commitment to perfect …

In this tutorial we’re going to take an RSS feed from the top videos page on MySpace and make a widget to display the latest videos using jQuery pagination, ajax and a spot of PHP to parse the feed. The basic logic of what is going on is simple. We parse an XML file echo all the results, then we use the quick paginate plugin to display a select number of results with the option to browse pages.
Lets first take a look at the PHP …

How many times have you booked that holiday or purchased a new gadget and been presented with a button that says ‘Print your receipt’? Users generally have to be pushed into executing a physical action such as printing a receipt or confirmation letter. So to do this we can use a simple line of JavaScript that goes in the href of our link to open the print page prompt window.
It’s also worth pointing out that to get the best results, its best to create a …

Carrying on the theme from yesterday with the jQuery & PHP username availability checker, i’ve got a quick tip to improve the user experience, so the user knows exactly where they are in the filling out complex forms. We could use CSS to do this alone, however it doesn’t work in Internet Explorer. So in order to cater for all browsers we can achieve the same effect with JavaScript.
The HTML
So in the code below we simply have a form input field wrapped in a div …

I was reading Nettuts.com this week and saw the post by Matt Vickers on checking the availability of a username with Mootools. I tend not to use Mootools so i thought I’d replicate the technique using jQuery. The code degrades gracefully if JavaScript is disabled, it is advised that you always check the username against the database again, just before you add any data to the database.

The JavaScript

So to start with we have our jQuery on document ready function, within this we have an event …