473,320 Members | 1,947 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

select element flicker hell

This seems an IE issue only:
4253 bytes testcase:

http://www.hot.ee/idaliiga/testcases...lectinmsie.htm

Can one have
1) a mouseover/mouseout element on TBODY
2) change in thoise event handler background colors
3) have a specified heighted SELECT element, that doesnt flicker
when the event handlers are get called.

all together.
I noticed that when I took the fisrt table out from the outermost table,
then the flicker dissapeared. However the design tables enforce such
design, so cant take them out,

Does anybody have summarized this bug in short rules in english/german
so I could be aware of what should I avoid...
TIA
Jul 23 '05 #1
4 3834
VK
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('tbody').
There are three of these on your page. Which one do you want and which one
are you really getting?

Welcome back when ready!
Jul 23 '05 #2
VK wrote:
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).
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.

Another hint: instead of using the proper TOM methods, you are using
getByTagName('tbody').
No I am not using getByTagName('tbody'). I use
getElementsByTagName('tbody') which is perfectly legal.
There are three of these on your page.
What of three? Addressing
var srchrestble = document.getElementById('reportresults');
var tds = srchrestble.getElementsByTagName('tbody');
makes it clear that there are one.

Which one do you want and which one are you really getting?
Welcome back when ready!


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.
Jul 23 '05 #3
VK
1.
In my original post no word was mentioned about ROWHIGHLIGHTS.
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. Does anybody have summarized this bug in short rules in english/german
so I could be aware of what should I avoid...


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=searchagent-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.

Jul 23 '05 #4
VK wrote:
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=searchagent-2-criterion
id=searchagent_2_criterion_2 size=7 name=foo0>
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:300px;">

Why I need that size attribute on SELECT is that I need the element to
be SELECT LIST and not SELECT DROPDOWN.
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.
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.
So you should avoid mutually-excepting draw instructions, because it leaves
you on the merci of a particular browser.


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>Blinking 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.getElementById('reportresults');

// check only for MSIE
if (srchrestble && document.all&&window.offscreenBuffering){
var tds = srchrestble.getElementsByTagName('tbody');
var i=0;
for (i=0; i<tds.length;i++){
tds[i].onmouseover = function(){
this.style.backgroundColor = 'infobackground';
}
tds[i].onmouseout = function(){
this.style.backgroundColor = '';
}
}
}
}
//]]></script>
</head>
<body>
<table height="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<form action="savedreportslist.php" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="searchagent-2">
<tbody>
<tr>
<td valign="top" width="33%">
<select name="foo0" id="searchagent_2_criterion_0" size="7"
class="searchagent-2-criterion">
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo1" id="searchagent_2_criterion_1" size="7"
class="searchagent-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>flicker very much</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo2" id="searchagent_2_criterion_2" size="7"
class="searchagent-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>flicker very much</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
</tr>
</tbody>

</table>
</form>
<table cellpadding="0" cellspacing="0" border="1"
class="reportresults" id="reportresults">
<tbody>
<tr class="odd">
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;</td>
</tr>
<tr class="even">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
</tr>
<tr class="odd">
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
</tr>
<tr class="even">
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
</tr>
<tr class="odd">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="even">
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;a</td>
<td>&nbsp;a</td>
<td>&nbsp;</td>
<td>&nbsp;</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>
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Michael | last post by:
Here is my problem: I have a MDI application and when I load my child forms I get alot of flicker. I have tried to implement double buffering : Public Sub New() MyBase.New() 'This call is...
0
by: mp3boss | last post by:
I am updating a string in the format MM:SS every second using the On_Timer event in Access97 by changing the caption of a label. Even though I'm using 8point text, the box sometimes flickers...
3
by: Per Dunberg | last post by:
Hi all, I have to develop a "skinned" application and I have a problem with the graphics. When a form is loaded and displayed there's aways a flicker where all the controls are located on the...
3
by: seamlyne | last post by:
The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a...
17
by: pigeonrandle | last post by:
Hi, I have seen loads of different ways to do this, but the all seem to yield the same result - text that doesn't flicker when it's moving too slowly! Does anyone know 'the best way' to make text...
1
by: Wayne | last post by:
I've noticed some screen flicker when using Access 2003 under Vista and I'm curious as to whether this is a bug or peculiar to my machine. In design view, if I make changes to a form and then...
4
by: Frank Rizzo | last post by:
Hello, I inherited a large Winforms project that is suffering from excessive flicker when switching between portions of the application. I've noticed that most parts of the application (user...
0
by: Rainer Queck | last post by:
Hello NG, I had/have a bad flicker Problem with my Application. On starting some applications, while my app was running, the whole Display started to flicker. Even the desktop Icons! Looking...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.