|
How to force text re-render after padding change from javascript in Chrome?
:-)
[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> |
Re: How to force text re-render after padding change from javascriptin Chrome?
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 |
Re: How to force text re-render after padding change from javascript in Chrome?
"Denis McMahon" <denis.m.f.mcmahon@googlemail.com> wrote in message
news:4c652997$0$8723$bed64819@gradwell.net... > 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 Well, I'm trying to add buttons to my page that will let the user set the font size and text width they find most comfortable to read. I don't think anyone will find the effect "incredibly annoying". In fact I'm hoping it will improve the user experience. (This "how do I ?", "You don't." pattern in newsgroups is getting tiring; if you want to help someone, help them; if you just want to express your disdain for other people, start a blog or something.) Marc. |
Re: How to force text re-render after padding change fromjavascript in Chrome?
On Fri, 13 Aug 2010 16:01:29 +0200, me wrote:
> "Denis McMahon" <denis.m.f.mcmahon@googlemail.com> wrote in message > news:4c652997$0$8723$bed64819@gradwell.net... >> 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 > > Well, I'm trying to add buttons to my page that will let the user set > the font size and text width they find most comfortable to read. I don't > think anyone will find the effect "incredibly annoying". In fact I'm > hoping it will improve the user experience. This is recreating functionality that *already exists* in most modern browsers. Leave the font at the default size or larger. Never make a font smaller than the user's preference. It has been my experience that any document that needs text resizing options is a poorly laid out document. |
Re: How to force text re-render after padding change from javascriptin Chrome?
On Aug 13, 2:17*am, "me" <m...@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. |
Re: How to force text re-render after padding change from javascript in Chrome?
"Jeremy J Starcher" <r3jjs@yahoo.com> wrote in message news:MAd9o.59113$dx7.13202@newsfe21.iad... > On Fri, 13 Aug 2010 16:01:29 +0200, me wrote: > >> "Denis McMahon" <denis.m.f.mcmahon@googlemail.com> wrote in message >> news:4c652997$0$8723$bed64819@gradwell.net... >>> 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 >> >> Well, I'm trying to add buttons to my page that will let the user set >> the font size and text width they find most comfortable to read. I don't >> think anyone will find the effect "incredibly annoying". In fact I'm >> hoping it will improve the user experience. > > This is recreating functionality that *already exists* in most modern > browsers. > > Leave the font at the default size or larger. Never make a font smaller > than the user's preference. > > It has been my experience that any document that needs text resizing > options is a poorly laid out document. > The thing is, this site has a lot of older users, some of which are probably not that familiar with changing zooming and font preferences in their browser, and I wanted to give them an easy way to have extra-large text, but only in the main text column, so that all the other navigation and photos and stuff stay the same; that way they don't have to scroll around to find things in a zoomed-in page that is larger than their browser window. Creating a page for an older or not-very-computer-literate audience is very difficult, because you can't rely on the users to know their way around their browser and other software; I found that out when I put some pdf's up for download :-) Marc. |
Re: How to force text re-render after padding change from javascriptin Chrome?
On Aug 13, 9:07*pm, Ry Nohryb <jo...@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. |
Re: How to force text re-render after padding change from javascript in Chrome?
"Ry Nohryb" <jorge@jorgechamorro.com> wrote in message
news:e9bf2585-5c9d-41f4-9880-434e36f4b7a4@t20g2000yqa.googlegroups.com... On Aug 13, 2:17 am, "me" <m...@example.com> wrote: >> Is there a better way to force Chrome to re-render the content of the DIV >> ? >(...)To force a re-render, set its display to none momentarily, (...) >HTH, >-- >Jorge. Thanks, I'll use that. I'll have a look and see whether I can have the script detect the bug, and only use the display trick when necessary. If anyone here is in the habit of reporting bugs to Chrome/Safari/WebKit, feel free to do so about this :-) It'd be very practical if this were fixed. Marc. |
Re: How to force text re-render after padding change from javascript in Chrome?
me wrote on 13 aug 2010 in comp.lang.javascript:
> Thanks, I'll use that. I'll have a look and see whether I can have the > script detect the bug, and only use the display trick when necessary. > If anyone here is in the habit of reporting bugs to > Chrome/Safari/WebKit, feel free to do so about this :-) It'd be very > practical if this were fixed. 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); -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress) |
Re: How to force text re-render after padding change from javascriptin Chrome?
On Aug 13, 10:43*pm, "Evertjan." <exjxw.hannivo...@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. |
| All times are GMT. The time now is 06:47 AM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.