Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Calculating the actual content width or height

Reply
Thread Tools

Calculating the actual content width or height

 
 
r_honey
Guest
Posts: n/a
 
      12-15-2008
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??
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      12-15-2008
On Dec 15, 9:18*am, r_honey <(E-Mail Removed)> wrote:
> 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
 
Reply With Quote
 
 
 
 
r_honey
Guest
Posts: n/a
 
      12-15-2008
On Dec 15, 7:27 pm, David Mark <(E-Mail Removed)> wrote:
> On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:
>
> > 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


Thanx. Yes, that worked.
 
Reply With Quote
 
r_honey
Guest
Posts: n/a
 
      12-15-2008
On Dec 15, 7:27 pm, David Mark <(E-Mail Removed)> wrote:
> On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:
>
> > 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


But is that cross-browser??
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-15-2008
On Dec 15, 9:36*am, r_honey <(E-Mail Removed)> wrote:
> On Dec 15, 7:27 pm, David Mark <(E-Mail Removed)> wrote:
>
> > On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:

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

>
> But is that cross-browser??


More or less. You should test it before use.
 
Reply With Quote
 
dhtml
Guest
Posts: n/a
 
      12-16-2008
David Mark wrote:
> On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:
>> 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


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

--
comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-16-2008
On Dec 16, 3:46*am, dhtml <(E-Mail Removed)> wrote:
> David Mark wrote:
> > On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:
> >> 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

>
> 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]
 
Reply With Quote
 
Ben Amada
Guest
Posts: n/a
 
      12-16-2008
dhtml wrote:

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

--
Ben
http://allben.net/

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      12-17-2008
On Dec 16, 2:15*pm, "Ben Amada" <(E-Mail Removed)>
wrote:
> dhtml wrote:
> > <!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]
 
Reply With Quote
 
dhtml
Guest
Posts: n/a
 
      12-17-2008
David Mark wrote:
> On Dec 16, 3:46 am, dhtml <(E-Mail Removed)> wrote:
>> David Mark wrote:
>>> On Dec 15, 9:18 am, r_honey <(E-Mail Removed)> wrote:
>>>> 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

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


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

--
comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Calculating height based on width and aspect ratio? Tuxedo Javascript 11 09-27-2011 05:05 PM
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
How to get actual width and height of body ? Pugi! Javascript 5 06-15-2007 07:59 PM
get the actual with and height of a document's content juergen.riemer@chello.at Javascript 5 04-17-2006 07:38 AM
CSS min-width, max-width, and min-height with display:inline Lois HTML 1 12-27-2004 03:03 AM



Advertisments