SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : DHTML Scrollbars : The Code

var arrowWidth = null

function uniqueID(prefix) {
	// Utility function to find an unused ID
	var cnt = 0
	while (document.all[prefix+(++cnt)]!=null);
	return prefix+cnt
}

function getArrowWidth() {
	var tempID = uniqueID("temp")
	var str = "<DIV  ID=\"" + tempID + "\" STYLE=\"position: absolute; top: -500; width: 100;overflow: scroll\"><DIV STYLE=\"width: 500\">&nbsp;</DIV></DIV>"
	if (document.readyState!="complete")
		document.write(str)
	else
		document.body.insertAdjacentHTML("beforeEnd", str)
	var nWidth = (document.all[tempID].offsetWidth - document.all[tempID].clientWidth) 
	arrowWidth = nWidth // cache value 
}

function createScroll(dir, size, max) {
	var outerID = uniqueID("scroll")
	var innerID = uniqueID("spacing")
	var str = ""
	if (null==arrowWidth) getScrollWidth()

	str = "<DIV ID=\"" + outerID + "\" "
	str += "STYLE=\""

	if (dir) 
		str += "width: " + size + ";line-height: 0px;"  + "height: " + arrowWidth
	else 
		str += "height: " + size + ";width: " + arrowWidth
	if (arguments[3]==true)
		str += "; position: absolute"
	str+= "; overflow: auto;\""
	str += "><DIV ID=\"" + innerID + "\" "
	str += "STYLE=\""
	if (dir) 
		str += "width: " + (max-arrowWidth + size)
	else
		str += "height: " + (max + size) + "; width: 0pt"
	str+= "; visibility: hidden\"> </DIV>"
	str += "</DIV>"
	if (document.readyState!="complete")
		document.write(str)
	else
		document.body.insertAdjacentHTML("afterBegin", str)
	return document.all[outerID]
}
Discuss and Rate this Article