no scrollbars in div (firefox)

#1 May 16th, 2007, 12:15 PM

Hi,

following code does not render scrollbars in firefox 1.5.x. Bug?
Workaround other than to innerHTML an absolute positioned element
after loading?

<html>
<body>
<div style='width:100px;height:100px;position:absolute; border:1px
solid black;overflow:auto'>
<div id='test' style="position:absolute;top:0px;left:30px">X</div>
</div>
<script>
onload = function(){
document.getElementById('test').style.left = "115px"
}
</script>
</body>
</html>

#2 May 23rd, 2007, 09:45 AM

*bump*
still looking for a nifty solution..

On May 16, 2:08 pm, juergen.rie...@gmail.com wrote:

Quote:

Hi,
>
following code does not render scrollbars in firefox 1.5.x. Bug?
Workaround other than to innerHTML an absolute positioned element
after loading?
>
<html>
<body>
<div style='width:100px;height:100px;position:absolute; border:1px
solid black;overflow:auto'>
<div id='test' style="position:absolute;top:0px;left:30px">X</div>
</div>
<script>
onload = function(){
document.getElementById('test').style.left = "115px"}
>
</script>
</body>
</html>

#3 May 23rd, 2007, 04:45 PM

On May 16, 2:08 pm, juergen wrote:

Quote:

following code does not render scrollbars in firefox 1.5.x. Bug?
Workaround other than to innerHTML an absolute positioned element
after loading?

<juergen.riemer@gmail.comwrote:: *bump*
: still looking for a nifty solution..

You might want to identify things like your DOCTYPE, and the type
of script you're trying to run, then not use function as a function name
(I believe it's a reserved word (?))... Anyways, the following works
in Opera, and may work in some Mozilla browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing JavaScript</title>
</head>
<body>
<div style='width:100px;height:100px;position:absolute; border:1px solid black;overflow:auto'>
<div id='test' style="position:absolute;top:0px;left:30px;">X</div>
</div>
<script type="text/javascript">
onload = callMe();
function callMe() { document.getElementById('test').style.left = "115px"; }
</script>
</body></html>

I'm not sure scrollbars are a part of the <divobject models in
js. Perhaps someone else can help.

http://www.w3schools.com/js/js_obj_htmldom.asp

Scroll down to scrollbars and take a look at the browsers
that support scrollbars for Window objects...
http://www.w3schools.com/htmldom/dom_obj_window.asp

--
Jim Carlock
Post replies to the group.

#4 May 24th, 2007, 08:45 AM

On May 23, 6:38 pm, "Jim Carlock" <anonym...@127.0.0.1wrote:

Quote:

then not use function as a function name

He wasn't. He was using an anonymous function.

Quote:

onload = callMe();

Bad code, naughty code !

Quote:

function callMe() { document.getElementById('test').style.left = "115px"; }

Non-defensive code just waiting to cause a JS error when 'test'
doesn't exist.

#5 May 24th, 2007, 09:05 AM

On May 16, 2:08 pm, juergen.rie...@gmail.com wrote:

Quote:

following code does not render scrollbars in firefox 1.5.x. Bug?
Workaround other than to innerHTML an absolute positioned element
after loading?

That's what I do and it's reliably calculated the scrollbar size on
NS6,7,8,FF etc. Try this (which declares a global called
ScrollbarOffset):

window.onload=function(){
var outerdiv=document.createElement("div");
outerdiv.style.position="absolute";
outerdiv.style.top="0px";
outerdiv.style.left="0px";
outerdiv.style.width="50px";
outerdiv.style.height="50px";
outerdiv.style.overflow="hidden";
var innerdiv=document.createElement("div");
innerdiv.style.width="100%";
innerdiv.style.height="60px";
outerdiv.appendChild(innerdiv);
document.body.appendChild(outerdiv);
var noscrolloffset=innerdiv.offsetWidth;
outerdiv.style.overflow="auto";
var withscrolloffset=innerdiv.offsetWidth;
document.body.removeChild(document.body.lastChild) ;
ScrollbarOffset=noscrolloffset-withscrolloffset;
}

#6 May 29th, 2007, 08:05 AM

On May 24, 10:57 am, dd <dd4...@gmail.comwrote:

Quote:

NS6,7,8,FF etc. Try this (which declares a global called
ScrollbarOffset):
>
window.onload=function(){
var outerdiv=document.createElement("div");
outerdiv.style.position="absolute";
outerdiv.style.top="0px";
outerdiv.style.left="0px";
outerdiv.style.width="50px";
outerdiv.style.height="50px";
outerdiv.style.overflow="hidden";
var innerdiv=document.createElement("div");
innerdiv.style.width="100%";
innerdiv.style.height="60px";
outerdiv.appendChild(innerdiv);
document.body.appendChild(outerdiv);
var noscrolloffset=innerdiv.offsetWidth;
outerdiv.style.overflow="auto";
var withscrolloffset=innerdiv.offsetWidth;
document.body.removeChild(document.body.lastChild) ;
ScrollbarOffset=noscrolloffset-withscrolloffset;

FYI to the people who manage the FAQ at jibbering.com, re: item # 4.9
- that example code isn't taking the scrollbars for Gecko browsers
into account. This code above calculates the scrollbar size (which
varies from 15 to 19 pixels).

no scrollbars in div (firefox)

Popular Articles

What is Bytes?