select element flicker hell

VK · Jul 23 '05, 03:03 PM

Re: select element flicker hell

Your showcase is brocken: moving the mouse highlights the entire table
instead of separate rows.
Make it work first as intended (whatever "blinking" it takes).

Another hint: instead of using the proper TOM methods, you are using
getByTagName('t body').
There are three of these on your page. Which one do you want and which one
are you really getting?

Welcome back when ready!

**Marek Mänd** · Jul 23 '05, 03:03 PM

Re: select element flicker hell

VK wrote:[color=blue]
> Your showcase is brocken: moving the mouse highlights the entire table
> instead of separate rows.
> Make it work first as intended (whatever "blinking" it takes).[/color]

it highlights the TBODY, not the table as you think
Besides where did you get the idea about showcase beeing broken?
It aint. You are just making assumptions on your own what it should do.
In my original post no word was mentioned about ROWHIGHLIGHTS.
Not a single word.

If you like it in the fashion of rowhighlights, then you can modify that
it does so. It doesnt affect he flickering by making it better. Probably
it makes flickering even worse.

[color=blue]
> Another hint: instead of using the proper TOM methods, you are using
> getByTagName('t body').[/color]

No I am not using getByTagName('t body'). I use
getElementsByTa gName('tbody') which is perfectly legal.
[color=blue]
> There are three of these on your page.[/color]

What of three? Addressing
var srchrestble = document.getEle mentById('repor tresults');
var tds = srchrestble.get ElementsByTagNa me('tbody');
makes it clear that there are one.

[color=blue]
>Which one do you want and which one are you really getting?
> Welcome back when ready![/color]

I think it is ready from start up for beeing a showcase.
You are just adding your own requerments what the script should do
weheras those requirements you make, make the script totally different
in functionality.

The only concern is flicker.
WHich dissapears when the height on the selects is removed
or the inner table with selects is taken out from the outer container
table.

VK · Jul 23 '05, 03:03 PM

Re: select element flicker hell

1.[color=blue]
> In my original post no word was mentioned about ROWHIGHLIGHTS.[/color]

Sorry, I was wrong. I got this idea from your code. As any table has only
one tbody element, there is no use to iterate through it (tds.lenght is
always eq 1). So I wrongfully assumed that you tried to
reach some underlying objects, which would be rows in this case.

2.[color=blue]
> Does anybody have summarized this bug in short rules in english/german
> so I could be aware of what should I avoid...[/color]

You have disturbed the graphics context on the page by a set of
mutually-excepting draw instructions.

..searchagent-2-criterion {
FONT: 24px Tahoma; WIDTH: 100%; HEIGHT: 100px
}
and
<SELECT class=searchage nt-2-criterion
id=searchagent_ 2_criterion_2 size=7 name=foo0>

Let's translate it in English: "Draw me a select box of 100px height and
place in it seven lines of text, where each line is approx. 20px high. All
seven lines must be fully visible and retain nice vertical gaps of 4px
between of them and the box borders. The box cannot exceed the given 100px
height. Go!"

You don't need to be a great mathematician to see that it is something wrong
with this picture. Is it going to be silently ignored or ignored with a
flicker, what part will be ignored on what browser - these are irrelevant
questions.

So you should avoid mutually-excepting draw instructions, because it leaves
you on the merci of a particular browser.

**Marek Mänd** · Jul 23 '05, 03:04 PM

Re: select element flicker hell

VK wrote:[color=blue]
> You have disturbed the graphics context on the page by a set of
> mutually-excepting draw instructions.
> ..searchagent-2-criterion {
> FONT: 24px Tahoma; WIDTH: 100%; HEIGHT: 100px
> }
> and
> <SELECT class=searchage nt-2-criterion
> id=searchagent_ 2_criterion_2 size=7 name=foo0>[/color]

Thats true, I have done so.

But text input fields are on many other sites also done in this manner
<input type="text" size="20" style="width:30 0px;">

Why I need that size attribute on SELECT is that I need the element to
be SELECT LIST and not SELECT DROPDOWN.
[color=blue]
> Let's translate it in English: "Draw me a select box of 100px height and
> place in it seven lines of text, where each line is approx. 20px high. All
> seven lines must be fully visible and retain nice vertical gaps of 4px
> between of them and the box borders. The box cannot exceed the given 100px
> height. Go!"
> You don't need to be a great mathematician to see that it is something wrong
> with this picture. Is it going to be silently ignored or ignored with a
> flicker, what part will be ignored on what browser - these are irrelevant
> questions.[/color]

CSS should in theory overdefine the original height (as without css
applied) and element should generate scrollbars if needed. Aparently
MSIE6 (and I dont know about older, possibly so too) has huge problems
getting it right (e.c. no problems in mozilla)

The TBODYHIGHLIGHT has *no impact* whatsoever opn the height of the
table, therefore this phenomenon is a bug. If you use event handlers on
TDs or TRs the flcikering doesnt appear. Plus taking in acount that the
flickering occurs in totally different table. Plus teh fact that MSIE6
can peacefully draew the selects with CSS given height.
It just the event handlers that chane background color on totally
different tables tbody make it flicker, which is very odd.
[color=blue]
> So you should avoid mutually-excepting draw instructions, because it leaves
> you on the merci of a particular browser.[/color]

Yes I have noticed it that when I remove the height it dissapears.
But the mystique thing to me was it appears on some pleaces and on rare
layouts it doesnt appear. But since I have lil time, I dont have the
full days time to investigate and summarize it up completely I will go
with the no height applied direction, because of remake of the html
templates is too late for now.

For historical reasons I shall put here the copy of that problemous
file, so have oppurtunety to refer back one day.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blinki ng Selectyed in MSIE</title>
<style type="text/css">

..searchagent-2{
width:100%;
}

.searchagent-2-criterion{
width:100%;
height:400px;
font:24px Tahoma;
}

..reportresults {
width:100%;
table-layout:fixed; /* without this IE wont make the table as wide as
possible, but shrinkwraps (While mozilla doesnt need this hee for this) */

}

</style>
<script type="text/javascript">//<![CDATA[

window.onload = function(){
var srchrestble = document.getEle mentById('repor tresults');

// check only for MSIE
if (srchrestble && document.all&&w indow.offscreen Buffering){
var tds = srchrestble.get ElementsByTagNa me('tbody');
var i=0;
for (i=0; i<tds.length;i+ +){
tds[i].onmouseover = function(){
this.style.back groundColor = 'infobackground ';
}
tds[i].onmouseout = function(){
this.style.back groundColor = '';
}
}
}
}
//]]></script>
</head>
<body>

<table height="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<form action="savedre portslist.php" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="searchag ent-2">
<tbody>
<tr>
<td valign="top" width="33%">
<select name="foo0" id="searchagent _2_criterion_0" size="7"
class="searchag ent-2-criterion">
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo1" id="searchagent _2_criterion_1" size="7"
class="searchag ent-2-criterion">
<option>When I move the mouse</option>
<option>Over the table rows here below</option>
<option>in MSIE6</option>
<option>this looks oughful</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo2" id="searchagent _2_criterion_2" size="7"
class="searchag ent-2-criterion">
<option>Over the table rows here below</option>
<option>in MSIE6</option>
<option>this looks oughful</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
</tr>
</tbody>

</table>
</form>
<table cellpadding="0" cellspacing="0" border="1"
class="reportre sults" id="reportresul ts">
<tbody>
<tr class="odd">
<td> a</td>
<td> </td>
<td> a</td>
<td> </td>
<td> a</td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="odd">
<td> a</td>
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="even">
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> a</td>
<td> </td>
<td> a</td>
<td> a</td>
<td> </td>
<td> </td>
</tr>
</tbody>

</table>

</td>
</tr>
</table>
<div>HOW do I get rid of the SELECT blinking in MSIE in case the mouse
is moved over the table #reportresults rows (BY KEEPING THE EVENT
HANDLER ON THE TBODY element)? The SELECT BOXES SHOULD HAVE SPECIFIED
HEIGHT IN PIXELS.</div>

</body></html>

select element flicker hell

select element flicker hell

Comment

Comment

Comment

Comment