One thing which I usually find quite annoying is using input boxes in forms for user entered dates. Having the user manually enter date, day, month, year seems so 1997 to me. However in the interest of time, this is what most programmers slap into the web applications simply because it’s easier to produce and easier to maintain.

Well here’s a handful of solutions that can solve that problem for you. Create user friendly and attractive date entries with these Date Pickers. Some are just normal entries used for basic forms, while others have more database integration.

Some use the jQuery library. Others use mootools or the Yahoo! UI. No matter what your needs, you’ll find something here that you can use.

Source: Online Calendars and Date Pickers [Smashing Magazine]

• A Bit On Open Source And Some Baz Background
• FeedBurner + Google search cache = Instant Blog Back Up
• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• Pretty CSS Forms
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery

In the spirit of rapid web development, I’ve stumbled upon jQuery. Here’s a testimonial from a jQuery user:

You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it’s down to two or three lines and it couldn’t get any shorter unless it read your mind.”

In my experience it’s been more like five (5) lines of jQuery.

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

I’ve found jQuery great for the following reasons:

• Simple Ajax in a breeze
• Search for elements in the DOM is made easy
• The helper function [ $() ] is a pleasure to use
• Most importantly: it handles cross browser compatibility.

Here We Go – Tutorials Galore

Your first step will be to Download jQuery 1.2.1 and include it in the head of your web page. After this you need to start reading some tutorials. Don’t worry, it’s going to take 15 minutes tops for you to start writing usable code:

• Visual jQuery – This is by far, my number one resource. It consolidates the API in a visual form, making easy to navigate.
• 15 Minutes of jQuery – Great for beginners
• jQuery for JavaScript programmers – Interesting tips on how to debug.
• Tutorials:How jQuery Works – Another beginner tutorial
• Tutorials:Getting Started with jQuery – Getting Started (for beginners)
• Tutorials:Live Examples of jQuery – This is what worked for me. Sometimes you just have to see it in action.

Why I Use jQuery

jQuery is fast, small, and easy to learn. It’s the core for many of the simpler Ajax I use in my web pages. Since I’m using CakePHP, there’s also Prototype, but that’s another story. I really don’t like having to learn a new language when I’m trying to do something simple. I don’t want to go delving into DOM and all that stuff just to dynamically add a class onto an element in the form. If I was a JavaScript programmer, it may not be a big deal for me. But, to me, there’s nothing worse than writing bad code to get something done, just because you don’t understand what’s going on. That’s why frameworks are what I live by.

Don’t wait, get started with jQuery today.

• JQuery, Prototype, and MooTools Benchmark – SlickSpeed
• A Bit On Open Source And Some Baz Background
• Ajax Activity Indicators
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• To Suck or Not to Suck, That is Question for JavaScript

1. Pick a category
2. Search
3. Click on an item and get a pop up with details
4. Click and Drag items to the shopping cart on the right

Yep, that’s it. The name fits great. There is absolutely none of the clutter that you get from Amazon’s main website.

This site deserves a lot more than what it’s getting right now.

Source: Search Amazon In Style [uncluttr]

• Dclick Ads – Another Quick Start Up Advertising Site
• Top 5 Basic SEO Tips – You Can Do These Yourself
• AJAX – Things To Keep In Mind
• AJAX Image Editor – Snipshot
• FeedBurner + Google search cache = Instant Blog Back Up

How It Works

First of all, stop freaking out. We’re not exactly stealing your browser’s history. We’re doing a bit of guessing. It can only be run against a defined list of sites. This means that you can only check whether someone has visited a site, say Disney.com, but you can’t ask their browser for a list of the sites they’ve visited. That information is still kept confidential by the browser.

What we do is use some JavaScript to check the color of the links on a page. Ahhh, I see the lil’ light bulb going on over your head right now. Yep folks, that’s all. Nothing fancy. So rest at ease, your browser history is safe for the most part.

SpyJax: Go check it out, and figure out how to stop it, or at least limit the way people use it on you.

• JavaScript Only Links, Why? Someone Tell Me Why, Please
• What Has Your Domain Been Up To
• Web Development 2.0 Carnival – September 8, 2007
• Automate MySQL Database Backup With WebCron – No Cron Jobs? No Problem – Part 1
• LinkMania: December 3, 2006

A lil’ PHP and GD2 sure does go a long way these days.

• Review: StaticPageBuilder
• Fixing the Back Button and Enabling Bookmarking for AJAX Apps
• JavaScript Reflection – Wet Floor Effect
• Dynamic Paypal Buttons via Javascript
• Optmize Images for the Web

Everything is done in a drag and drop interface: pictures, text, headings, even page titles. It reminds me of Google’s website creator just a bit.

One interesting thing that I’ve seen is the way you can preview different designs or themes. As soon as you hover over the theme the entire page changes to show you how it would look.

Check out Weebly if you’re not into all this nitty gritty web stuff.

• LinkMania: December 3, 2006
• What Has Your Domain Been Up To
• I Hate Internet Explorer With A Passion
• Clever Dude – 50 Tips for New Personal Finance Bloggers That Web Designers Can Learn From
• FeedBurner + Google search cache = Instant Blog Back Up

Recently I stumbled upon a site that I haven’t been to for a while: CSOWeb.org. The design is nice and clean: a header image, with some gradients and colors that work together. But wait, where are all the links? 95% of the links on the sites are http://csoweb.org/#. What the hell? Everything is done behind the scenes in JavaScript in OnClick() scripts.

Sometime later I read a post on the Future of the Web about JavaScript only links. The first comment on the page is usually everyone’ argument for these links.”But…but…what about GMail, and Google Web Toolkit?!?!?”. Good argument, I guess. Everyone loves Google and everyone tries to emulate them. There’s no problem in that as long as we understand what’s going on. Magic word: AJAX. AJAX makes heavy use of JavaScript for obvious reasons. If we’re populating a page from a database using AJAX, then JavaScript is the only option. This leads us into the discussion of appropriate uses of Ajax. Don’t take me back there man.

Why We Shouldn’t Use JavaScript Links

Bottom line is you shouldn’t be using JavaScript and AJAX where they don’t belong. Although certain specific elements on this page may require (benefit from rather) Ajax, there is no excuse for having a JavaScript link to the About Us page on a website. You run into obvious problem with SEO on the page obviously, since the only indexable page the really exists is the first instance of www.csoweb.org. Everything else is done on that website and the page is dynamically generated through JavaScript. So we actually get loathe by the Google search engine for trying to imitate them, that’s funny.

You piss off most of your visitors. Some people bookmarks specific web pages and not only the home page. It’s really annoying when you try to bookmark a web page and everything points back to the home page.

Just my two cents I guess.

Why JavaScript Links ?

• FeedBurner + Google search cache = Instant Blog Back Up
• How To Make PayPerPost and Google Adsense Play Nice – MightyAdsense Plugin Hack
• Website Promotion with DiscountClick
• PayPerPost’s Answer To The Google PageRank Issue – Real Rank
• Google Leading Web 2.0

In the same respect, you could use C++ and create a very graphical Windows application or you could use C# and the .NET Framework and fire one out in minutes. Why should web development be any different? Frameworks are there for a reason. A team usually develops a Framework over a long period. They get all the kinks out and they make it available for you guys to use. If a bug is found, they do a fix and put out a new version. You simply replace the files that you use.

AJAX is the same way, with one exception, there are just too damn many frameworks out there and that makes choosing very difficult. This should make things a little bit easier: How to choose an Ajax Framework ?

as

• Your Choice of Web Development Framework Doesn’t Matter
• Poll Results – What Do You Look for in a PHP Framework?
• Web Development vs. Desktop Development
• Enter CakePHP – Rapid Development Framework – No Really!
• Web Development 2.0 Carnival – September 24, 2007

We now have an HTML version for those of us who just hate Flash and all what it stands for . Ideally we would like to have an AJAX version of this like we have in Gmail, but no dice. Not yet anyways. Here’s our best substitute: micoxUpload.

• Enter AJAX
• Ajax vs. Ordinary Java
• Make Your Web Site Not Suck In Internet Explorer – IE CSS Min-Height Hack
• 5 Reasons Not To Use Flash
• 6 Places to Use Ajax

Demo available here.

• CakePHP Contact Form – Quick and Dirty
• Web Development 2.0 Carnival – September 24, 2007
• Ajax vs. Ordinary Java
• Ajax Activity Indicators
• CakePHP – One RSS Feed To Rule Them All

Problem
Sounds all well and good except that this application made heavy use of F Keys, e.g. (F10, F5, F1, etc). Needless to say this would not really be viable in a browser since F1 would call up help, F5 would refresh and F10 would send the cursor to the menu. We had already written a nice enough key handler that worked rather well, with the exception of these F Keys.

JavaScript Solution
After a lot of hacking around I found a way to stop the browser from calling up and propagating those events. My code was, for lack of a better word, nasty; but it did work. It involved a lot of IE/Mozilla workarounds. I recently came across some cleaner code, so here you go:

function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}

and

function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

Explanation
stopEvent, well stops the event. Seriously, it stops the event from being called by other background elements. Many elements may use the same event called by just one. So stopping it here ensures that it doesn’t propagate to the background elements. cancelEvent squashes the browser’s default behavior.

source Ajax Cookbook

[tags]ajax, browser, firefox, ie, javascript[/tags]

• Debugging Ajax
• AJAX Client Engine (ACE) – Problems
• JavaScript Only Links, Why? Someone Tell Me Why, Please
• Enter AJAX
• Should Ajax Be Independent of the Server?

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Have you ever gone to a website and seen this nice lil’ thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That’s LightBox. I’ve seen it before and I haven’t given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.

In the HEAD section of your HTML code.

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

	<script type="text/javascript" src="lightbox.js"></script>

To use it, simple add rel=”lightbox” to any “a” tag linking to an image file:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

As you can see, you can have pure text in the link tag or a thumbnail image like most people do. Yep, that’s it. Your website is covered with a grayish transparent background image and looks as if it’s disabled. There is an animated GIF (can be any AJAX-like indicator you wish) that pops up while the image is loaded, then Voila. Very sweet lil’ script. Of course it’s backwards compatible with browsers with JavaScript disabled. It’s just an “a” tag after all. There is also support for the transparent PNG file in IE 6. Do check out LightBox JS.

There are variations of this script. Lightbox JS v2.0 has a more AJAX-y feel to it. The image box pops up and closes in a nice fluid motion. It includes one more JavaScript include for this though. They also added image grouping, where you can go from one image to the next while the pop up is still enabled.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Over this past weekend is when I had my first experience with the LightBox script. I tried using version 2 for a particular application and one problem I had was what happened when images were two large for the screen. Well, it loads the entire image like you tell it to and the user then needs to scroll throughout the page to view the image. Some may simply say, create you images to an acceptable size, but the application I was using didn’t offer than flexibility. The images I would be serving came from the user. And only God knows what users have in mind for your application. Enter LightBox Plus. This loads the image and fits it into the appropriate screen size and adds a resize feature to enable the full size of the image. When you resize is activated the user can then use the mouse wheel to zoom in and out.

Behold, the marvels of JavaScript and CSS. We are definitely taking huge step into Web 2.0.

• Comparing Lightbox Scripts
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Optmize Images for the Web
• WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor
• Top 10 CSS Image Galleries – DIY

• Web Development 2.0 Carnival – September 24, 2007
• Ajax and RIA (Rich Internet Application) for Christmas
• Should A Business Use Free Web Hosting?
• Got My New PC
• WordPress 2.5 – The Vista of Blog Platforms

OctaGate SiteTimer

• Ajax Based Periodic Table
• WebTTY – Terminal Emulator
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• LightBox, LightBox2 and LightBox Plus
• Weebly Editor – Web 2.0 WYSIWYG Editor

You can even define a calculator and then embed it into an HTML page. Give it a try.

Source: TechCrunch

• 30 Firefox Downloads Per Second
• AJAX Seminar in March 2006
• Review: StaticPageBuilder
• Microsoft, Yahoo, and Zimbra Releaseing New Ajax Powered Webmail
• LinkMania: January 18, 2007

…we will discuss how you can easily implement dynamic interactive maps on your Java web application, using the Google Maps API for the web interface, and Ajax to provide real-time interaction with the server. This article is designed to give you a rapid introduction to both Google Maps and Ajax, and to let you get your own interactive maps up and running quickly and easily.

• Enter AJAX
• Google Leading Web 2.0
• Ajax vs. Ordinary Java
• AJAX Wikipedia Tools
• Foundation for an Extensible Website Engine with PHP 5

The WebTTY package allows any Linux terminal processes to be controlled in a text area HTML element on a webpage. The output from the server process is collected on server side, and is send to a text area element. Keypresses in textarea are collected on client side and send to the server process. WebTTY uses AJAX/DHTML patterns to achieve in-page updates without refreshing the entire page.

• AHAH: Asynchronous HTML and HTTP or AJA?
• OctaGate SiteTimer – Web Page Load Time
• Ajax Coding Challenge at About.com
• Ajax Based Periodic Table
• Enter AJAX

This is just a cut and paste job:
http://www.econsultant.com/web-developer/ajax-tutorials/

Check out the rest :

http://www.econsultant.com/ultimate-web-developer/index.html

• Another “What Is Ajax” Introduction
• How Do I Pick An AJAX Framework And Why Should I Care
• Ajax Activity Indicators
• HTML Tutorial
• Ajax Based Periodic Table

Here’s a synopsis:

1. Make it directly interactive
2. Make it inviting
3. Use lightweight, in-context popups instead of page transitions where possible
4. Use real-estate creatively
5. Cross page boundaries reluctantly
6. Create a light footprint
7. Think of your interactions as storyboards
8. Communicate transitions
9. Think in objects

Most of this we’ve heard before, but I like lists

• Google Leading Web 2.0
• Poll Results – What Do You Look for in a PHP Framework?
• Comparing Lightbox Scripts
• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• Top 10 CSS Image Galleries – DIY

One of the more interesting aspects of Ajax is the ability to track a user’s interaction within the browser. I wanted to investigate navigation patterns, so I have written an Ajax based link tracker. If you press the “Ctrl??? and “X” keys you will be presented with an overlay which displays links usage by percentage. This functionality was created with JavaScript and a very simple API.

Very inventive use of Ajax.
[tags]ajax,web2.0,web 2.0[/tags]

• LightBox, LightBox2 and LightBox Plus
• JavaScript Only Links, Why? Someone Tell Me Why, Please
• The Secret of Cancelling and Stopping Events using JavaScript
• Making Sure Your Javascript Doesn’t Rise When Baking
• Debugging Ajax