You are not logged in.

[Konqueror] document.body.scrollWidth problems

Dear visitor, welcome to KDE-Forum.org. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

kayahr

Beginner

  • "kayahr" started this thread

Posts: 1

  • Send private message

1

Wednesday, March 28th 2007, 4:55pm

[Konqueror] document.body.scrollWidth problems

Hi,

I have a problem with document.body.scrollWidth in Konqueror. When the size of the content is enlarged with an absolute positioned element then it returns the wrong value (Just the content size of the normally positioned elements). At the bottom of the thread you'll find a short example page. JavaScript should output 8092x8092 because this is the real scroll size. But it only output 4096x4096 which is the size of the normally positioned element.

Is there any workaround? Safari and Opera are doing it correctly. Firefox is totally wrong but there is a workaround (Using clientWidth + scrollMaxX). But for Konqueror I have not found any working solution. By the way: Intersting fact is that IE6 and IE7 has exactly the same problem.

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
      body { margin: 0; padding: 0 }
      #test1 { width: 4096px; height: 4096px; }
      #test2 { width: 8092px; height: 8092px; position: absolute; left: 0; top: 0}
    </style>
    <script type="text/javascript">
      function run()
      {
        alert(document.body.scrollWidth + "x" + document.body.scrollHeight);
      }
    </script>
  </head>
  <body onload="run()">
    <div id="test1"></div>
    <div id="test2"></div>
  </body>
</html>