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

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

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 ?

--
sm

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
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Hi SAM,

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

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

--
sm

Cheers Richard Maher

Hi Thomas,

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote

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.

On Nov 2, 5:26*pm, "Richard Maher" <maher... (AT) hotspamnotmail (DOT) com>
wrote:

Hi SAM,

"SAM" <stephanemoriaux.NoAd... (AT) wanadoo (DOT) fr.invalid> wrote in message

news:4aeeeba3$0$966$ba4acef3 (AT) news (DOT) orange.fr...

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

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

Hi SAM,

"SAM" <stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote in message
news:4aeeeba3$0$966$ba4acef3 (AT) news (DOT) orange.fr...
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, 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.

--
sm

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

Hi SAM,

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

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

"SAM" <stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote in message
news:4aeeeba3$0$966$ba4acef3 (AT) news (DOT) orange.fr...
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, 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.

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.

--
sm

Cheers Richard Maher

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

--
sm