brian patrick

I have a rather rare problem, so please f****ve my long explanation, but I
think it's necessary.

My scenario is this: I have vb app which has a form and web browser
control. Navigation commands are sent from another component to this vb app
to navigate to our in house custom ASP/HTM pages. The browser is set to
full screen and is projected (using other components) to a television
screen. In order to display smooth navigation, we use LockWindowUpdate() in
the BeforeNavigate2() and DownloadBegin() events. We then, unlock the
window in the Do***entComplete() and DownloadComplete events. This way, the
user will not see any flashes are partially downloaded images/pages...

This has all been working fine as expected for years...

Recently, we've changed some of our HTM pages and are dynamically
adding/removing table cells (TD elements) for a menuing system. For a
particular part of the menu, we use DIV element which has it's background
set to a GIF image, and we move it over particular table cells depending on
the state of the menu. There are three DIV elements with three diferent
colored background images. For example, if the user chooses to select a
menu item, one of the DIV will move over the selected table cell and the
graphic will change to some other color. When this occurs, our code does
two things:

1. Download the new image for the new selection:
do***ent.all.Div1.background = "/media/Highlight_On_Bars_Left.gif";

2. Calculate the location and width of the table cell, so we can properly
move the DIV element over it:
Div1.style.width = (tablecell.OffsetWidth);
Div1.style.top = (table.OffsetTop + tablecell.OffsetTop);
Div1.style.left = (table.OffsetLeft + tablecell.OffsetLeft);

The functionality is working perfect, except after the window is
Locked/Unlocked, the page quickly redraws, and we see a brief white flash.
This white flash caused by the combination of calls to Div1.style.width and
tablecell.offsetWidth - or obviously the top and left properties too...
What I mean is this: If I removed the code that referenced the offsetWidth,
offsetTop, and offsetLeft properties, and used some other values for setting
obj.style.width, top, and left. We don't get the white flash. Also, if we
do the opposite - if I were to reference any of the offsetWidth, left, top
properties, as to set there values in a variable or something, but skip the
part that sets obj.style.width, left and top, then we also don't see the
white flash.

We only see the white flash when calls to style.width and offsetwidth occur
on the same page. It's like when the browser deals with these two calls, it
has to re-render the page for some reason. So, the bottom line is our
window Lock/Unlock procedure is already out of the picture because the
images have been download.

Obviously, my question is, how can we go about doing this without getting a
white flash. I haven't found any other way to get the width of a table cell
and I haven't found any other way to dynamically set the width of an object.

By the way, even though I keep referring to offsetWidth, the problem exists
for offsetTop, and offSetLeft as well.

Any creative ideas are welcome...

Thanks!

mckirahan

exists


Regarding "any other way to dynamically set the width of an object":

would including a transparent gif in the cell and changing it's width work?

brian patrick

I understand what you're saying, but you can't have text in a cell and an
<img> element on top of the text.

IOW - assume the following html:

<table width="10%" border=1>
<tr height=500>
<td>hello<img src="highlight.jpg" width=500 height=300></td>
</tr>
</table>

The word hello would appear in the cell and the image would appear to right
of the text in the cell. The way I was doing it with the absolute positions
DIV tag, I could move the image directly over the text...

brian patrick

Also - I would still have to "dynamically" change the width of the image
using img1.style.width, and I would have to assume that because I have that
call as well as the offsetWidth calls, that the page would still flicker
with the white flash...

mckirahan

[snip]

Here's what I was thinking -- don't know about the white flash.
<html>
<head>
<title>imgwidth.htm</title>
</head>
<body>
<table border="1">
<tr>
<td>
hello<br><img src="highlight.jpg" width="500" height="100" id="img">
</td>
</tr>
</table> <input type="button" value="100"
onclick="do***ent.getElementById('img').width=100" > <input type="button" value="300"
onclick="do***ent.getElementById('img').width=300" > <input type="button" value="500"
onclick="do***ent.getElementById('img').width=500" >
</body>
</html>

brian patrick

Right - but the word hello would appear above the image. I need the image
to appear directory over the text, basically if unselected the text will
have a plain background, but if selected - a highlight image will be placed
over it, i can't have it next to, or below it.

mckirahan

[snip]

If it works otherwise for you then just change it to:
<tr valign="top">
<td>
<img src="highlight.jpg" width="500" height="100" id="img"><br>hello
</td>
</tr>

brian patrick

That doesn't work - it still places the image above the text

mckirahan

Which is it?

In a previous post you said:
"the word hello would appear above the image. I need the image to appear
directory [sic] over the text, "

and in your last post you state:
"it still places the image above the text".

brian patrick

Sorry - I'm getting my lingo screwed up - I need the text to be centered
vertically and horizontially, and I need the image centered vertically and
horizontally - so the end result is you should see the image take up the
whole cell and the text would be centered vertically and horizontally in the
cell.