Event delegation in JavaScript is the concept of using a single event listener to manage all of the mouse and keyboard events on a given page thus improving performance.

Often web developers will assign an event listener to each element that is associated with some effect or bit of AJAX. For example, perhaps I have three buttons on a page each of which will initiate a specific and unique animation when a user clicks…

Editor’s Note: When I started this blog nearly three years ago, one of the first things I did was write a series on showing and hiding elements on a page. The posts were very basic, as was my knowledge at the time. At best, they demonstrated an incomplete answer to the question of how to selectively reveal content based on user interaction. At worst, they encouraged a solution without any regard to accessibility…

In February, we announced the roll-out of Google’s next generation ad server, DoubleClick for Publishers (DFP). Today, we completed the upgrade of Google Ad Manager publishers to DFP Small Business, a streamlined version of DFP designed to meet the needs of growing publishers, and we made this platform available globally to all publishers. If you’d like to sign-up online, you can do so now by visiting the DFP Small Business website…

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values…

Want your Twitter feed to show up on your product detail pages? How about adding related videos from YouTube?

Recently, I was shopping on Skateboard.com when I discovered that the site doesn’t only offer related products on its product detail pages, but includes related videos and news articles from GrindTV—which makes perfect sense for this retailer’s customers.

In this post, I am going to demonstrate how to use a PHP class called, SimplePie, to parse RSS feeds and place them neatly on a retail site…

If you do a lot of WordPress development work, you’re bound to receive WordPress database sometimes that you don’t have an admin account for. We at OrangeValley at least, do have that issue. We usually test, if possible, on a database the client provides us with. We used to have to go into the database and change an existing user, or add a new one by hand, and well, that wasn’t too optimal.

Quite a while ago I came across a script (mentioned before in a WordPress Scripts post) called emergency…

How does one deploy cloud computing for ecommerce systems? It’s really about the architecture, understanding your own requirements, and then understanding the cloud computing options that lay before you. Here is a quick and dirty guide for you.

Step 1: Understand the business case.

While it would seem that moving to the cloud is a technology exercise, the reality is that the core business case should be understood as to the potential benefits of cloud computing…

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient…

The primary benefit of using a JavaScript library like jQuery is speed of development.

jQuery plugins take development speed a step further, creating complete widgets or effects that can be integrated into nearly any site design in a matter of minutes.

You can think of it this way. The library essentially creates a number of short cuts that solve common JavaScript challenges. And a plugin uses the library not to address a task, like adding an event listener, but rather to create an entire solution like a content slider…

By Paul Andrew

In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more…

Category: Tips & Random Tags: HTML5

Google Ajax API does location lookup, so it makes it a great fallback for the native HTML5 Gelocation API. Of course, the fallback will never get near the same accuracy as GPS lookup, because it does a lookup on your ISP, but it is at least able to get you in the ballpark as a fallback.

Include Google AJAX API with your api key and then go ahead and use this code…

Category: JavaScript & jQuery Tags: jQuery, jQuery UI

In this tutorial we’ll build a Teenage Mutant Ninja Turtles game as a fun and simple project to learn jQuery grep, queue/dequeue, delay and animation as well as jQuery UI draggable, droppable, effects and button.

View the jQuery Game

I grabbed the ninja turtle sprites and renamed them and organized them into folders…

JavaScript makes an online retail site interactive, and when combined with an attractive site design and good functionality, well executed JavaScript can positively affect how shoppers feel about a merchant.

Online shoppers often use site aesthetics and perceived web development expertise to judge a retailer’s professionalism and trustworthiness.

Put another way, a good-looking, fast-loading, and interactive online store can affect how a potential shopper feels about the store’s credibility…

Category: JavaScript & jQuery Tags: jQuery

A fairly random trail of interesting jQuery bookmarks.

jqFancyTransitions slideshow - fancy effect

jQuery 1.4 API Cheat Sheet - nice cheat sheet

jQuery Grid Layouts - haven’t used this, but I think it is cool.

jQuery Hot Keys - might need to target key combos with JavaScript?

File Style Plugin  - for styling those pesky file upload elements

Flot Charts - pure JavaScript charting library that will work on iPhone - check out google’s charts too…

Anyone who’s been involved in web development for any length of time has likely encountered the Developers VS Users situation. It’s a mistake that can often lead to expensive problems down the road. So what exactly is the problem? And how can you spot it–and solve it–before it derails you project and causes you to make a costly mistake? Here’s how…

Most developers became developers because they want to work on and build cool stuff…

As some of you have heard, there have been two new methods added in jQuery 1.4.2, .delegate() and .undelegate(). These methods achieve the same thing as the .live() and .die() methods, they just use a different syntax. For those new to .live(), it’s a method in jQuery that allows you to attach events to elements that appear in the document as well as elements that will appear in the future. An example would be if you attached a click event via …

First of all, thank you for all the great feedbacks and suggestions on the Vector Social Media Icons I released on IconDock. I updated the set with the new Google Buzz, Microsoft Bing, Picasa, Meetup, Feedburner, Ebay, Drupal, Gowalla, ICQ, Metacafe, Yelp, Xing, Paypal, Podcast, and various color buttons. Head over to IconDock to download the latest zip.

…

Blogger (Google) and Amazon it seems have collaborated and introduced a way for people using Blogger to monetize their blogs using Amazon. I wonder if Google is making some money as a 2-tier affilaite referring so many affiliates to Amazon

Anyway the implementation is broken for average users

This is what the interface looks like

Seems very simple

1. You search for something
2. Click buttons
3. Code is inserted into your post

Perfect… not!

Average Users

An average blogger blogspot user will see

This as a nice text link

Kindle Wireless Reading Device (6" Display, Global Wireless, Latest Generation)

This as a nice image link

This as a nice text with image

Update: it doesn’t get stripped out the same way with WordPress but leaving it “broken” here anyway (in the feed)

Oops!

If your readers are reading from an RSS Feed that nice text with image gets stripped out, and the same would be true of emails created from an RSS feed…

In my last two tutorials, I explained how to use event delegation for showing and hiding tooltips. In a comment on the first one, Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout().

Setting Up

Picking up where we left off last time, I’m going to create the tooltip div, declare a couple variables, and then bind “mouseover,” “mousemove,” and “mouseout” all at once…

Last time I showed how to use event delegation to create a simple tooltip for a huge number of elements without running into the problem of binding an event handler to all of those elements. In this tutorial, I’m going to refine that tooltip script a bit, avoiding some code repetition and fixing a bug that someone pointed out in a comment.

For review, here is the final version of the script from the last post:

PLAIN TEXTJavaScript:

1. $(’<div id="livetip"></div>’)…

There are many, many jQuery tooltip plugins out there, and some of them are very good. But when someone on the jQuery Google Group asked (a year ago) which plugin could handle displaying tooltips for 2,000 links on a page, I wasn’t able to find one. So, I decided to throw together a quick little plugin myself and was surprised by how easy it was.

Event Delegation, Again

The key to having JavaScript handle hundreds, or even thousands, of elements on a page is to use event delegation…

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience…

AdAge highlighted Google’s Campaign Monitor, a display ad measurement tool which has been in beta for the last year:

With Campaign Insights, Google takes data from the advertiser’s server logs to determine who was shown an ad and when. Then compares that to web searches and site visits culled from data from the millions of Google toolbars on computer desktops. Those results are compared to a comparable group that didn’t see the ad…

by Obaid ur Rehman

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need.

Free Slideshows And Lightboxes Scripts

Polaroid Gallery v…

Lots of talk about redesigning websites lately. Maybe it’s because summer is ending, and the Holidays are right around the corner (for e-Tailers, that is)?

First, there was Jeff Sexton’s post about asking the right Persuasion Architecture questions before redesigning, which was inspired by a Seth Godin post. Then, Jakob Nielson had some good thoughts from the Usability camp about redesigns and how radical they should be…

Event delegation, as described in the first article of this series, is a way to take advantage
of event bubbling to avoid binding an event listener more than once. jQuery 1.3 and the upcoming jQuery 1.4
have many features that make using event delegation in your web pages easier.
The aim of this tutorial is to help you understand how these new features work.

From traditional event listening to event delegation

Since an event occurring on an element is propagated to all of its ancestors,
an event listener can be bound to a single ancestor of numerous elements instead
of being bound to all the elements individually…

In this tutorial I’ll show you how to create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I’ve never had a need to build one of these for any of my own projects, quite a few people have asked if I would demonstrate how it might be done, so here goes…

Looking for ways to spice up your website with dynamic content? You may know from our optimization tips that you can help increase your AdSense revenue by incorporating other Google products into your site. We’re happy to introduce a new, easy way for you to do just that with Google Web Elements. Web Elements let you easily add richness and interactivity to your site simply by copying and pasting a snippet of code…

We’ve just concluded our fifth Google Summer of Code, our flagship global program to introduce college and university students to open source development. Once again, the results this year have been impressive. Nearly 2,000 mentors from 64 countries participated in the program. They worked to bring 1,000 students from 69 countries into the communities of 150 free and open source projects. We’re particularly excited this year to have introduced several students to open source development that has a direct impact on social causes, from microfinance software to global educational initiatives to making government data more transparent and accessible…

Card sorting is a technique from usability, whereby usability pros ask others to arrange a set of cards in the most coherent groups possible. Usability experts use card sorting to organize the information architecture of a website, but it’s also valuable for SEO.

Today I had two consultations over the phone that dealt with the navigation of a website, so I thought I’d touch on how you can use card sorting for SEO…