22/01/2009

Let me Google That For You

It drives me crazy when my friends / coworkers ask me to Google something.

How hard is it to type: www.google.com and a couple keywords.

http://letmegooglethatforyou.com is the perfect solution. Try it yourself or allow me To Google That For You.

If you haven't already figured this out this site shows the user an animation explaining exactly how easy it is to Google that keyword on your own.

Over and Out

07/01/2009

JavaScript: Cancel Event Bubbling

Another common tidbit of JavaScript code:

Cancel event bubbling:

function stopEvent(evt){
evt = evt || window.event;
if (evt.stopPropagation){
evt.stopPropagation();
evt.preventDefault();
}else if(typeof evt.cancelBubble != "undefined"){
evt.cancelBubble = true;
evt.returnValue = false;
}
return false;
}

JavaScript: Create Open Below Pop Ups (Ex// auto complete text box)

This is a simple method to open popups below text inputs (or any Html Element at that) using JavaScript. Please let me know if things are missing ... The intent of this script is to open a small pop up below a text box for use in a custom auto complete. As this is an ASP.Net control, and ASP.Net creates element ID's based on containers we need something to base our element id's on so we can do stuff with them. In this example I use a text box as the naming pivot upon which all other client ID's are based on.

// the previous document click event handler we've stored when we change the event.
// This implies when the pop up is open you'll need to cancel all click events therein so the popup doesn't close
var orignDocClick = null;
// the active pop up id. In another method I haven't provided here we determine if there is an active pop up and close it before we open a second.
var activePopId = null;

// the id of this element is provided VIA ASP.Net control but in this example is hard coded
// we want to show a Pop Under directly below this text box.
var inputTypeText = document.getElementById("ourTextBox");

// create the pop under by calling show pop.
var myNewPopUnder = ShowPop(inputTypeText.id + "_PopUp", inputTypeText);

myNewPopUnder.innerHTML = "Hello World";
// OR
myNewPopUnder.appendChild(document.createElement("br"));
// OR ....


function ShowPop(strPopUpId, objTextBox) {
// get the existing div control and remove it (it is merely a placeholder with ID's aligned as per ASP.Net Crap)
var popEl = document.getElementById(strPopUpId);
var parent = popEl.parentNode;
parent.removeChild(popEl);

// create a new pop up control and append it to the parent of the old auto complete pop up.
var newPop = document.createElement("div");
newPop.id = strPopUpId;
newPop.className = "AutoCompletePop";
parent.appendChild(newPop);

// determine the left and top positions for the pop under
var curleft = 0;
var curtop = parseFloat(objTextBox.offsetHeight);
var top = objTextBox;
do {
curleft += top.offsetLeft;
curtop += top.offsetTop;
} while (top = top.offsetParent);
newPop.style.top = curtop + "px";
newPop.style.left = curleft + "px";
newPop.style.display = "block";

// trap some document events to ensure we can close auto complete
orignDocClick = document.body.onclick;
document.body.onclick = DocHidePop;
activePopId = strPopUpId;

return newPop;
};

function DocHidePop() {
if (activePopId != null) {
HidePop(document.getElementById(activePopId));
}
};

function HidePop(objPopContainer) {
objPopContainer.style.display = "none";
document.body.onclick = orignDocClick;
activePopId = null;
};

JavaScript: Event Target

A simple way to get the element that starts an event. I'm using this to ascertain which text box is calling the KeyPress event in pure JavaScript:

function KeyPress(event) {
var srcElement = getElement(event);
alert(srcElement.id);
}

function getElement(evt) {
if (window.event)
return window.event.srcElement;
else
return evt.currentTarget;
};

Another variation of this script could be written as such (note, this get's the object that triggers the event):

function getTargetElement(evt){
if (window.event)
return window.event.srcElement;
else
return evt.target;
}

Over and Out

JavaScript: Sorting Complex Arrays

I wasn't aware that JavaScript text sorting was case sensitive (well on ie7 I've verified it is). So, Here is a simple example of sorting an Object Array taking into account case sensitivity.

for (var i in searchList) {
var indexOfTerm = WordStartsWith(searchList[i].Text, searchPhrase);
if (indexOfTerm > -1) {
results[results.length] = { Item: searchList[i],
IndexOf: indexOfTerm,
toString: function() { return this.Item.Text.toUpperCase(); }
};
}
}

results.sort();

By overloading the toString method we can convert our sort key to upper case and boom sorting works properly.

P.S.,
WordStartsWith is a method that returns the index of a search term in a text string.
searchList is a JSON structure with a bunch of data for use by a custom auto complete.

Each item in the results array is an object thus I've overridden the toString method to return an upper case copy of the text item for use in sorting (The JavaScript array calls toString to get sortable data).

Over and Out