Site of the Day 8/19/2010

Here is a good site for learning about HTML 5.

http://www.html5rocks.com/

Site of the Day 8/1/2010

Here is a good article about JavaScript functions and how they work.

Part I: http://www.permadi.com/tutorial/jsFunc/index.html

Part II: http://www.permadi.com/tutorial/jsFunc/index2.html

Site of the Day 7/28/2010

Here is the page of the guru of the jQuery project.

http://ejohn.org/

Cheat sheet for jQuery

http://www.box.net/shared/as4xkezd6a

Site of the Day 6/28/2010

Here is the main page for the jQuery project.

http://jquery.org/

Site of the Day 6/24/2010

Here is a good video on how to understand the internals of jQuery.

http://paulirish.com/

Site of the Day 6/23/2010

15 Great jQuery Plugins For Better Table Manipulation
 http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

Site of the Day 6/22/2010

I’m going to start to add some resources for the JavaScript framework called jQuery.

http://15daysofjquery.com/

Site of the Day 5/29/2010

Here is a good JavaScript site concerning the importance of performance.

http://javascriptrocks.com/performance/

Site of the Day 5/27/2010

I’m glad I found this link when I was sitting down. 🙂

http://www.jsmag.com/

How to do a type ahead for a select tag

I thought I would put some code here on how to do a type ahead for a select tag (select-one) using JavaScript.
*** WordPress made my “8” as a smiley face, so just replace it.

1.) Add these 2 event handlers to a given select tag.

onblur=”_dw_select_typeAhead_clear(); ”
onkeydown=”_dw_select_typeAhead(); ”

2.) Add this global variable to keep the status of the type ahead.

// global storage object for type-ahead info, including reset() method
var taInfo = {
last:0,
charsTyped:”,
chars_keyCode:”,
delay:1000,
timeout:null,
reset:function() { this.last=0; this.charsTyped=”;  }
};

3.) Add this function to initialize some global variables at the onchange event handler.

// ===============================
// clear variables for type ahead
//  ===============================

function _dw_select_typeAhead_clear() {

taInfo.charsTyped = ”; taInfo.last = 0;
} // end of type ahead clear…

4.) Add this function to show the location were the user is as they type the characters.

// =====================================
// type ahead for select drop down
// =====================================
function _dw_select_typeAhead() {

  var v_len = 0; var v_len1 = 0; var v_event = window.event;
  var txt; var charCode; var val;
  charCode = v_event.keyCode;

// escape key will clear the type ahead buffer and allow the user to start over
  if (charCode == 27) {
   _dw_select_typeAhead_clear(); // clear
 _dw_select_typeAhead_startover(); // options[0]
   v_event.returnValue = false; return true;
  }
  if (v_event && !v_event.ctrlKey && (v_event.keyCode > 19 || v_event.keyCode == 8 ) ) {
     var now = new Date();
     if (taInfo.charsTyped == ” || taInfo.charsTyped != ”) {
        var ddl = v_event.srcElement;
        taInfo.last = now;
     // correct for NumPad digits
     if ( charCode >= 96 && charCode <=105 ) { charCode = charCode – 48;   }
     if ( charCode > 127 ) { charCode = charCode – 144; }
     if ( charCode == 8 ) {
        v_len1 = taInfo.charsTyped.length – 1;
        taInfo.charsTyped = taInfo.charsTyped.substr(0,v_len1);
     } else {
           taInfo.charsTyped += String.fromCharCode(charCode).toUpperCase();
     }

window.status = taInfo.charsTyped;
  ddl.title = taInfo.charsTyped;
     v_len = ddl.options.length-1;
        for (var i=0; i < v_len; i++) {
         txt = ddl.options[i].text.toUpperCase();
      val = ddl.options[i].value.toUpperCase();
            if ( txt.indexOf(taInfo.charsTyped) == 0 && val != “” ) {
            ddl.selectedIndex = i;
         break;
         } // if dd1
      } // for_i
      } // if taInfo
      v_event.returnValue = false;
      return true;
  } // if v_event

  return true;
} // end of select type ahead….

5.) I’ve added the capability to clear all of your typed characters by use of the Escape Key.

// =====================================
// escape key : clear type ahead character
// =====================================
function _dw_select_typeAhead_startover() {
 
var v_event = window.event;
var ddl = v_event.srcElement;
ddl.options[0].selected = true;
window.status = ”;  ddl.title = ”;  
} // end of type ahead start over….

Site of the Day 5/10/2010

I fell upon this site from a link about creating music notes from JavaScript. It very cool 🙂

http://0xfe.blogspot.com/

Site of the Day 5/7/2010

Someone sent me a link to a specific JavaScript topic for Microsoft MIX09, so here is the link for MIX09.

http://videos.visitmix.com/MIX09/

Future browser enhancements (JavaScript,CSS,HTML)

Here are some links concerning future browser enhancements for Firefox, IE, Google or other browsers which will help a developer.

Hack site for Firefox

HTML

JavaScript
new device API for Firefox 3.6: orientation

CSS
Firefox 3.7
a multi-touch drawing demo for Firefox 3.7

Microsoft IE

Firefox
Good general information

Google Chrome
The Chromium Blog

General JavaScript tips/tricks

Here is a list of general JavaScript tips and tricks.

Performance

Best way to load your JavaScript
Fast by Default and Web Performances
6 ideas to improve JavaScript performance
Slow JavaScript
Multi-touch JavaScript

Blogs

Thomas Frank
mir.aculo.us blog
Nicholas C. Zakas blog
Steve Souders blog (Google)
DHTML Goodies

Widgets

Windows
Firefox Extensions
Google Page Speed

jQuery

jQuery

jQuery UI

Graphs

dygraphs JavaScript Visualization Library

Web Performance Tips

I’m going to start to add links concerning making my web pages faster which are not related to database issues. I will create a separate page for those tips.

Firefox Extensions
Tweak Config to make Firefox faster
Google Page Speed

General
Browser Scope site
12 Steps To Faster Web Pages With Visual Round Trip Analyzer
Yahoo Tips
15 Tools to Help You Develop Faster Web Pages
High Performance Web Sites blog

Some tips concerning the Web,JavaScript,CSS