How to force text re-render after padding change from javascript in Chrome?

Discussion in 'Javascript' started by me, Aug 13, 2010.

  1. me

    me Guest

    :)

    [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>
    me, Aug 13, 2010
    #1
    1. Advertising

  2. 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
    Denis McMahon, Aug 13, 2010
    #2
    1. Advertising

  3. me

    me Guest

    "Denis McMahon" <> wrote in message
    news:4c652997$0$8723$...
    > 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.
    me, Aug 13, 2010
    #3
  4. 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" <> wrote in message
    > news:4c652997$0$8723$...
    >> 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.
    Jeremy J Starcher, Aug 13, 2010
    #4
  5. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 13, 2:17 am, "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>


    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.
    Ry Nohryb, Aug 13, 2010
    #5
  6. me

    me Guest

    "Jeremy J Starcher" <> wrote in message
    news:MAd9o.59113$...
    > On Fri, 13 Aug 2010 16:01:29 +0200, me wrote:
    >
    >> "Denis McMahon" <> wrote in message
    >> news:4c652997$0$8723$...
    >>> 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.
    me, Aug 13, 2010
    #6
  7. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 13, 9:07 pm, Ry Nohryb <> 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.
    Ry Nohryb, Aug 13, 2010
    #7
  8. me

    me Guest

    "Ry Nohryb" <> wrote in message
    news:...
    On Aug 13, 2:17 am, "me" <> 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.
    me, Aug 13, 2010
    #8
  9. me

    Evertjan. Guest

    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)
    Evertjan., Aug 13, 2010
    #9
  10. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 13, 10:43 pm, "Evertjan." <>
    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.
    Ry Nohryb, Aug 13, 2010
    #10
  11. me

    David Mark Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 13, 11:37 am, williamc <> wrote:
    > 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.
    >


    No rational reason. Just a bug in Webkit that has been around for
    years.
    David Mark, Aug 14, 2010
    #11
  12. me

    David Mark Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 13, 5:25 pm, Ry Nohryb <> wrote:
    > On Aug 13, 10:43 pm, "Evertjan." <>
    > 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";
    >
    > }
    >


    Will you please stop posting examples that augment host objects? And
    no, that's not a cue to start up with your "window is the global
    object in browsers" nonsense.

    Thanks!
    David Mark, Aug 14, 2010
    #12
  13. me

    me Guest

    "me" <> wrote in message
    news:T1i9o.26318$Vv6.4616@hurricane...
    > "Ry Nohryb" <> wrote in message
    > news:...
    > On Aug 13, 2:17 am, "me" <> 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.


    Fortunately, the bug is easy to detect:

    <HTML>
    <HEAD>
    <SCRIPT TYPE="text/javascript">
    function changePadding(that) {
    that.style.padding = "20px 60px";
    if (document.getElementById("MyWidthCheck").offsetWidth > 260) {
    alert("Text not adapted; forcing render...");
    that.style.display = "none";
    setTimeout(function() {that.style.display = "";}, 0);
    }
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <DIV ID="MyContainer" STYLE="width: 360px; background-color: orange;">
    <DIV ID="MyContent" STYLE="padding: 20px;" onclick="changePadding(this);">
    <H1>Dynamic Padding Test</H1>
    <P ID="MyWidthCheck">Click anywhere in this rectangle to change the left and
    right padding from 20 to 60 pixels.</P>
    </DIV>
    </DIV>
    </BODY>
    </HTML>
    me, Aug 14, 2010
    #13
  14. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 2:26 am, David Mark <> wrote:
    > On Aug 13, 5:25 pm, Ry Nohryb <> wrote:
    >
    > > 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";

    >
    > > }

    >
    > Will you please stop posting examples that augment host objects?  And
    > no, that's not a cue to start up with your "window is the global
    > object in browsers" nonsense.
    >
    > Thanks!


    BTW. It's not only that that window isn't a host object: it's also
    that augmenting DOM elements (which are host objects) is ok, yes, I'll
    repeat it: again: it's *OK* to augment host objects: I *know* that it
    can be done safely, 100% error-free, in all the browsers I've ever
    done it, except in the most broken ones ever: Microsoft's IEs.

    That's so because nothing prevents a host object to be a native object
    too. And it seems to be the case that the clever minds @ Mozilla,
    Opera and WebKit have made them so... so much for Microsoft, the
    better and the biggest -until Apple outgrown it- software company in
    the world.

    David, David... get well !
    --
    Jorge.
    Ry Nohryb, Aug 14, 2010
    #14
  15. me

    David Mark Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 4:21 am, Ry Nohryb <> wrote:
    > On Aug 14, 2:26 am, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Aug 13, 5:25 pm, Ry Nohryb <> wrote:

    >
    > > > 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";

    >
    > > > }

    >
    > > Will you please stop posting examples that augment host objects?  And
    > > no, that's not a cue to start up with your "window is the global
    > > object in browsers" nonsense.

    >
    > > Thanks!

    >
    > BTW. It's not only that that window isn't a host object:


    Did you just say that the window object isn't a host object? So I
    presume you've found some long lost chapter of the ECMA specs that
    (oddly enough) defines a browser-specific object. Please share,
    Jorge. This could change everything! :)

    And don't bother quoting that bit where they speculate what the host
    object might reference (or mimic) in browsers.

    > it's also
    > that augmenting DOM elements (which are host objects) is ok, yes,


    Ok? No.

    > I'll
    > repeat it: again: it's *OK* to augment host objects:


    You've lost it El Abuelo. Senility setting in?

    http://www.cinsoft.net/host.html

    > I *know* that it
    > can be done safely, 100% error-free, in all the browsers I've ever
    > done it,


    Show you where it fails? :(

    > except in the most broken ones ever: Microsoft's IEs.


    Oh it's your old stalwart: the insanity defense. I should have known
    you were leading up to that one.

    >
    > That's so because nothing prevents a host object to be a native object
    > too.


    Your logic is swiss cheese. Nothing prevents them from *not* being
    native objects. In fact (depending on how you look at it) by
    definition they cannot be considered native objects. Black can't be
    white; up can't be down; Jorge can't be sane; and so on...

    > And it seems to be the case that the clever minds @ Mozilla,
    > Opera and WebKit have made them so...


    By "made them so", you seem to be indicating that behind-the-scenes
    they use the same code used to implement native objects in those three
    "clever" browsers. It's interesting though that some of their
    "native" objects break the rules in the specs. Perhaps they are
    restless native objects? Something between a native and a host
    object?

    Or perhaps you are (once again) wasting everyone's time with confused
    babbling?

    > so much for Microsoft, the
    > better and the biggest -until Apple outgrown it- software company in
    > the world.


    You aren't helping Apple any more than you helped Yahoo!

    >
    > David, David... get well !


    Get your own shtick, Jorge.
    David Mark, Aug 14, 2010
    #15
  16. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 2:58 pm, David Mark <> wrote:
    > On Aug 14, 4:21 am, Ry Nohryb <> wrote:
    >
    > > BTW. It's not only that that window isn't a host object:

    >
    > Did you just say that the window object isn't a host object?  So I
    > presume you've found some long lost chapter of the ECMA specs that
    > (oddly enough) defines a browser-specific object.  Please share,
    > Jorge.  This could change everything!  :) (...)


    Yes David, yes, I've just said -again- that window is an alias of the
    global object, which isn't a host object. Pfffff. :)
    --
    Jorge.
    Ry Nohryb, Aug 14, 2010
    #16
  17. Re: How to force text re-render after padding change from javascriptin Chrome?

    Am 2010-08-14 10:21, Ry Nohryb meinte:

    > BTW. It's not only that that window isn't a host object: it's also
    > that augmenting DOM elements (which are host objects) is ok, yes, I'll
    > repeat it: again: it's *OK* to augment host objects: I *know* that it
    > can be done safely, 100% error-free, in all the browsers I've ever
    > done it


    Let me guess: That's Safari and ...er... Safari?

    , except in the most broken ones ever: Microsoft's IEs.

    Right. Yes, we can ignore these bastards...

    > --


    Is this supposed to be a sig delimiter? The fix it.


    --
    http://vxjs.gregorkofler.com
    Gregor Kofler, Aug 14, 2010
    #17
  18. me

    David Mark Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 10:26 am, Ry Nohryb <> wrote:
    > On Aug 14, 2:58 pm, David Mark <> wrote:
    >
    > > On Aug 14, 4:21 am, Ry Nohryb <> wrote:

    >
    > > > BTW. It's not only that that window isn't a host object:

    >
    > > Did you just say that the window object isn't a host object?  So I
    > > presume you've found some long lost chapter of the ECMA specs that
    > > (oddly enough) defines a browser-specific object.  Please share,
    > > Jorge.  This could change everything!  :) (...)

    >
    > Yes David, yes, I've just said -again- that window is an alias of the
    > global object, which isn't a host object. Pfffff. :)


    You keep saying things without a shred of proof. It doesn't make them
    so.
    David Mark, Aug 14, 2010
    #18
  19. me

    Ry Nohryb Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 6:02 pm, Gregor Kofler <> wrote:
    > Am 2010-08-14 10:21, Ry Nohryb meinte:
    >
    > > BTW. It's not only that that window isn't a host object: it's also
    > > that augmenting DOM elements (which are host objects) is ok, yes, I'll
    > > repeat it: again: it's *OK* to augment host objects: I *know* that it
    > > can be done safely, 100% error-free, in all the browsers I've ever
    > > done it

    >
    > Let me guess: That's Safari and ...er... Safari?


    Safari and er... FireFox and Opera and Chrome. All of them, and all of
    their version since 2007.
    --
    Jorge.
    Ry Nohryb, Aug 14, 2010
    #19
  20. me

    David Mark Guest

    Re: How to force text re-render after padding change from javascriptin Chrome?

    On Aug 14, 4:42 pm, Ry Nohryb <> wrote:
    > On Aug 14, 6:02 pm, Gregor Kofler <> wrote:
    >
    > > Am 2010-08-14 10:21, Ry Nohryb meinte:

    >
    > > > BTW. It's not only that that window isn't a host object: it's also
    > > > that augmenting DOM elements (which are host objects) is ok, yes, I'll
    > > > repeat it: again: it's *OK* to augment host objects: I *know* that it
    > > > can be done safely, 100% error-free, in all the browsers I've ever
    > > > done it

    >
    > > Let me guess: That's Safari and ...er... Safari?

    >
    > Safari and er... FireFox and Opera and Chrome. All of them, and all of
    > their version since 2007.


    So you've made unfounded inferences about a handful of modern
    browsers? You should write a library. :)
    David Mark, Aug 14, 2010
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lau Lei Cheong

    Page.Render do not render complete page

    Lau Lei Cheong, May 15, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    2,065
    Lau Lei Cheong
    May 15, 2004
  2. VB Programmer

    How force re-render of Calendar

    VB Programmer, Aug 23, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    458
    VB Programmer
    Aug 23, 2004
  3. Glenn Gillen
    Replies:
    0
    Views:
    274
    Glenn Gillen
    Nov 17, 2006
  4. joebloe
    Replies:
    4
    Views:
    178
    joebloe
    May 19, 2008
  5. albert kao
    Replies:
    4
    Views:
    174
Loading...

Share This Page