Re: Firefox2 problem with dynamic rendering (it's fine in IE, Safariand FF3)

On Oct 3, 5:07*pm, Stevo <n... (AT) mail (DOT) invalid> wrote:

(...)

On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.

try this:

function resizenow (x) {
var s= document.getElementById("div1_inner").style;
s.height= x+"px";
s.display= "none";
setTimeout(function () {
s.display= "";
},1);
};

--
Jorge.

Jorge wrote:

On Oct 3, 5:07 pm, Stevo <n... (AT) mail (DOT) invalid> wrote:
(...)

On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.

try this:

function resizenow (x) {
var s= document.getElementById("div1_inner").style;
s.height= x+"px";
s.display= "none";
setTimeout(function () {
s.display= "";
},1);
};
--
Jorge.

Thanks Jorge, I'll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one's display property.

Le 10/3/08 7:03 PM, Stevo a écrit :

Thanks Jorge, I'll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one's display property.

an other soluce could be :

function resizenow(x){
var d = document.getElementById("div1_inner");
var c = d.cloneNode(true);
c.style.height=x+"px";
d.parentNode.replaceChild(c,d);
}

Not tested.

On Oct 3, 9:34*pm, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

On Oct 3, 5:07*pm, Stevo <n... (AT) mail (DOT) invalid> wrote:

(...)

On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.

try this:

function resizenow (x) {
* var s= document.getElementById("div1_inner").style;
* s.height= x+"px";
* s.display= "none";
* setTimeout(function () {
* * * s.display= "";
* },1);

};

Though it might just work, can I ask the reasoning behind this
workaround? Is this is a known issue or does putting everything in
setTimeout always seems to solve the issue? ;-)

On Oct 3, 10:35*pm, SAM <stephanemoriaux.NoAd... (AT) wanadoo (DOT) fr.invalid>
wrote:

Le 10/3/08 7:03 PM, Stevo a crit :



Thanks Jorge, I'll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one's display property.

an other soluce could be :

function resizenow(x){
* *var d = document.getElementById("div1_inner");
* *var c = d.cloneNode(true);
* *c.style.height=x+"px";
* *d.parentNode.replaceChild(c,d);

}

Not tested.

This might just be a little too memory expensive operation since you
are creating a deep clone of the entire DIV tree; plus it is more work
for the GC since you always end up discarding the previous DOM node.

/sasuke

On Oct 3, 9:34*pm, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

On Oct 3, 5:07*pm, Stevo <n... (AT) mail (DOT) invalid> wrote:

(...)

On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.

try this:

function resizenow (x) {
* var s= document.getElementById("div1_inner").style;
* s.height= x+"px";
* s.display= "none";
* setTimeout(function () {
* * * s.display= "";
* },1);

};

Is there any reasoning here for using `setTimeout' or is this a known
bug?

On Oct 3, 10:35*pm, SAM <stephanemoriaux.NoAd... (AT) wanadoo (DOT) fr.invalid>
wrote:

Le 10/3/08 7:03 PM, Stevo a crit :



Thanks Jorge, I'll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one's display property.

an other soluce could be :

function resizenow(x){
* *var d = document.getElementById("div1_inner");
* *var c = d.cloneNode(true);
* *c.style.height=x+"px";
* *d.parentNode.replaceChild(c,d);

}

Not tested.

IMO this approach might become a bit memory intensive considering that
you are creating a deep copy of the DIV element which might have a lot
many children element objects. Plus to end up discarding the previous
copy of the node means more work for the GC.

/sasuke

On Oct 4, 7:35*am, sasuke <database... (AT) gmail (DOT) com> wrote:

On Oct 3, 9:34*pm, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

try this:

function resizenow (x) {
* var s= document.getElementById("div1_inner").style;
* s.height= x+"px";
* s.display= "none";
* setTimeout(function () {
* * * s.display= "";
* },1);

};

Though it might just work, can I ask the reasoning behind this
workaround? Is this is a known issue or does putting everything in
setTimeout always seems to solve the issue? ;-)

Hehe. What happens is that the the page isn't rendered until after the
JS code has finished executing (except in chrome). Therefore, a way to
force a redraw in the middle of some code, is to break it up in two
halves, let the first half end and schedule the second half to run
some ms later via a setTimeout().

--
Jorge.

On Oct 6, 12:16*am, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

On Oct 4, 7:35*am, sasuke <database... (AT) gmail (DOT) com> wrote:



On Oct 3, 9:34*pm, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

try this:

function resizenow (x) {
* var s= document.getElementById("div1_inner").style;
* s.height= x+"px";
* s.display= "none";
* setTimeout(function () {
* * * s.display= "";
* },1);

};

Though it might just work, can I ask the reasoning behind this
workaround? Is this is a known issue or does putting everything in
setTimeout always seems to solve the issue? ;-)

Hehe. What happens is that the the page isn't rendered until after the
JS code has finished executing (except in chrome). Therefore, a way to
force a redraw in the middle of some code, is to break it up in two
halves, let the first half end and schedule the second half to run
some ms later via a setTimeout().

Fair enough, but how does this scenario apply to the original post? In
the very first post, the function `resizenow(x)' exits soon after
setting the height to `x' pixels, so ideally the change should be
reflected immediately [and yes, it does, except in FF2]. So the only
reason here would be that the refresh isn't happening. So to trigger a
refresh, after setting the required dimensions, we hide and show the
DIV, with the only different thing being the showing of DIV be placed
in a `setTimeout'. Am I correct here?

/sasuke

On Oct 6, 6:14*pm, sasuke <database... (AT) gmail (DOT) com> wrote:

On Oct 6, 12:16*am, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:





On Oct 4, 7:35*am, sasuke <database... (AT) gmail (DOT) com> wrote:

On Oct 3, 9:34*pm, Jorge <jo... (AT) jorgechamorro (DOT) com> wrote:

try this:

function resizenow (x) {
* var s= document.getElementById("div1_inner").style;
* s.height= x+"px";
* s.display= "none";
* setTimeout(function () {
* * * s.display= "";
* },1);

};

Though it might just work, can I ask the reasoning behind this
workaround? Is this is a known issue or does putting everything in
setTimeout always seems to solve the issue? ;-)

Hehe. What happens is that the the page isn't rendered until after the
JS code has finished executing (except in chrome). Therefore, a way to
force a redraw in the middle of some code, is to break it up in two
halves, let the first half end and schedule the second half to run
some ms later via a setTimeout().

Fair enough, but how does this scenario apply to the original post? In
the very first post, the function `resizenow(x)' exits soon after
setting the height to `x' pixels, so ideally the change should be
reflected immediately [and yes, it does, except in FF2]. So the only
reason here would be that the refresh isn't happening. So to trigger a
refresh, after setting the required dimensions, we hide and show the
DIV, with the only different thing being the showing of DIV be placed
in a `setTimeout'. Am I correct here?

Yes, the div is hidden -> JS code execution ends -> a redraw takes
place -> setTimeout times out and kicks in the code to show the div
again -> code execution ends -> another redraw cycle takes place...

--
Jorge.