|
|
 |
 |
 |
 |
Javascript / Client Side Development
|
 |
 |
 |
 |
|
|
|
|
no scrollbars in div (firefox)
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>
*bump*
still looking for a nifty solution..
On May 16, 2:08 pm, juergen.rie@gmail.com wrote:
> 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>
On May 16, 2:08 pm, juergen wrote:
> following code does not render scrollbars in firefox 1.5.x. Bug? > Workaround other than to innerHTML an absolute positioned element > after loading? <juergen.rie @gmail.com> wrote:: *bump*
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 <div> object 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.
On May 23, 6:38 pm, "Jim Carlock" <anonym@127.0.0.1> wrote:
> then not use function as a function name
He wasn't. He was using an anonymous function.
> onload = callMe();
Bad code, naughty code !
> function callMe() { document.getElementById('test').style.left = "115px"; }
Non-defensive code just waiting to cause a JS error when 'test'
doesn't exist.
On May 16, 2:08 pm, juergen.rie@gmail.com wrote:
> 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;
}
On May 24, 10:57 am, dd <dd4@gmail.com> wrote:
> 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;
- 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).
|
|
|
|
|
|
Add to del.icio.us |
Digg this |
Stumble it |
Powered by Megasolutions Inc