Calculating the actual content width or height

R

r_honey

I am trying to scroll text across a <div>. For doing this, I need to
know the actual width the content of the div consumes (not the width
or offset width of the div, but the actual width of the contents,
irrespective of whether the div itself is larger or smaller than the
actual content width).

Is there any way of knowing this in java script??
 
D

David Mark

I am trying to scroll text across a <div>. For doing this, I need to
know the actual width the content of the div consumes (not the width
or offset width of the div, but the actual width of the contents,
irrespective of whether the div itself is larger or smaller than the
actual content width).

Is there any way of knowing this in java script??

div.scrollWidth
 
D

dhtml

David said:
div.scrollWidth

No, unfortunately that includes padding area, so it doesn't answer the
OP question.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>scrollWidth</title>
<script type="text/javascript">
onload = function() {
var d = document.getElementById('d'),
f = document.getElementById('f'),
textContent = "textContent";
if (! (textContent in document.body))
textContent = "innerText";
f[textContent] = d.scrollWidth;

};
</script>
</head>
<body>
<h1>scrollWidth</h1>
<div id="d" style="width: 10px; padding: 100px; background: lime">width:
10px; padding: 100.5px</div>
scrollWidth: <b id="f"></b>
</body>
</html>

FF 3
scrollWidth: 211

Safari 2, Safari 3, Opera 9.5:
scrollWidth: 210

The OP was very specific in that he wants to obtain the content area. I
would also like a simple solution to this problem.

Garrett
 
D

David Mark

No, unfortunately that includes padding area, so it doesn't answer the
OP question.

Of course it includes the padding. It would be far less useful if it
did not. And it seems the OP was happy with it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>scrollWidth</title>
   <script type="text/javascript">
   onload = function() {
     var d = document.getElementById('d'),
       f = document.getElementById('f'),
       textContent = "textContent";
       if (! (textContent in document.body))
        textContent = "innerText";
        f[textContent] = d.scrollWidth;

   };
</script>
</head>
<body>
<h1>scrollWidth</h1>
<div id="d" style="width: 10px; padding: 100px; background: lime">width:
10px; padding: 100.5px</div>
scrollWidth: <b id="f"></b>
</body>
</html>

FF 3
scrollWidth: 211

Safari 2, Safari 3, Opera 9.5:
scrollWidth: 210

Round-off error of some sort.
The OP was very specific in that he wants to obtain the content area. I
would also like a simple solution to this problem.

What is the "content area?" If you want to exclude the padding, which
seems less than useful to me, subtract the computed padding (which
will be difficult in IE in some cases.) Personally, I've never needed
such a measurement for anything.

[snip]
 
B

Ben Amada

dhtml said:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>
<title>scrollWidth</title>
<script type="text/javascript">
onload = function() {
var d = document.getElementById('d'),
f = document.getElementById('f'),
textContent = "textContent";
if (! (textContent in document.body))
textContent = "innerText";
f[textContent] = d.scrollWidth;

}; </script> </head> <body> <h1>scrollWidth</h1> <div id="d"
style="width: 10px; padding: 100px; background: lime">width: 10px;
padding: 100.5px</div> scrollWidth: <b id="f"></b> </body> </html>

FF 3 scrollWidth: 211

Safari 2, Safari 3, Opera 9.5: scrollWidth: 210

The OP was very specific in that he wants to obtain the content area. I
would also like a simple solution to this problem.

It doesn't seem scrollWidth takes the content width into consideration for
the OP's question. My interpretation is that there is a single line of text
that is being scrolled within a div. If the width of that text is greater
than the div width, then scrollWidth just reports the width of the div. I
modified your code to demonstrate this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>scrollWidth</title>
<script type="text/javascript">
onload = function() {
var d = document.getElementById('d'),
f = document.getElementById('f'),
textContent = "textContent";
if (! (textContent in document.body))
textContent = "innerText";
f[textContent] = d.scrollWidth;

};
</script>
</head>
<body>
<h1>scrollWidth</h1>
<div id="d" style="width: 10px; background: lime">
width: 10px; more content more content more content
more content more content</div>
scrollWidth: <b id="f"></b>
</body>
</html>

Firefox 3: scrollWidth: 10

Isn't the OP trying to find the width of the div content irrespective of the
div width?
 
D

David Mark

dhtml said:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>
<title>scrollWidth</title>
   <script type="text/javascript">
   onload = function() {
     var d = document.getElementById('d'),
       f = document.getElementById('f'),
       textContent = "textContent";
       if (! (textContent in document.body))
       textContent = "innerText";
       f[textContent] = d.scrollWidth;
   }; </script> </head> <body> <h1>scrollWidth</h1> <div id="d"
style="width: 10px; padding: 100px; background: lime">width: 10px;
padding: 100.5px</div> scrollWidth: <b id="f"></b> </body> </html>
FF 3 scrollWidth: 211
Safari 2, Safari 3, Opera 9.5: scrollWidth: 210
The OP was very specific in that he wants to obtain the content area. I
would also like a simple solution to this problem.

It doesn't seem scrollWidth takes the content width into consideration for
the OP's question.  My interpretation is that there is a single line oftext

No need to interpret. Read the OP's response: "Thanx. Yes, that
worked." And the scrollWidth property is not a mystery.
that is being scrolled within a div.  If the width of that text is greater
than the div width, then scrollWidth just reports the width of the div.  I
modified your code to demonstrate this.

That's what he wanted. No need for a demonstration of scrollWidth.

[snip]
 
D

dhtml

David said:
Of course it includes the padding. It would be far less useful if it
did not. And it seems the OP was happy with it.

Either he asked the wrong question, or he was not aware that the
scrollWidth included padding. Child text and in-flow content would not
take up space in the padding area.
What is the "content area?"

The area specified by the width property.

From CSS 2.1 "10.2 Content width: the 'width' property"

| <length>
| Specifies the width of the content area using a length unit.
|

http://www.w3.org/TR/CSS21/visudet.html#the-width-property
If you want to exclude the padding, which
seems less than useful to me, subtract the computed padding (which
will be difficult in IE in some cases.) Personally, I've never needed
such a measurement for anything.

[snip]

For animation from [current] to [end].

The OP wants to scroll text across a div. He would like to know how much
area the text occupies.

One possibility is to use div.scrollWidth and supply no padding to the div.

Garrett
 
B

Ben Amada

David said:
Read the OP's response: "Thanx. Yes, that worked."

Yes, so either scrollWidth is what the OP wanted or he hadn't yet tested
this scenario when he posted that.
No need for a demonstration of scrollWidth.

Just bringing up the possibility that scrollWidth may not be the answer.
But unless the OP says something, yes, it's a moot point.
 
D

David Mark

Either he asked the wrong question, or he was not aware that the
scrollWidth included padding. Child text and in-flow content would not
take up space in the padding area.




The area specified by the width property.

 From CSS 2.1 "10.2 Content width: the 'width' property"

| <length>
|    Specifies the width of the content area using a length unit.
|

But that doesn't apply here and will vary according to box model. The
OP wanted the scrollWidth property.
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
If you want to exclude the padding, which
seems less than useful to me, subtract the computed padding (which
will be difficult in IE in some cases.)  Personally, I've never needed
such a measurement for anything.

For animation from [current] to [end].

The OP wants to scroll text across a div. He would like to know how much
area the text occupies.

One possibility is to use div.scrollWidth and supply no padding to the div.

Padding doesn't enter into my scrolling effects. It uses clientWidth/
Height and scrollWidth/Height. Now if it tried to use the width, then
padding would have to be dealt with.
 
D

David Mark

Yes, so either scrollWidth is what the OP wanted or he hadn't yet tested
this scenario when he posted that.

Absolutely. I've read the post a few times now and it seems clear
that scrollWidth is what he wants. Not sure what scenario you mean.
Looking back at your post, you seem to imply that scrollWidth would
act like width in some case. That's just not true. It is just what
it sounds like (the width of the scroll.) Think of it as an unwrapped
scroll.

[snip]
 
B

Ben Amada

David said:
Absolutely. I've read the post a few times now and it seems clear that
scrollWidth is what he wants. Not sure what scenario you mean. Looking
back at your post, you seem to imply that scrollWidth would act like
width in some case. That's just not true. It is just what it sounds
like (the width of the scroll.) Think of it as an unwrapped scroll.

Unwrapped scroll -- meaning if the text could flow from left to right and
never wrap? This was what I thought the OP was looking for ... the total
width of the text as a single line. I interpreted "I am trying to scroll
text across a <div>" to mean he was going to manually create his own
marquee. He wanted to know the width of the text he was going to scroll
within his own marquee div so he would know when the text had completely
passed through the marquee "viewport". At that point, he'd either scroll
the text through again or do something else.
 
D

David Mark

Unwrapped scroll -- meaning if the text could flow from left to right and
never wrap?  This was what I thought the OP was looking for ... the total

Better: unrolled scroll. Nothing to do with wrapping.

[snip]
 
B

Ben Amada

David said:
Better: unrolled scroll. Nothing to do with wrapping.

I think I've now got a good grasp of what scrollWidth does and how it will
benefit the OP. My initial test was using Garrett's sample code which was
intended to demonstrate the effects of padding and not really show what I
expected to see. A new sample I put together which actually has a scrollbar
with content exceeding the width of a div, made scrollWidth more
understandable (to me) and how it differs from the width of the div.
Thanks.
 
D

dhtml

David said:
No need to interpret. Read the OP's response: "Thanx. Yes, that
worked." And the scrollWidth property is not a mystery.

The fact that he said "thanks" does not change what he wrote. That is
not what the OP asked for.

He asked for the 'content' width. That's something clearly defined in
css2.1. scrollWidth does not return the width of the content area.
That's what he wanted. No need for a demonstration of scrollWidth.

We do not know that that is what he wanted. All we know is he thinks its
working for him.
 
D

David Mark

The fact that he said "thanks" does not change what he wrote.

Right.

That is
not what the OP asked for.

That is your opinion and it is wrong. The OP's "width the content of
the div" is clearly not to be interpreted as the "content width"
defined in the specs. Read further and it is clear he wanted the
scrollWidth. To wit:

"(not the width or offset width of the div, but the actual width of
the contents, irrespective of whether the div itself is larger or
smaller than the actual content width)"

Why belabor the point? Personally, I don't care if it is what he
wanted or not. If not, he will likely follow-up.
He asked for the 'content' width. That's something clearly defined in

Do you really think he reads the specs? If he did, he wouldn't be
asking this in the first place.

[snip]
 
D

dhtml

David said:
Right.

That is

That is your opinion and it is wrong. The OP's "width the content of
the div" is clearly not to be interpreted as the "content width"
defined in the specs. Read further and it is clear he wanted the
scrollWidth. To wit:

Possibly.

"(not the width or offset width of the div, but the actual width of
the contents, irrespective of whether the div itself is larger or
smaller than the actual content width)"

Why belabor the point? Personally, I don't care if it is what he
wanted or not. If not, he will likely follow-up.

If he wants the width of an element inside that div, then that would be
obtained off that element. It might be three divs, two floated, one
position: absolute.
Do you really think he reads the specs?

I don't know. I think he's probably not reading this thread any more.

As for obtaining the width of the content area, when the element has
padding, that is obtained by removing padding, then grabbing the
scrollWidth:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Untitled</title>
<style>
#dummy {
width: 140px;
padding: 60px;
background: lime;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById('dummy'),
textContent = 'textContent' in div ? 'textContent' : 'innerText',
s = div.style,
cssText = s.cssText,
scrollWidth;
s.padding = "0";
scrollWidth = div.scrollWidth;
s.cssText = s;
div[textContent] = "content width: " + scrollWidth + " (expected 140)";
}
</script>

</head>
<body>
<div id='dummy'>

</div>
</body>
</html>

Of course, not giving the element padding in the first place would be
simpler.
 
D

David Mark

If he wants the width of an element inside that div, then that would be
obtained off that element. It might be three divs, two floated, one
position: absolute.



I don't know. I think he's probably not reading this thread any more.

Right. There's really no telling what he wanted at this point.
As for obtaining the width of the content area, when the element has
padding, that is obtained by removing padding, then grabbing the
scrollWidth:-

Yes. That is a good way to get around the issue of IE's lack of
computed style.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <title>Untitled</title>
   <style>
   #dummy {
     width: 140px;
     padding: 60px;

In this case the cascaded (all IE knows) and computed styles are the
same, so you have a viable alternative.
     background: lime;
   }
   </style>
   <script type="text/javascript">
window.onload = function() {
   var div = document.getElementById('dummy'),
       textContent = 'textContent' in div ? 'textContent' : 'innerText',
       s = div.style,
       cssText = s.cssText,

Interesting. Whey not just save the inline padding style?
       scrollWidth;
   s.padding = "0";
   scrollWidth = div.scrollWidth;
   s.cssText = s;
   div[textContent] = "content width: " + scrollWidth + " (expected140)";}

I honestly can't see what this measurement does for you, but if you
need it, this is not a bad way to get it.
</script>

</head>
<body>
<div id='dummy'>

</div>
</body>
</html>

Of course, not giving the element padding in the first place would be
simpler.

Yes. That would be a prudent design decision, resulting in smaller,
faster and simpler code. Not a big deal here, but it all adds up.
 

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

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top