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

M

me

:)

[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>
 
D

Denis McMahon

Is there a better way to force Chrome to re-render the content of the DIV ?
Click to expand...

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
 
M

me

Denis McMahon said:
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
Click to expand...

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.
 
J

Jeremy J Starcher

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.
Click to expand...

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.
 
R

Ry Nohryb

:)

[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>
Click to expand...

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,
 
M

me

Jeremy J Starcher said:
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.
Click to expand...

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.
 
R

Ry Nohryb

<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>
Click to expand...

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';
 
M

me

(...)To force a re-render, set its display to none momentarily, (...)
HTH,
Click to expand...

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.
 
E

Evertjan.

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.
Click to expand...

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);
 
R

Ry Nohryb

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);
Click to expand...

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

:)
 
D

David Mark

:)
Click to expand...
[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.]
Click to expand...
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)
Click to expand...
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 ?

<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>
Click to expand...

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.
Click to expand...

No rational reason. Just a bug in Webkit that has been around for
years.
 
D

David Mark

Even better would be a DOM-command to refrain from re-rendering:
Window.render(false);
Click to expand...

and one to start re-rendering [the default]:
Click to expand...
Window.render(true);
Click to expand...

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

}
Click to expand...

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!
 
M

me

me said:
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.
Click to expand...

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>
 
R

Ry Nohryb

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!
Click to expand...

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 !
 
D

David Mark

BTW. It's not only that that window isn't a host object:
Click to expand...

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,
Click to expand...

Ok? No.
I'll
repeat it: again: it's *OK* to augment host objects:
Click to expand...

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,
Click to expand...

Show you where it fails? :(
except in the most broken ones ever: Microsoft's IEs.
Click to expand...

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.
Click to expand...

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...
Click to expand...

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.
Click to expand...

You aren't helping Apple any more than you helped Yahoo!
David, David... get well !
Click to expand...

Get your own shtick, Jorge.
 
R

Ry Nohryb

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!  :) (...)
Click to expand...

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

Gregor Kofler

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
Click to expand...

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...
--
Click to expand...

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

David Mark

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

You keep saying things without a shred of proof. It doesn't make them
so.
 
R

Ry Nohryb

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


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

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

David Mark

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

So you've made unfounded inferences about a handful of modern
browsers? You should write a library. :)
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I add arrows to my FAQ 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Script working in Firefox but not Chrome and Safari 3
How do I hide the modal after 5 seconds? 4
Having trouble centering contents of td ? 3
Image shifts to the right when export the page to pdf 4
How to position the *tooltip* comment on these buttons? 9
Show text on-click with transition 2

Members online

Total: 22 (members: 1, guests: 21)
Robots: 432

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top