Intrusive DIV scrollbar needs Javascript or CSS to "append"?

On Nov 3, 1:22 am, SAM wrote:
<snip>

scrollbars are generally not far from 18px, setting the container
width to 20px more must satisfy all browsers.
snip

On Windows (and I would be very surprised if it was not also true for
most other operating systems) the scroll bar dimensions are user-
selectable (The "advanced" option of the "Appearance" tab in "Display
Properties"). The most you can state is the default values, and
possibly note that most people have no reason for changing those. On
the other hand, I have a tablet PC that I use for note taking and for
which I adjusted the scrollbar widths to 24 pixels because that is
about the minimum width that laves the scrollbars operable by finger
tip.

Given a combination of cheaper hardware and fashion, I would not be at
all surprised to see the next few years whiteness a huge growth in the
use of tablet/touch-screen PCs, and much configuration to move away
from the precision of a mouse pointer.

Richard.

Le 11/3/09 1:36 PM, Richard Cornford a écrit :

On Nov 3, 1:22 am, SAM wrote:
snip
scrollbars are generally not far from 18px, setting the container
width to 20px more must satisfy all browsers.
snip

On Windows (and I would be very surprised if it was not also true for
most other operating systems) the scroll bar dimensions are user-
selectable (The "advanced" option of the "Appearance" tab in "Display
Properties").

Don't know what is that "Display Properties" (of what ?)
(I'm exclusively a Mac user and understand nothing in Windows features)

The most you can state is the default values, and
possibly note that most people have no reason for changing those. On
the other hand, I have a tablet PC that I use for note taking and for
which I adjusted the scrollbar widths to 24 pixels

And know how can I do to detect that extra width ?

because that is about the minimum width that laves
the scrollbars operable by finger tip.

Given a combination of cheaper hardware and fashion, I would not be at
all surprised to see the next few years whiteness a huge growth in the
use of tablet/touch-screen PCs, and much configuration to move away
from the precision of a mouse pointer.

With a modern "touch" system,
no more fingered accessing scrollbars are necessary ...
fingers are used as a scroll-wheel

You(you'll?) certainly can reduce your scrollbars to 5px (or 0 ?) to
leave more place to the content.

--
sm

On Nov 3, 1:01 pm, SAM wrote:

Le 11/3/09 1:36 PM, Richard Cornford a écrit :
snip
Given a combination of cheaper hardware and fashion, I would not
be at all surprised to see the next few years whiteness a huge
growth in the use of tablet/touch-screen PCs, and much
configuration to move away from the precision of a mouse
pointer.

With a modern "touch" system,
no more fingered accessing scrollbars are necessary ...
fingers are used as a scroll-wheel

Not on a drawing/writing surface. In those cases dragging a finger
across the surface will make marks or select content.

You(you'll?) certainly can reduce your scrollbars to 5px
(or 0 ?) to leave more place to the content.

Not if I want to be able to scroll the content.

Richard.

Le 11/3/09 2:37 PM, Richard Cornford a écrit :

On Nov 3, 1:01 pm, SAM wrote:
Le 11/3/09 1:36 PM, Richard Cornford a écrit :
snip

Arggh !
Now answer about to detect width of scrollbars ?

With a modern "touch" system,
no more fingered accessing scrollbars are necessary ...
fingers are used as a scroll-wheel

Not on a drawing/writing surface. In those cases dragging a finger
across the surface will make marks or select content.

Là je ne comprends plus rien !?
Because you draw with your finger ? with enough precision this time ?

To scroll, some systems need 2 fingers
(maybe to do not mix with one finger selecting ?)

You(you'll?) certainly can reduce your scrollbars to 5px
(or 0 ?) to leave more place to the content.

Not if I want to be able to scroll the content.

by moving finger(s) on it
(most of phones-touch do it with lists)
Is there any firmware/software update for tablets PC ?

--
sm

Richard Maher wrote:

"Thomas 'PointedEars' Lahn":
Richard Maher wrote:
Anyway, cut a long story short, I want what en.wikipedia.org has on its
search box. [...]
Do I have to add scroll-bar width to the div-width with Javascript?

Is there a CSS parameter/configuration that will give me
wikipedia-esque width-expansion?

Any pertinent advice gratefully accepted.

RTSL. You're welcome.

Yes, there is always that :-) But I had rather hoped that someone here
might have the answer and be willing to share it. [...]

I gave you the answer.

If your reply went as far as to say "It is in the [...] source [...]"
then I would be grateful.

That is exactly what I did.

PS. Who knows - maybe it's not buried in 10 levels of obfuscated JS
include files and I am being lazy/unreasonable.

That much is obvious. And your From header is invalid, too.


Score adjusted

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

On Nov 3, 1:55 pm, SAM wrote:

Le 11/3/09 2:37 PM, Richard Cornford a écrit :

On Nov 3, 1:01 pm, SAM wrote:
Le 11/3/09 1:36 PM, Richard Cornford a écrit :
snip

Arggh !
Now answer about to detect width of scrollbars ?

Dimension information for an element includes clientWidth/Height
offsetWidth/Height and scrollWidth/Height. Given an appropriate
element, if it has scroll bars then their dimensions can be deduced.
And it would be fine to do that once per execution because the odds of
a user adjusting their scrollbar dimensions while any given scripted
document is loaded is extremely low.

With a modern "touch" system,
no more fingered accessing scrollbars are necessary ...
fingers are used as a scroll-wheel

Not on a drawing/writing surface. In those cases dragging
a finger across the surface will make marks or select
content.

Là je ne comprends plus rien !?

I have no idea what that means.

Because you draw with your finger ?

No, because I navigate about documents with my fingers in applications
that would allow editing of the content if I wanted to.

with enough precision this time ?

To scroll, some systems need 2 fingers
(maybe to do not mix with one finger selecting ?)

Probably, but multi-touch is hardware dependent.

You(you'll?) certainly can reduce your scrollbars to 5px
(or 0 ?) to leave more place to the content.

Not if I want to be able to scroll the content.

by moving finger(s) on it

The applications that I use assign other meanings to moving fingers
over the content.

(most of phones-touch do it with lists)

A PC hardly compares to a phone.

Is there any firmware/software update for tablets PC ?

As there are hundreds of types and makes of tablet PC there almost
certainly are BIOS updates for some of them.

Richard.

Le 11/3/09 4:44 PM, Richard Cornford a écrit :

On Nov 3, 1:55 pm, SAM wrote:

Arggh !
No answer about to detect width of scrollbars ?

Dimension information for an element includes clientWidth/Height
offsetWidth/Height and scrollWidth/Height. Given an appropriate
element, if it has scroll bars then their dimensions can be deduced.

I certainly do something wrong because
if I can get clientWidth and scrollWidth
giving scrollWidth to the width of the element doesn't give place for
scrollbars (Firefox where offsetWidth = scrollWidth)

Here the code for my test :

<style type="text/css">
#menu {
position: absolute;
overflow-y: auto;
overflow-x: hidden;
width: auto;
height: 5em; /* auto;
padding-right: 20px; */
background: #ffc;
}
#menu ul {
width: auto;
height: auto;
margin: 0px;
padding: 0px;
}
#menu li { white-space: pre }
</style>
</head>
<body>
<h1>CSS Test :: place for scroolbars</h1>
<pre id="log"></pre>
<div id="menu">
<ul>
<li>essai 1</li>
<li>essai 2</li>
<li>essai 3</li>
<li>essai 4</li>
<li>essai 5</li>
<li>essai 6</li>
<li>essai 70000012AB</li>
<!--
'AB' keeps hidden if the additional 20px in width aren't set
-->
<li>essai 8</li>
</ul>
</div>
<script type="text/javascript">
var m = document.getElementById('menu'),
result = document.getElementById('log');
result.innerHTML = 'scrollWidth = '+ m.scrollWidth+
'\nclientWidth = '+m.clientWidth+
'\noffsetWidth = '+m.offsetWidth;
m.style.width = (m.scrollWidth>m.clientWidth)?(m.scrollWidth)+ 'px':'';
// to be OK, 20px must be added :
// m.style.width = (m.scrollWidth>m.clientWidth)?
// (m.scrollWidth + 20)+ 'px' : '';
// or, better :
// (m.scrollWidth*2-m.clientWidth)+ 'px':'';
</script>


Result :
========
Firefox.3 :
scrollWidth = 113
clientWidth = 98
offsetWidth = 113
IE.6 :
scrollWidth = 166
clientWidth = 149
offsetWidth = 166
IE.7 :
scrollWidth = 166
clientWidth = 166
offsetWidth = 166

what could I do with such data ?
where with IE7 (m.scrollWidth>m.clientWidth) would be false
so, apparently, it doesn't need more room (that's not true)
However, applying :
m.style.width = (m.scrollWidth>m.clientWidth)?
(m.scrollWidth*2-m.clientWidth)+ 'px':'';
seems to work.
(I definitively understand nothing about Microsoft products)

And it would be fine to do that once per execution because the odds of
a user adjusting their scrollbar dimensions while any given scripted
document is loaded is extremely low.

Otherwise ... too bad for him !

Changing scrollbars width in /display/appearance/advanced of Win XP
changes nothing in IE.7's results above (all same widths)
(in IE.6 offsetWidth-clientWidth gives the correct width of the bar)
Once again I did something wrong ?






[out of topic?]

Là je ne comprends plus rien !?

I have no idea what that means.

Good! Almost correct translation ;-)

To scroll, some systems need 2 fingers
(maybe to do not mix with one finger selecting ?)

Probably, but multi-touch is hardware dependent.

And tablets PC no ?

(most of phones-touch do it with lists)

A PC hardly compares to a phone.

a PC Windows ?
sure !
before it reaches a phone navigation functionalities we'll have to wait.

No, no, I said nothing !

--
sm

Hi All,

"SAM" <stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote

:

I certainly do something wrong because
if I can get clientWidth and scrollWidth
giving scrollWidth to the width of the element doesn't give place for
scrollbars (Firefox where offsetWidth = scrollWidth)

Perhaps something along the lines of:

if (myDiv.clientWidth < myDiv.scrollWith) {
myDiv.style.width = (myDiv.scrollWidth + (myDiv.scrollWidth -
myDiv.clientWidth)) + "px";
}
:

And it would be fine to do that once per execution because the odds of
a user adjusting their scrollbar dimensions while any given scripted
document is loaded is extremely low.

Otherwise ... too bad for him !

As David indicated, it was never really an issue of scrollbar width. In my
case (and I suggest others) once the DIV has acheived its maximum number of
rows (height) then the calculation will be performed for every additional
<li>text-node/row as that could have intoduced a longer row than ever
before. (Ok, I suppose one could store the maxRowLength and then check
against that first but, as I am potentially wizzing accross the network to
SQL up a resultset at every keystroke, I won't be bothering with that in
V1.0 :-)
:

Là je ne comprends plus rien !?

I have no idea what that means.

Good! Almost correct translation ;-)

It was better when Piaf sang it (Ok, a couple too many syllables :-)

Regards Richard Maher

On Nov 3, 6:58 pm, SAM wrote:

Le 11/3/09 4:44 PM, Richard Cornford a écrit :

On Nov 3, 1:55 pm, SAM wrote:
Arggh !
No answer about to detect width of scrollbars ?

Dimension information for an element includes clientWidth/Height
offsetWidth/Height and scrollWidth/Height. Given an appropriate
element, if it has scroll bars then their dimensions can be deduced.

I certainly do something wrong because
if I can get clientWidth and scrollWidth
giving scrollWidth to the width of the element doesn't
give place for scrollbars (Firefox where offsetWidth =
scrollWidth)

Did anyone say it would?

My suggestion was that available information could be used to "deduce"
the widths of the scrollbars given an "appropriate element". Doing
something else entirely has no baring on that.

Here the code for my test :

style type="text/css"
#menu {
position: absolute;
overflow-y: auto;
overflow-x: hidden;
snip
IE.7 :
scrollWidth = 166
clientWidth = 166
offsetWidth = 166

With your code, the IE 7 on my tablet PC reports:-

scrollWidth = 118
clientWidth = 94
offsetWidth = 118

- which seems to tally with the 24 pixel scroll bar width setting on
that machine.

what could I do with such data ?
where with IE7 (m.scrollWidth>m.clientWidth) would be false
so, apparently, it doesn't need more room (that's not true)
However, applying :
m.style.width = (m.scrollWidth>m.clientWidth)?
(m.scrollWidth*2-m.clientWidth)+ 'px':'';
seems to work.
(I definitively understand nothing about Microsoft products)

And it would be fine to do that once per execution because the
odds of a user adjusting their scrollbar dimensions while any
given scripted document is loaded is extremely low.

Otherwise ... too bad for him !

Changing scrollbars width in /display/appearance/advanced of
Win XP changes nothing in IE.7's results above (all same
widths) (in IE.6 offsetWidth-clientWidth gives the correct
width of the bar) Once again I did something wrong ?

Apparently.

[out of topic?]

Là je ne comprends plus rien !?

I have no idea what that means.

Good! Almost correct translation ;-)

To scroll, some systems need 2 fingers
(maybe to do not mix with one finger selecting ?)

Probably, but multi-touch is hardware dependent.

And tablets PC no ?

I have no idea what that means.

(most of phones-touch do it with lists)

A PC hardly compares to a phone.

a PC Windows ?
sure !

I have no idea what that means.

before it reaches a phone navigation functionalities we'll
have to wait.

More likely the other way around. Until there are word processors like
Word, handwriting based text entry notebook applications and drawing
applications on phones they will not have to deal with the wider range
of user input demands necessary for those applications.

No, no, I said nothing !

Apparently.

Richard.

Le 11/4/09 2:18 PM, Richard Cornford a écrit :

On Nov 3, 6:58 pm, SAM wrote:
[out of topic?]
To scroll, some systems need 2 fingers
(maybe to do not mix with one finger selecting ?)
Probably, but multi-touch is hardware dependent.
And tablets PC no ?

I have no idea what that means.

Like I don't see what tablets can be.

(most of phones-touch do it with lists)
A PC hardly compares to a phone.
a PC Windows ?
sure !

I have no idea what that means.

No importance.

before it reaches a phone navigation functionalities we'll
have to wait.

More likely the other way around. Until there are word processors like
Word, handwriting based text entry notebook applications and drawing
applications on phones they will not have to deal with the wider range
of user input demands necessary for those applications.

Right, however not so far the time where cell-phones weren't so much used.
Since when cellular phones have sensitive screen ?
Their screen grows more and more.
What about music, photos, videos, e-mail/web-mail, blogs, web pages and
forms (if not richtext) already usable (+/-) at this time ?
Tomorrow ? web-Word-Draw-and-so applications and web-saves and certainly
full of things we never dreamed.
All that changes so quickly.

--
sm