tim laqua dot com » javascript

Scrolling to and Highlighting Anchor Target via JavaScript

Tim — Fri, 13 Mar 2009 02:11:59 +0000

I implemented a SSAS cube action to link to a SharePoint page (URL Action) with the name of the measure contained in the cell the user fired the action from. The theory here is to have a page that contains a list of definitions for all measures (both real and calculated) in the cube. As we were flushing out this implementation, it was suggested that the page should scroll to the specified measure and highlight it in some way. The implementation of this using the CSS :target pseudo class is pretty straightforward - however we're a Microsoft shop and we absolutely have to support Internet Explorer 7 and Internet Explorer 8, so that's out.

Originally, the plan was to use Anchor Targets, but since the implementation ended up being pure JavaScript, there really was no reason to use anchors - we used something like this to define measures:

<div id="dataDictionary">
    <div id="termNotFound">Specified definition could not be found.</div>
 
    <div>
        <h1>Term goes here</h1>
        <p>Definition goes here</p>
        <h2>Additional Comments</h2>
        <ul>
            <li>comment</li>
        </ul>
    </div>
    <div>
        <h1>Other Term goes here</h1>
        <p>Other Definition goes here</p>
        <h2>Additional Comments</h2>
        <ul>
            <li>comment</li>
        </ul>
    </div>
</div>

And the following JavaScript is used to locate the appropriate heading, modify it's parent DIV (to add the selected className so it gets different styling), and scroll down to it:

ParseURI function from http://blog.stevenlevithan.com/archives/parseuri

function parseUri (str) {
	var	o   = parseUri.options,
		m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
		uri = {},
		i   = 14;
 
	while (i--) uri[o.key[i]] = m[i] || "";
 
	uri[o.q.name] = {};
	uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
		if ($1) uri[o.q.name][$1] = $2;
	});
 
	return uri;
};
 
parseUri.options = {
	strictMode: false,
	key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
	q:   {
		name:   "queryKey",
		parser: /(?:^|&)([^&=]*)=?([^&]*)/g
	},
	parser: {
		strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
		loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
	}
};

ScrollToElement function from http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html

function ScrollToElement(theElement){
 
  var selectedPosX = 0;
  var selectedPosY = 0;
 
  while(theElement != null){
    selectedPosX += theElement.offsetLeft;
    selectedPosY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }
 
 window.scrollTo(selectedPosX,selectedPosY);
 
}

Some quick string manipulation functions form http://www.webtoolkit.info/javascript-trim.html

function trim(str, chars) {
	return ltrim(rtrim(str, chars), chars);
}
 
function ltrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}
 
function rtrim(str, chars) {
	chars = chars || "\\s";
	return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

And finally, some original code to make it all work:

function hotlink() {
	var colP = document.getElementsByTagName('p');
	if ( colP.length > 0 ) {
		for(var i=0; i<colP.length; i++) {
			colP[i].innerHTML = colP[i].innerHTML.replace(new RegExp("(" + ddTerms + "^$)","g"),"\"javascript:findTerm('$1')\"'>$1");
		}
	}
}
 
function findTerm(term) {
	var colDIV = document.getElementsByTagName('div');
	if ( colDIV.length > 0 ) {
		for(var i=0; i<colDIV.length; i++) {
			if (i % 2 == 0) {
				colDIV[i].className = 'alt';
			}
			else {
				className = '';
			}
		}
	}
 
	var colH1 = document.getElementsByTagName('h1');
	if ( colH1.length > 0 ) {
		var found = false;
		for(var i=0; i<colH1.length; i++) {
			var ddTerm = trim(colH1[i].innerHTML.toLowerCase());
			if (ddTerm == term.toLowerCase()) {
				found = true;
				colH1[i].parentNode.className = 'selected';
				ScrollToElement(colH1[i]);
			}
			ddTerms += "\\b" + ddTerm.replace(new RegExp("(\\(|\\))", "g"), "\\$1") + "\\b|";
		}
 
		if (!found && term.length > 0) {
			var tnf = document.getElementById('termNotFound');
			tnf.style.display = 'block';
			ScrollToElement(tnf);
		}
	}
}
 
var ddTerms = '';
 
window.onload = function () {
	findTerm(unescape(parseUri(window.location.href).anchor));
	hotlink();
}

Note, there's also a hotlink() function in there - since this is a page full of terms and definitions, we might as well link up the page so all terms are clickable within the document.

Finally, make it looke somewhat presentable with either an inline style block or just add these to your external style sheet:

	#dataDictionary a { font-style: italic; text-decoration: underline; }
	#dataDictionary 
	{
		font-size: 110%;
	}
 
	#dataDictionary div 
	{ 
		background-color: #ccccff; 
		margin-bottom: 4pt;
	}
 
	#dataDictionary div p
	{ 
		margin: 2pt;
	}
 
	#dataDictionary div ul
	{ 
		margin-top: 2pt;
	}
 
	#termNotFound 
	{ 
		display: none; 
		color: red; 
		font-weight: bold; 
		font-style: italic; 
		border: 2px dotted red;
		background-color: #ffff77 !important;
		padding: 2pt;
	}
 
	#dataDictionary div h1 
	{ 
		font-size: 130%; 
		border-bottom: 1px solid white; 
		background-color: #ccbbff;
		margin: 0pt, 0pt, 2pt, 0pt;
	}
	#dataDictionary div h2 { 
		font-size: 115%; 
		margin: 3pt, 0pt, 2pt, 0pt;
	}
 
	#dataDictionary div ul 
	{
		margin-bottom: 2pt;
	}
 
	#dataDictionary div.alt  h1
	{ 
		background-color: #88ff88; 
	}
	#dataDictionary div.alt 
	{ 
		background-color: #bbffaa; 
	}	
 
	#dataDictionary div.selected h1 
	{ 
		background-color: #ff7755; 
	}
	#dataDictionary div.selected 
	{ 
		background-color: #ff9988; 
		font-size: 125%;
	}

JavaScript Auto-Suggest from XML

Tim — Sun, 28 Oct 2007 15:21:57 +0000

The other day, a co-worker requested an auto-suggest feature in the user name field of a web app that I had written a few months ago. Why? Not sure - to save 6 keystrokes, I suppose - but then again, 6 keystrokes at a time, it becomes justifiable eventually... And really, who can turn down a challenge like that?

Average Keystrokes saved per day: 179.4
Characters in Scripts (Client and Server, no formatting): 4886
Payback time: 27.24 Days

Not bad in terms of effort. Even calculating in the difference between developer salary and data entry salary - the payback is still within 3 months. (Assuming we develop in a vacuum and ignore opportunity costs - i.e. we had nothing better to do at the time.)

For starters, we need to be able to do XPath queries in FireFox as well as IE - so here we make the selectNodes method available in FireFox:

if (!window.ActiveXObject) { 
  Element.prototype.selectNodes = function(sXPath) { 
    var oEvaluator = new XPathEvaluator(); 
    var oResult = oEvaluator.evaluate(sXPath, this, null, 
      XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); 
    var aNodes = new Array(); 
    if (oResult != null) { 
      var oElement = oResult.iterateNext(); 
      while(oElement) { 
        aNodes.push(oElement); 
        oElement = oResult.iterateNext(); 
      } 
    } 
    return aNodes; 
  } 
}

Now we initalize everything

var autoSuggestXML; 
var keysDown = 0; 
var fragment = '';   
 
function initAutoSuggest() { 
  document.getElementById("updateText").focus(); 
  if (window.ActiveXObject) { 
    autoSuggestXML = new ActiveXObject("Msxml2.DOMDocument"); 
    autoSuggestXML.setProperty("SelectionLanguage", "XPath"); 
  } else { 
    autoSuggestXML = 
      document.implementation.createDocument("","",null); 
  } 
  autoSuggestXML.load("autoSuggest.xml"); 
  registerAutoSuggestField("userInput"); 
}

function registerAutoSuggestField(field) { 
  document.getElementById(field).onkeyup = function (e) { 
    if(!e) e = window.event; 
    autoSuggest(this,e); 
  }   
 
  document.getElementById(field).onkeydown = function (e) { 
    keysDown++; 
  }   
 
  document.getElementById(field).onfocus = function (e) { 
    keysDown = 0; 
  } 
}

Here's some functions I borrowed from a tutorial on an AutoSuggest Javascript class out on the web for cross-browser compatable text selection

function selectRange(oTextbox /*:object*/, iStart /*:int*/, 
        iLength /*:int*/) { 
  //use text ranges for Internet Explorer 
  if (oTextbox.createTextRange) { 
    var oRange = oTextbox.createTextRange(); 
    oRange.moveStart("character", iStart); 
    oRange.moveEnd("character", iLength - oTextbox.value.length); 
    oRange.select(); 
  //use setSelectionRange() for Mozilla 
  } else if (oTextbox.setSelectionRange) { 
    oTextbox.setSelectionRange(iStart, iLength); 
  }   
 
  //set focus back to the textbox 
  oTextbox.focus(); 
};    
 
function typeAhead (oTextbox /*:object*/, sSuggestion /*:String*/, 
         sFragment /*:String*/) { 
  var iLen = oTextbox.value.length; 
  oTextbox.value = sSuggestion; 
  selectRange(oTextbox, iLen, sSuggestion.length); 
};

And now for the workhorse function

function autoSuggest(t, e) { 
  if (window.event) keycode = window.event.keyCode; 
  else if (e) keycode = e.which;   
 
  if(--keysDown > 0 && keysDown < 3) { return; }   
 
  //set to 0, just incase we passed a value greater than 2 
  //(happens when a key is held down) 
  keysDown = 0;   
 
  if(t.value.length > 0) { 
    var keycode;   
 
    //make sure not to interfere with non-character keys 
    if (keycode == 38 || keycode == 40 || keycode == 33 || 
      (keycode > 46 && keycode < 112) || keycode > 123) { 
      var direction = ''; 
      var previousValue = ''; 
      var id; 
      var value;   
 
      switch (keycode) { 
        case 38: 
          //up 
          direction = 'up'; 
          previousValue = t.value.toLowerCase(); 
          t.value = fragment; 
          break; 
        case 40: 
          //down 
          direction = 'down'; 
          previousValue = t.value.toLowerCase(); 
          t.value = fragment; 
          break; 
        default: 
          fragment = t.value; 
        } 
      value = t.value.toLowerCase(); 
      id = t.id.toLowerCase();   
 
      //if(previousValue != '') alert(previousValue + " " + value);   
 
      var nodelist = null;   
 
      nodelist = autoSuggestXML.documentElement.selectNodes( 
                 "field[@id='" + id + "']/value[starts-with(.,'" + 
	             fragment + "')]");   
 
      if (nodelist != null && nodelist.length > 0) { 
        if (nodelist.length > 1 && direction != '') { 
          var i; 
          for(i = 0; i < nodelist.length; i++) { 
            if(nodelist[i].firstChild.nodeValue == previousValue) { 
              break; 
            } 
          } 
          if(direction == 'up') { 
            if (i<nodelist.length )
              sSuggestion="String(nodelist[i+1].firstChild.nodeValue);"
            else 
              sSuggestion = String(nodelist[0].firstChild.nodeValue); 
          } else { 
            if (i > 0) 
              sSuggestion = String(nodelist[i-1].firstChild.nodeValue); 
            else 
              sSuggestion = 
                String(nodelist[nodelist.length - 1].firstChild.nodeValue); 
          } 
        } else { 
            var sSuggestion = String(nodelist[0].firstChild.nodeValue); 
        }   
 
        typeAhead(t, sSuggestion) 
      } 
    } else { 
      //ignore 
    } 
  } 
}

Ah, now lets examine the XML schema that this thing understands (autoSuggest.xml):

>
   id="userinput">> 
    >Tim Laqua>
    >admin>
>

To be continued... (I'll figure out where I borrowed those functions from as well and credit the guy).