Always show scrollbars with JavaScript?

**Artimidor** · 09-23-2005, 10:28 AM

Hello there!

I have a question, which I hope some of you JavaScript Pros might be able to answer: Is it possible to always show a vertical scrollbar on a page, regardless of the content? - Because I've noticed that certain browsers (e.g. Firefox) behave differently compared to Internet Explorer if they have to center a table in a HTML page.

Example: look here. You should see the menu to the left properly centered when you load this page, because there's a scrollbar there right from the start (unless you have a resolution that allows to display the whole content of the menu). Now when you click on various icons on the top left to open another menu you'll get menus with much less content and a scrollbar won't be needed. At all browsers the scrollbar disappears therefore, but unlike at IE, Firefox moves the centered table to the right and the whole thing messes up.

So I thought maybe there's a way to display the scrollbar constantly (or determine whether to display them or not, depending on the browser). Or there is another solution you can think of, because changing the menu design radically would be a major problem.

Any ideas perhaps? I'd be very grateful if someone has an idea how to handle this.

**jscheuer1** · 09-24-2005, 08:53 AM

The problem is probably the pages like:

menus/people_categories.htm

The content is all the way to the right. It should be in the upper left corner or top centered. That way, when it shows through the frame, it will not be pushing at the right edge where, as you point out, different browsers see things differently.

**Artimidor** · 09-25-2005, 07:17 AM

Well, yes, that's one of the problematic menus. However, moving the table to the center or to the left doesn't solve the problem.

If I move the table to the center, it immediately displays correctly at browsers like Mozilla - but at Internet Explorer the whole table now is much further left (by scrollbar width).

If I move the table to the left, then both tables start at the top left. However, there is a different problem then: there is a table background (the scroll), which should move when the user scrolls through the menu. As different browsers behave differently here as well, it is mandatory that the table background remains and has exactly the width of the table. I therefore cannot add an empty column in front with a small width, because this would mess up at some browsers with the table background. However, question: Is there a way to position a table in an absolute way? E.g. starting 200 pixels from the left? This could prove extremely helpful in this respect.

Showing a scrollbar permanently would solve the problem on all browers as well, I assume. But no idea if there is such a way.

**jscheuer1** · 09-25-2005, 09:41 AM

Generally, on pages showing through a frame, it is best to keep to the left (best, if workable) or center. Making your page or its content narrower may help:

HTML Code:

<body style="width:200px;">

The exact number will vary, try the frame's width or a bit less. To get a scrollbar all the time try:

HTML Code:

<body style="height:150%;overflow:auto;">

on the page showing in the iframe and perhaps set the frame's scrolling to auto as well. Play around with it. If you get what you want but cannot get rid of a horizontal bar, limit the page width to less than the frame's width.

You can absolutely position most elements, including a table:

HTML Code:

<table style="position:absolute;left:20px;top:0;">

All of the above styles can and should be applied via a stylesheet. I just made them inline here for demonstration purposes.

**Artimidor** · 09-26-2005, 06:00 PM

Many thanx, jscheuer1

The absolute positioning does the trick as I could test in the meantime - I tried it with the Places menu by simply adding the code without any stylesheet (shield icon on the top right of the menu bar), and it works perfectly. - Well, mostly, that is.

I know that this method now works at:

- Internet Explorer 5/6
- Mozilla Firefox 1.0
- Opera 7.54
- Netscape 7.1

I checked on a very old Netscape version as well (4.5) and here the absolute positioning doesn't work. Also I got a report that the Mac browser iCab now has a problem and moves the table to the left as well, ignoring the absolute positioning.

Well, I guess these browsers/versions can be neglected as long as the most recent versions and the most commonly used ones (I guess I've listed them mainly) have no problem with it.

Or could using a stylesheet have the desired effect? Do you (or anyone else) know how to translate this part into a stylesheet?

HTML Code:

<table style="position:absolute;left:20px;top:0;">

I've used stylesheets for fonts but am unfortunately not very familiar with stylesheets for table positioning.

**jscheuer1** · 09-26-2005, 06:50 PM

There are different ways to do it, stylesheets for tables, depending upon your exact aims. Also, a stylesheet can be external or be on the page, in the head surrounded by style tags. For all tables on all pages with this stylesheet, the simplest declaration is:

Code:

table {
position:absolute;
left:20px;
top:50px;
}

For only one table per page regardless of how many tables are on the page, use:

HTML Code:

<table id="tableId">

in the markup for that one table and:

Code:

#tableId {
position:absolute;
left:20px;
top:50px;
}

in the stylesheet. For several tables on a page but, only those you want affected use:

HTML Code:

<table class="tableClassName">

and:

Code:

.tableClassName {
position:absolute;
left:20px;
top:50px;
}

The red values in the last two examples can be any unique ID or className that you choose. Descriptive (descriptive of the effects and/or content of the element effected) ones are best. There are many other ways still, these are the basic ones.

**Artimidor** · 09-28-2005, 06:23 PM

Wonderful, jscheuer1! Works like a charm, just perfect

You're the man! Many thanx for the great help, that was extremely valuable to me!

Thread: Always show scrollbars with JavaScript?

Thread Tools

Search Thread

Always show scrollbars with JavaScript?

Bookmarks

Bookmarks

Posting Permissions