How to force text re-render after padding change from javascriptin Chrome?
in [JavaScript]
|
Prev: best way to implement draggable looping carousel (kinda like Google Maps)
Next: How to force text re-render after padding change fromjavascript in Chrome?
From: Denis McMahon on 13 Aug 2010 07:16 On 13/08/10 01:17, me wrote: > Is there a better way to force Chrome to re-render the content of the DIV ? Yes. Don't make changes that force the page to re-render. It's incredibly annoying as a web site user to have content on a page jump around while I'm looking at. Rgds Denis McMahon
From: williamc on 13 Aug 2010 11:37 On 8/12/2010 8:17 PM, me wrote: > :-) > > [This is a Chrome-specific problem, but since their help forum is all > questions and > no answers, I thought I'd try and see if anyone here has any idea.] > > When you change the left and right padding of a DIV from a javascript, you > would > expect the text elements inside it to be rendered and justified again; > indeed, this is > what IE and FF do; Chrome 5.0 however, does not. The text moves > horizontally, > but retains its width. (see the example below) > > I have tried setting the right-padding before the left-padding, or setting > all four > padding values together, but to no avail. I could make an imperceptibly > small change > to the font size, but setting font size to 14.99px may have undesirable > side-effects. > Is there a better way to force Chrome to re-render the content of the DIV ? > > Marc. > > <HTML><BODY> > <DIV ID="MyContainer" STYLE="width: 360px; background-color: orange;"> > <DIV ID="MyContent" STYLE="padding: 20px;" onclick="this.style.padding='20px > 60px';"> > <H1>Dynamic Padding Test</H1> > <P>Click anywhere in this rectangle to change the left and right padding > from 20 to 60 pixels.</P> > </DIV></DIV> > </BODY></HTML> > > Don't know the answer to your question, but interestingly it's reproduced with... onclick="this.style.padding='20px 60px';this.style.width='240px'; but not with... onclick="this.style.padding='20px 60px';this.style.width='239px'; onclick="this.style.padding='20px 60px';this.style.width='241px'; and other values which are *not* equal to the implicit width of your content. One of the ace browser scripters in here can no doubt tell you why. -- --williamc
From: Ry Nohryb on 13 Aug 2010 15:07 On Aug 13, 2:17 am, "me" <m...(a)example.com> wrote: > :-) > > [This is a Chrome-specific problem, but since their help forum is all > questions and > no answers, I thought I'd try and see if anyone here has any idea.] > > When you change the left and right padding of a DIV from a javascript, you > would > expect the text elements inside it to be rendered and justified again; > indeed, this is > what IE and FF do; Chrome 5.0 however, does not. The text moves > horizontally, > but retains its width. (see the example below) > > I have tried setting the right-padding before the left-padding, or setting > all four > padding values together, but to no avail. I could make an imperceptibly > small change > to the font size, but setting font size to 14.99px may have undesirable > side-effects. > Is there a better way to force Chrome to re-render the content of the DIV ? > > Marc. > > <HTML><BODY> > <DIV ID="MyContainer" STYLE="width: 360px; background-color: orange;"> > <DIV ID="MyContent" STYLE="padding: 20px;" onclick="this.style.padding='20px > 60px';"> > <H1>Dynamic Padding Test</H1> > <P>Click anywhere in this rectangle to change the left and right padding > from 20 to 60 pixels.</P> > </DIV></DIV> > </BODY></HTML> That looks like a bug in both Chrome and Safari. To force a re-render, set its display to none momentarily, e.g. like this: <html><head> <script type="text/javascript"> function doit (that) { that.style.padding= (window.k=!window.k) ? '60px' : '20px'; that.style.display= "none"; setTimeout(function(){that.style.display= "";},0); } </script> </head> <body> <div style="width: 360px; background-color: orange;"> <div style="padding: 20px;" onclick="doit(this)"> <h1>dynamic padding test</h1> <p>click anywhere in this rectangle to toggle its padding from 20 to 60 pixels.</p> </div> </div> </body></html> HTH, -- Jorge.
From: Ry Nohryb on 13 Aug 2010 15:18 On Aug 13, 9:07 pm, Ry Nohryb <jo...(a)jorgechamorro.com> wrote: > > <html><head> > <script type="text/javascript"> > function doit (that) { > that.style.padding= (window.k=!window.k) ? '60px' : '20px'; > that.style.display= "none"; > setTimeout(function(){that.style.display= "";},0); > } > </script> > </head> > <body> > <div style="width: 360px; background-color: orange;"> > <div style="padding: 20px;" onclick="doit(this)"> > <h1>dynamic padding test</h1> > <p>click anywhere in this rectangle to toggle its padding from 20 to > 60 pixels.</p> > </div> > </div> > </body></html> It would be much better to have the toggle var attached to the doit function as a property instead of to window as a global: replace: that.style.padding= (window.k=!window.k) ? '60px' : '20px'; with: that.style.padding= (doit.k=!doit.k) ? '60px' : '20px'; -- Jorge.
From: Ry Nohryb on 13 Aug 2010 17:25
On Aug 13, 10:43 pm, "Evertjan." <exjxw.hannivo...(a)interxnl.net> wrote: > > Even better would be a DOM-command to refrain from re-rendering: > > Window.render(false); > > and one to start re-rendering [the default]: > > Window.render(true); window.render= function render (a) { if (a) { if (!render.f) { render.f= setTimeout(function () { delete render.f; document.body.style.display= ""; },0); } } else document.body.style.display= "none"; } :-) -- Jorge. |