Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: html/JS div - scroll
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
ruzam
15.10.2010, 08:37:01
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:

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


No a jak myślisz dlaczego nachodzi? Przecież ku jakiemuś celu dodaleś style do scrollowanego div-a. Ostyluj go tak aby jego pozycja nie była sztywna.
ruzam
15.10.2010, 10:53:20
Czy mógłbyś mi napisać gdzie co dopisać i co wykasować ? Bo szczerze to mało się na tym znam... Robiłem to ze znajomym, on wyjechał a ja tego pilnie potrzebuje ;/ Proszę o wyrozumiałość.
wookieb
15.10.2010, 11:08:51
Ta wyjechał. Nie bo Ci nie wierzę po prost. Szukasz leszcza, który odwali za Ciebie robotę a tak to radź sobie sam.
ruzam
15.10.2010, 11:13:12
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; 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.
erix
15.10.2010, 14:16:11
Temat: JavaScript jesli Twoj watek go dotyczy KONIECZNIE przeczytaj
ruzam
18.10.2010, 09:56:54
Cały ten problem już rozwiązałem i dziękuję bardzo za chęci, a teraz pojawił się inny problem - to autodopasowanie do okna przeglądarki działa na każdej z wyjątkiem IE 9 beta. czy to jest jakiś chwilowy błąd z strony IE czy do kodu muszę coś dopisać ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.