Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> html/JS div - scroll, problem z uciekającym scrollem i wysokością diva
ruzam
post
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 15.10.2010

Ostrzeżenie: (0%)
-----


Witam wszystkich forumowiczów !

Mam poważny problem z okiełznaniem pewnego zadania. Mianowicie po zmniejszeniu okna przeglądarki internetowej scroll dolnego diva "ucieka po za ekran" a po odświeżeniu strony w tym małym rozmiarze scroll nabiera rozmiarów okna. Drugi zaś problem to ramka na górze (fioletowa), po dodaniu jakiejkolwiek zawartości do niej, ramka wchodzi na tego diva na dole. Czy mógłby mi ktoś przerobić ten kod żeby to działało tak jak ma być ? Proszę bardzo o pomoc.
Podaje kod:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <head>
  3.  
  4. <script language="javascript">
  5. function GetHeight() {
  6. var y = 0;
  7. if (self.innerHeight) {
  8. y = self.innerHeight;
  9. }
  10. else if (document.documentElement && document.documentElement.clientHeight) {
  11. y = document.documentElement.clientHeight;
  12. }
  13. else if (document.body) {
  14. y = document.body.clientHeight;
  15. }
  16. return y;
  17. }
  18.  
  19. function Loaded() {
  20. // alert("loaded");
  21. var oHeaderPanel = document.getElementById("headerPanel");
  22. var oPanel = document.getElementById("bodyPanel");
  23. if (oPanel == null ||
  24. oHeaderPanel == null) {
  25. alert(oPanel == null);
  26. alert(oHeaderPanel == null);
  27. return;
  28. }
  29.  
  30. var iNewHeight = GetHeight() - 200;
  31. oPanel.setAttribute("style", oPanel.getAttribute("style") + "; height:" + iNewHeight + "px;");
  32. }
  33.  
  34. </script>
  35.  
  36. <style type="text/css">
  37. body
  38. {
  39. color: black;
  40. background-color: #FFFFFF;
  41. }
  42. .attachmentList
  43. {
  44. float:left;
  45. list-style-type:none;
  46. padding: 0;
  47. margin: 0;
  48. }
  49. .attachmentListItem
  50. {
  51. float:left;
  52. margin-right:10px;
  53. }
  54.  
  55. .headerTable
  56. {
  57. width: 99%;
  58. border-collapse:collapse;
  59. background-color: #D0D0FF;
  60. position: fixed;
  61. }
  62. td
  63. {
  64. border: solid 1px black;
  65. }
  66. .headerConstFields
  67. {
  68. width: 160px;
  69. }
  70. </style>
  71. </head>
  72. <body onload="Loaded();">
  73. <div id="headerPanel">
  74. <table class="headerTable">
  75. <tr>
  76. <td class="headerConstFields">From:</td>
  77. <td>%from%</td>
  78. </tr>
  79. <tr>
  80. <td class="headerConstFields">To:</td>
  81. <td>%to%</td>
  82. </tr>
  83. <tr>
  84. <td class="headerConstFields">CC:</td>
  85. <td>%cc%</td>
  86. </tr>
  87. <tr>
  88. <td class="headerConstFields">BCC:</td>
  89. <td>%bcc%</td>
  90. </tr>
  91. <tr>
  92. <td class="headerConstFields">Date:</td>
  93. <td>%date%</td>
  94. </tr>
  95. <tr>
  96. <td class="headerConstFields">Title:</td>
  97. <td>%title%</td>
  98. </tr>
  99. <tr>
  100. <td class="headerConstFields">Attachments:</td>
  101. <td>%attachmentList%</td>
  102. </tr>
  103. </table>
  104. </div>
  105.  
  106. <div id="bodyPanel" style="position:fixed;top:220px; width:99%; height:80%; overflow:scroll;">
  107. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  108. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  109. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  110. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  111. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  112. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  113. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  114. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  115. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  116. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  117. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  118. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  119. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  120. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  121. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  122. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  123. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  124. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  125. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  126. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  127. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  128. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  129. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  130. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  131. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  132. <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj</br>
  133. <div>%body%</div>
  134. <br />
  135. <div style="background:#F0F0B0;">%attachments%</div>
  136. </div>
  137. </body>
  138. </html>
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
ruzam
post
Post #2





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 15.10.2010

Ostrzeżenie: (0%)
-----


Nie chcesz nie wierz. Dla Ciebie to pewnie minuta roboty a ja się męcze z tym od 4 dni bo za dużo z tego nie rozumiem... Jak bym tego nie potrzebował to bym nie pisał tego na pięciu forach.. Ważna sprawa więc prosze ludzi o pomoc. Nie chcesz to nie pomagaj !

EDIT:
powiem tak.. zdenerwowałeś mnie tym bo na prawdę nie kłamie ale z drugiej strony muszę Ci podziękować bo w pierwszej części mi pomogłeś - window.onresize = Loaded; (IMG:style_emoticons/default/winksmiley.jpg)
Jeżeli zaś chodzi o drugą część to naprawdę proszę powiedz tylko co mam usunąć żeby ta tabelka nie najeżdżała i żeby jak zmiejsze rozmiar okna przeglądarki minimalnie to żeby na z góry się zmniejszyła, a nie najeżdżała.

Ten post edytował ruzam 15.10.2010, 11:30:23
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.10.2025 - 10:20