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

[Richard Maher]

Hi,

Similar questions have been asked all over the place (I know 'cos I just
read most of 'em but I'm still none the wiser so I hope someone here can
please help me.

As with a lot of people these days, I have a <ul><li> list of values
(google-esque auto-suggest) contained in a <div>. After a certain number of
entries, I wish to cap the vertical size of the list. ('Cos IE*6* doesn't
support maxHeight) I plan to just set the style.height attribute for the
<div> that contains my <ul>.

Anyway, cut a long story short, I want what en.wikipedia.org has on its
search box. The result set grows/shrinks horizontally according to the size
of the elements/text-nodes that it contains. Is this achieved with plain CSS
or is Javascript animation involved?

I currently have the <div> with style: -
position: absolute;
overflow-y: auto;
overflow-x: hidden;
width: auto;
height: auto;

and the <ul> I have: -
width: auto;
height: auto;
margin: 0px;
padding: 0px;

and everything is great with the content-based width accommodation until I
set "height" to cater for say 4 entries, at which stage the vertical
scroll-bar appears *inside* the <div> and occludes underlying data :-(

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.

Cheers Richard Maher

 

[SAM]

Le 11/2/09 2:39 PM, Richard Maher a écrit :

I currently have the <div> with style: -
position: absolute;
overflow-y: auto;
overflow-x: hidden;
width: auto;
height: auto;

height: 5em;
padding-right: 17px;

OK with "my" Firefox
IE ?

 

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


PointedEars

 

[Richard Maher]

Hi SAM,

Le 11/2/09 2:39 PM, Richard Maher a écrit :

height: 5em;
padding-right: 17px;

Ok, is there a more heuristic way to derive "17"?

IOW, how does one obtain the width of a browser's scrollbars at runtime?

OK with "my" Firefox
IE ?

Cheers Richard Maher

 

[Richard Maher]

Hi Thomas,

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. The Wikipedia version is one of
the best drop-down LOVs I've seen and something I'd expected to have been
the topic of previous discussion/investigation amongst the contributors of
c.l.js.

While, at first glance, I may appear to be a sloth asking people to wipe my
bum for me I have had rather a lot of this sort of JAVA and Javascript
investigation to do over the last 6 months so if pity can soften anyone's
heart then I think it would not only help me but quite a few others who are
doing similar things at the moment. Maybe Wikipedia's is not the best? Maybe
others here have a better way?

If your reply went as far as to say "It is in the [javascript] source and
cant't be done with CSS only" then I would be grateful.

PointedEars

Regards Richard Maher

--

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

 

[David Mark]

Hi SAM,





Ok, is there a more heuristic way to derive "17"?

IOW, how does one obtain the width of a browser's scrollbars at runtime?

You don't. You increase the width of the container until scrollWidth
<= clientWidth.

 

[SAM]

Le 11/2/09 11:26 PM, Richard Maher a écrit :

Hi SAM,



Ok, is there a more heuristic way to derive "17"?

It seems that wikipedia choiced 20 px :

if(r.containerCount < r.resultCount){
fix = 20; // give 20px for scrollbar

line 253 of :
http://fr.wikipedia.org/skins-1.5/common/mwsuggest.js?urid=243z2

IOW, how does one obtain the width of a browser's scrollbars at runtime?

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


wikidedia puts the items in cells and rows of a table (easier to code ?
better for IE ?) then gets the width of the table (myTable.offsetWidth)
then counts number of proposed items and adds the scrollbar (the 20px)
when it's needed (more items than those allowed to see at same time) to
finally fix the width of the div container.

 

[Richard Maher]

Hi David,

You don't. You increase the width of the container until
scrollWidth <= clientWidth.

You bewdy. Once again you're a bloody marvel! Thanks.

Cheers Richard Maher

 

[Richard Maher]

Hi SAM,

Le 11/2/09 11:26 PM, Richard Maher a écrit :

It seems that wikipedia choiced 20 px :

if(r.containerCount < r.resultCount){
fix = 20; // give 20px for scrollbar

line 253 of :
http://fr.wikipedia.org/skins-1.5/common/mwsuggest.js?urid=243z2



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


wikidedia puts the items in cells and rows of a table (easier to code ?
better for IE ?) then gets the width of the table (myTable.offsetWidth)
then counts number of proposed items and adds the scrollbar (the 20px)
when it's needed (more items than those allowed to see at same time) to
finally fix the width of the div container.

Thanks for looking that up for me! Interesting to see what they've done.

For others I recommend David's suggestion of using the scrollWidth -
clientWidth differential.
Cheers Richard Maher

 

[SAM]

Le 11/3/09 12:36 PM, Richard Maher a écrit :

Hi SAM, (..)
Thanks for looking that up for me! Interesting to see what they've done.

For others I recommend David's suggestion of using the scrollWidth -
clientWidth differential.

Does that works everywhere ?
<http://www.quirksmode.org/dom/tests/elementdimensions.html>

And ... there's still to make the loop on showed items
(all along the scroll-up/down ?)

 

[Richard Cornford]

On Nov 3, 1:22 am, SAM wrote:

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.

 

[SAM]

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

On Nov 3, 1:22 am, SAM wrote:

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

 

[Richard Cornford]

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

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.

 

[SAM]

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

<snip>

Arggh !
Now answer about to detect width of scrollbars ?

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

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 ?

 

[Thomas 'PointedEars' Lahn]

"Thomas 'PointedEars' Lahn":

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

 

[Richard Cornford]

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


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.

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.

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.

 

[SAM]

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

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 M$ 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 ;-)

Probably, but multi-touch is hardware dependent.

And tablets PC no ?

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 !

 

[Richard Maher]

Hi All,

:

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

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
:

Good! Almost correct translation ;-)

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

Regards Richard Maher

 

[Richard Cornford]

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



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;

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 M$ 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 ;-)

Probably, but multi-touch is hardware dependent.

And tablets PC no ?

I have no idea what that means.

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.

 

[SAM]

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

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

I have no idea what that means.

No importance.

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.