Posts Tagged 'jQuery'

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 …

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 …

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 …

Following on from yesterdays little article about adding a simple JavaScript print link to a page, today I’m going to cover adding the functionality with jQuery for the user to adjust the text size on a page. It is important from an accessibility point of view to give your users the ability to re-size the text, and its also a handy trick that could become useful for building stand alone JavaScript applications. You will also need to include the jQuery JavaScript framework.
The Code

<script type="text/javascript">
$(document).ready(function(){
…

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 …

I’ve never written a jQuery tooltip script before so i thought i’d give it a go and write my own. Its very much in the experimental stage but i thought i’d open it up to see what the community has to say about it. I had the most trouble with the ajax tooltip and getting the content to display in the tip. I know there are plenty of jQuery tooltip scripts out there but i really wanted to see how they were made, and the …

I’ve been working on a lot of JavaScript and PHP projects at work recently which is one of the reasons why I haven’t written a post for the last week. During my many projects i had the need to use an ‘autosuggest’ script that would, in my case, get a list of 10 schools based on the users input in a text field. I thought I’d share this with you as it’s probably easier than you think to do with JavaScript.
Lets run through the JavaScript.
There …