JavaScript & JQuery

jQuery Tutorial for Beginners: Nothing But the Goods

jQuery Tutorial for Beginners Not too long ago I wrote an article for Six Revisions called Getting Started with jQuery that covered some important things (concept-wise) that beginning jQuery developers should know. This article is the complete opposite; there’s no concepts, no principles, and very little lecturing — just some straight example code with brief descriptions demonstrating what you can do with jQuery.

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).

Keep in mind that this tutorial is just a bunch of straightforward, superficial code examples and very brief explanations for beginners who want to avoid all the jargon and complexities. But I still highly recommend that all beginners get past this stuff by means of a good book, some more in-depth tutorials online, or by using the jQuery documentation.

Inject Custom Ad Blocks Between Paragraphs in WordPress

How to Inject Custom Ad Blocks Between Paragraphs in Older WordPress Posts It’s common nowadays for bloggers to monetize their blogs through the use of strategically-placed ad blocks. BuySellAds ad blocks are the most popular in the web design community. You’ll sometimes also see AdSense ads placed at the top of articles or in other spots.

It becomes a bit of a challenge, however, to include ads in older posts. Nobody wants to go through and edit each post, adding customized code manually, which could be quite time consuming.

The best way to do this is to put the ad code in your single.php page, outside of the function that displays the post. Unfortunately, with this method, the ads are limited in location to either the top or bottom of the article. In this tutorial, I’m going to describe some JavaScript that I wrote that will dynamically embed a custom ad block between paragraphs in all your WordPress posts.

A JavaScript Content Switcher That Works Without JavaScript

A JavaScript Content Switcher That Works Without JavaScript Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

Deep Linking in JavaScript and Ajax Applications

Deep Linking in JavaScript and Ajax Applications Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.

Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.

If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.

Building an Ajax Application with Progressive Enhancement

Building an Ajax Application with Progressive Enhancement If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement. I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented.

The mini-app we’ll be building in this tutorial is an employee information page. It will consist of a series of links at the top of the page that will determine what employee info is displayed in the content area. The information will be held inside of include files, to simplify the process (as opposed to a database or XML file which might be more practical in a real-world app). Although we’re going to use Ajax to display the information, we’re going to ensure that the same information is displayed even when the user is visiting the page without JavaScript capabilities.

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript

Custom Trendy Border Using JavaScript One particular design trend that has caught my attention of late on web development and graphic design blogs is the fancy gray border that surrounds images in blog posts. There are subtle variations of it around the web, which you can see on a number of blogs and tutorial sites.

Sometimes it’s just an image with a solid border and slightly lighter shaded background. Elsewhere it’s a linked image with the same effect, plus a rollover state that changes the color of the border and/or background. And sometimes it’s seen in the ads on a design blog.

Ajax From the Ground Up: Part 2 – Sending Data to the Server

Ajax From the Ground Up - Part 2 This is the second tutorial in a series explaining how to implement Ajax “from the ground up”, so if you haven’t yet checked out the first tutorial, then please do so now, as this one will be building on code from part one.

In the first part, we learned how to create an instance of the XMLHttpRequest object in a cross-browser fashion. In part 2, we’ll discuss the code needed to start communicating with the server. The result of this tutorial will help us send data to the server.

Ajax From the Ground Up: Part 1 – `XMLHttpRequest`

Ajax From the Ground Up - Part 1 It started out as an industry “buzzword” and has slowly progressed into one of the most important web technologies in use today. It is easily implemented using your favourite JavaScript framework. It can provide a beautiful layer of enhancement to many web applications, helping to improve page-load times and greatly improve the user experience. It can also degrade the user experience and cause a web application to fail if a particular client-side technology is unavailable.

Yes, I’m talking about the web methodology immortalized by Jesse James Garrett called Ajax. (As Garrett points out, Ajax is not a technology, but several technologies.) This article will begin a multi-part tutorial series in which I will explain how to implement Ajax “from the ground up”. This series will be geared towards web developers who would like to better understand Ajax in its raw format, using pure JavaScript.

JavaScript Folder Collapser for Dynamic Content (Tutorial)

In this tutorial, I’ll show you how to create a group of collapsible folders using pure JavaScript and some jQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page — wherein the number of folders may be unknown.

Equal Height Columns with JavaScript (Full Version)

As an alternative to “faux columns” and other not-so-clean methods for attaining equal column height in CSS layouts, this tutorial will explain how to accomplish equal columns with pure, unobtrusive JavaScript. This method takes into account top and bottom border thickness as well as interior padding so that the two columns are exactly the same height in virtually every circumstance. And the script is written to ensure that the columns will equalize regardless of which one is taller, so it’s very practical for dynamic content with complex background styles.

This is a full tutorial that expands on a previous post where I outlined a very rudimentary method to achieve equal columns using JavaScript. In the previous article, I discussed the various benefits and drawbacks to using JavaScript for this issue, so I won’t repeat those here.