Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][CSS]dopasowanie diva do rozmiarów okna przeglądarki
Forum PHP.pl > Forum > Przedszkole
gitbejbe
Witam.

Mam mały problem. http://jsfiddle.net/YF3PD/

Chodzi mianowicie o to, że w główny kontener "template-wrapper" musi posiadać position:fixed. W tym kontenerze "menu-container" ma spełniać role menu strony, a "module-container" ma być oknem z treścią.

Position fixed dla głównego diva wynika z faktu, iż chce się pozbyć scrolla w przeglądarce. Teraz aby umieścić menu obok contentu muszę dla contenta wyliczyć jego szerokość, bo width:100% chowa content pod menu. Ma ktoś jakiś pomysł ? jestem laikiem w js....
Gość
poradziłem sobie z takim oto skryptem:
  1. function skaluj() { ///////////////////////////////////////////////////// Skalowanie contentu względem menu
  2.  
  3. var menu_container = document.getElementById("menu-container"); //długość contentu
  4. var margines = 5; //margines dla contentu
  5.  
  6. if (parseInt(navigator.appVersion)>3)
  7. {
  8. if (navigator.appName=="Netscape")
  9. {
  10. winW = window.innerWidth;
  11. winH = window.innerHeight;
  12. }
  13. if (navigator.appName.indexOf("Microsoft")!=-1)
  14. {
  15. winW = document.body.offsetWidth+"px";
  16. // winH = document.body.offsetHeight;
  17. }
  18. }
  19. oblicz = document.getElementById('module-container');
  20. //nazwa_zmiennej.style.height=winH+"px";
  21. oblicz.style.width=winW-menu_container.offsetWidth-margines+"px";
  22.  
  23. };


i wszystko działa, ale gdy powiększam lub pomniejszam okno przeglądarki to szerokość diva się nie dopasowuje... jak zrobić aby za każdym powiększeniem lub pomniejszeniem okna w przeglądarce wykonywał sie ten skrypt ?
Gość
problem rozwiązany.

  1. $(function(){
  2. setPos();
  3. });
  4.  
  5. function setPos() {
  6. var menu_container = document.getElementById("menu-container"); //długość contentu
  7. var margines = 5; //margines dla contentu
  8.  
  9. if (parseInt(navigator.appVersion)>3)
  10. {
  11. if (navigator.appName=="Netscape")
  12. {
  13. winW = window.innerWidth;
  14. winH = window.innerHeight;
  15. }
  16. if (navigator.appName.indexOf("Microsoft")!=-1)
  17. {
  18. winW = document.body.offsetWidth+"px";
  19. // winH = document.body.offsetHeight;
  20. }
  21. }
  22. oblicz = document.getElementById('module-container');
  23. //nazwa_zmiennej.style.height=winH+"px";
  24. oblicz.style.width=winW-menu_container.offsetWidth-margines+"px";
  25. }
  26. $(window).resize(function() {
  27. setPos();
  28. });
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.