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:

[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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
wookieb
post
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
ruzam
post
Post #3





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

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

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ść.
Go to the top of the page
+Quote Post
wookieb
post
Post #4





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Ta wyjechał. Nie bo Ci nie wierzę po prost. Szukasz leszcza, który odwali za Ciebie robotę a tak to radź sobie sam.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
ruzam
post
Post #5





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; 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
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Temat: JavaScript jesli Twoj watek go dotyczy KONIECZNIE przeczytaj


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
ruzam
post
Post #7





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

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

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ć ?
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 13:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn