R
Richard Maher
Hi,
Does anyone have a Javascript/CSS cure for the following IE symptoms that I
am witnessing with my DIV that scrolls vertically and grows horizontally to
cater for the largest <li> element/row?
I have had to introduce X.style.whitespace = "nowrap" to prevent the list
elements from wrapping over more than one line. That is, I want the <div> to
expand horizontally when a longer list element is obtained. You may recall
that I'm extending the div eastwards via the following command: -
if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
(more details below)
Anyway, everything is peachy on FF but on IE ther are occasional
gaps/blank-lines in the list. If you scroll down the blank lines are there
and the highlighting shows that the particular list-item is taking up two
lines. If you scroll up on the other hand IE sort of sees the mistake and
moves everything up a line.
There doesn't appear to be any obvious rhyme nor reason for it, and the rows
involved in the breaks aren't the big rows but I'm at a loss as to what to
substitute for "Whitespace: nowrap" or a diffent way of extending my div
lengthways.
Hope this rings a bell with some body; please help if you can.
Cheers Richard Maher
function Tier3Suggest(
el,
divClass,
maxRows,
fetch,
singleton)
{
var lovTarget = el;
if (!lovTarget.id)
throw new Error('"id" attribute must be defined for element');
if (Tier3Suggest.LOV[lovTarget.id])
throw new Error("A list of values is already defined for this
element");
var currVintage = 0;
var lastSearch = "";
var dataFetch = fetch;
var singleton = singleton;
var lovMax = maxRows;
var targetStyle = getStyle(el);
var targetDiv = document.createElement("div");
targetDiv.className = divClass || lovTarget.className;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = "auto";
targetDiv.style.height = "auto";
targetDiv.style.overflowY = "auto";
targetDiv.style.overflowX = "hidden";
targetDiv.style.padding = targetStyle.padding;
// targetDiv.style.whiteSpace = "nowrap";
var dimTarget = lovTarget;
var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight;
var offsetLeft = dimTarget.offsetLeft;
while(dimTarget = dimTarget.offsetParent){
offsetTop += dimTarget.offsetTop;
offsetLeft += dimTarget.offsetLeft;
}
targetDiv.style.top = offsetTop + "px";
targetDiv.style.left = offsetLeft + "px";
document.body.appendChild(targetDiv);
var divStyle = getStyle(targetDiv);
var suggestList = document.createElement("ul");
suggestList.style.padding = "0px";
suggestList.style.margin = "0px";
suggestList.style.width = "auto";
suggestList.style.height = "auto";
// suggestList.style.whiteSpace
// = "nowrap";
suggestList.style.listStyleType
= "none";
var getLOV =
function()
{
var lovVintage = ++currVintage;
var rowCnt = 0;
return function(rowKey, rowData)
{
if (lovVintage != currVintage) {
return;
}
var listItem = document.createElement("li");
var listData = document.createTextNode(rowData);
listItem.appendChild(listData);
listItem._key = rowKey;
// listItem.style.width = listItem.clientWidth;
listItem.style.whiteSpace = "nowrap";
suggestList.appendChild(listItem);
rowCnt++;
if (rowCnt == lovMax) {
targetDiv.style.height = targetDiv.clientHeight + "px";
}
if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
targetDiv.style.visibility = "visible";
}
}
var keyHandler =
function()
{
if (lovTarget.value == lastSearch)
return;
lastSearch = lovTarget.value;
if (lovTarget.value.length == 0) {
targetDiv.style.visibility="hidden";
return;
}
targetDiv.style.height = "auto";
targetDiv.style.width = "auto";
while (suggestList.lastChild) {
suggestList.removeChild(suggestList.lastChild);
}
rowCallback = getLOV();
dataFetch.call(this, lovTarget, rowCallback);
};
listenerRegistry.checkIn(lovTarget,"keyup",keyHandler);
var listHandler =
function(evt) {
var lclTarget = evt.target || evt.srcElement;
if (lclTarget.nodeType == 3)
lcltarget = lclTarget.parentNode;
if (lclTarget.tagName.toLowerCase() == "li") {
if (evt.type == "mouseover") {
lclTarget.style.color = divStyle.backgroundColor;
lclTarget.style.backgroundColor = divStyle.color;
}
if (evt.type == "mouseout") {
lclTarget.style.color = "";
lclTarget.style.backgroundColor = "";
}
if (evt.type == "click") {
alert("NV = *" + lclTarget.firstChild.nodeValue + "* l = " +
lclTarget.length);
singleton(lovTarget, lclTarget._key,
lclTarget.firstChild.nodeValue);
lovTarget.focus();
lovTarget.value = lovTarget.value;
}
}
}
listenerRegistry.checkIn(suggestList,"mouseover",listHandler);
listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
listenerRegistry.checkIn(suggestList,"click", listHandler);
targetDiv.appendChild(suggestList);
Tier3Suggest.LOV[lovTarget.id] = this;
return this;
}
Tier3Suggest.LOV = {};
Does anyone have a Javascript/CSS cure for the following IE symptoms that I
am witnessing with my DIV that scrolls vertically and grows horizontally to
cater for the largest <li> element/row?
I have had to introduce X.style.whitespace = "nowrap" to prevent the list
elements from wrapping over more than one line. That is, I want the <div> to
expand horizontally when a longer list element is obtained. You may recall
that I'm extending the div eastwards via the following command: -
if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
(more details below)
Anyway, everything is peachy on FF but on IE ther are occasional
gaps/blank-lines in the list. If you scroll down the blank lines are there
and the highlighting shows that the particular list-item is taking up two
lines. If you scroll up on the other hand IE sort of sees the mistake and
moves everything up a line.
There doesn't appear to be any obvious rhyme nor reason for it, and the rows
involved in the breaks aren't the big rows but I'm at a loss as to what to
substitute for "Whitespace: nowrap" or a diffent way of extending my div
lengthways.
Hope this rings a bell with some body; please help if you can.
Cheers Richard Maher
function Tier3Suggest(
el,
divClass,
maxRows,
fetch,
singleton)
{
var lovTarget = el;
if (!lovTarget.id)
throw new Error('"id" attribute must be defined for element');
if (Tier3Suggest.LOV[lovTarget.id])
throw new Error("A list of values is already defined for this
element");
var currVintage = 0;
var lastSearch = "";
var dataFetch = fetch;
var singleton = singleton;
var lovMax = maxRows;
var targetStyle = getStyle(el);
var targetDiv = document.createElement("div");
targetDiv.className = divClass || lovTarget.className;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = "auto";
targetDiv.style.height = "auto";
targetDiv.style.overflowY = "auto";
targetDiv.style.overflowX = "hidden";
targetDiv.style.padding = targetStyle.padding;
// targetDiv.style.whiteSpace = "nowrap";
var dimTarget = lovTarget;
var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight;
var offsetLeft = dimTarget.offsetLeft;
while(dimTarget = dimTarget.offsetParent){
offsetTop += dimTarget.offsetTop;
offsetLeft += dimTarget.offsetLeft;
}
targetDiv.style.top = offsetTop + "px";
targetDiv.style.left = offsetLeft + "px";
document.body.appendChild(targetDiv);
var divStyle = getStyle(targetDiv);
var suggestList = document.createElement("ul");
suggestList.style.padding = "0px";
suggestList.style.margin = "0px";
suggestList.style.width = "auto";
suggestList.style.height = "auto";
// suggestList.style.whiteSpace
// = "nowrap";
suggestList.style.listStyleType
= "none";
var getLOV =
function()
{
var lovVintage = ++currVintage;
var rowCnt = 0;
return function(rowKey, rowData)
{
if (lovVintage != currVintage) {
return;
}
var listItem = document.createElement("li");
var listData = document.createTextNode(rowData);
listItem.appendChild(listData);
listItem._key = rowKey;
// listItem.style.width = listItem.clientWidth;
listItem.style.whiteSpace = "nowrap";
suggestList.appendChild(listItem);
rowCnt++;
if (rowCnt == lovMax) {
targetDiv.style.height = targetDiv.clientHeight + "px";
}
if (targetDiv.clientWidth < targetDiv.scrollWidth) {
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
targetDiv.style.visibility = "visible";
}
}
var keyHandler =
function()
{
if (lovTarget.value == lastSearch)
return;
lastSearch = lovTarget.value;
if (lovTarget.value.length == 0) {
targetDiv.style.visibility="hidden";
return;
}
targetDiv.style.height = "auto";
targetDiv.style.width = "auto";
while (suggestList.lastChild) {
suggestList.removeChild(suggestList.lastChild);
}
rowCallback = getLOV();
dataFetch.call(this, lovTarget, rowCallback);
};
listenerRegistry.checkIn(lovTarget,"keyup",keyHandler);
var listHandler =
function(evt) {
var lclTarget = evt.target || evt.srcElement;
if (lclTarget.nodeType == 3)
lcltarget = lclTarget.parentNode;
if (lclTarget.tagName.toLowerCase() == "li") {
if (evt.type == "mouseover") {
lclTarget.style.color = divStyle.backgroundColor;
lclTarget.style.backgroundColor = divStyle.color;
}
if (evt.type == "mouseout") {
lclTarget.style.color = "";
lclTarget.style.backgroundColor = "";
}
if (evt.type == "click") {
alert("NV = *" + lclTarget.firstChild.nodeValue + "* l = " +
lclTarget.length);
singleton(lovTarget, lclTarget._key,
lclTarget.firstChild.nodeValue);
lovTarget.focus();
lovTarget.value = lovTarget.value;
}
}
}
listenerRegistry.checkIn(suggestList,"mouseover",listHandler);
listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
listenerRegistry.checkIn(suggestList,"click", listHandler);
targetDiv.appendChild(suggestList);
Tier3Suggest.LOV[lovTarget.id] = this;
return this;
}
Tier3Suggest.LOV = {};