Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] dynamiczna pozycja diva
Forum PHP.pl > Forum > Po stronie przeglądarki
zibra
Witam!

Potrzebuję stworzyć skrypt, który dynamicznie ustawi diva nad stroną w zależności od scrollowania i szerokości / wysokości okna przeglądarki.
W jaki sposób do tego podejść, tak aby stworzyć dwie funkcje obliczające odległość od górnego marginesu przeglądarki i od lewego marginesu, a następnie wartości przez nie obliczane dynamicznie podstawiane były do position: absolute; left: ... ; top: ...
lord_t
O właściwościach obiektu window:)
Styl można ustalić np. przez:

document.getElementById('twoje_id').style='.........';
zibra
Dzięki, ale dalej sobie nie radzę... spłodziłem coś takiego:

<script type="text/javascript">
function getScrollHeight()
{
var h = window.pageYOffset ||
document.body.scrollTop ||
document.documentElement.scrollTop;

return h ? h : 0;
}
document.getElementById('pokaz').style.position='absolute';
document.getElementById('pokaz').style.top=getScrollHeight() + 100;
</script>

ale nie działa i zachiwuje się tak jakby jednorazowo została ustawiona wartość, a jak odświeżać ją wraz ze scrollowaniem?
Mam jeszcze jedno pytanie. Czy tego typu rozwiązania w javie są obsługiwane przez wszystkie przeglądarki?

Z góry dzięki
lord_t
1. Masz już prawie 30 postów i nie wiesz, żeby kod wklejać w bbcode:>?
2. Tu masz zdarzenia do jakich możesz przypisać swoje polecenia(bo w tej chwili są wykonane tylko raz na początku): http://republika.onet.pl/13965,15341,1,06,kursy.html#15341
2a. W frameworku jquery masz coś co Ci się może przydać: zdarzenie onresize
2b. Bez powyższego to możesz zastosować funkcję setTimeout, z czasem(interwałem) np.200 która będzie sprawdzać czy rozmiar okna się zmienił.
3. Kodu głębiej nie analizowałem ale ostatnia linijka powinna wyglądać tak:
Kod
document.getElementById('pokaz').style.top=(getScrollHeight() + 100)+'px';

4.Te dwie linijki zmieniające położenie to proponuje wpisać w funkcję (ta może Ci się też przydać jeśli będziesz chciał skorzystać z tego co pisałem w 2a i 2b)
zibra
Dzięki wielkie za pomoc lord_t smile.gif udało się osiągnąć oczekiwany efekt. Dla ciekawych: www.herbacin.pl/index1.php?dz=produkty - menu w lewej kolumnie.

Kod dla potomnych, oczywiście w bb code smile.gif:
  1. function getScrollHeight()
  2. {
  3. var h = window.pageYOffset ||
  4. document.body.scrollTop ||
  5. document.documentElement.scrollTop;
  6.  
  7. return h ? h : 0;
  8. }
  9. function pageWidthf(){
  10. var windowWidth;
  11. if (self.innerWidth) {
  12. windowWidth = self.innerWidth;
  13. } else if (document.documentElement && document.documentElement.clientWidth) {
  14. windowWidth = document.documentElement.clientWidth;
  15. } else if (document.body) {
  16. windowWidth = document.body.clientWidth;
  17. }
  18. return windowWidth;
  19. }
  20. function changePosition(){
  21. var roznica;
  22. if(navigator.appName == "Microsoft Internet Explorer"){
  23. roznica = 428;
  24. }else{
  25. roznica = 437;
  26. }
  27. document.getElementById('menudiv').style.position='absolute';
  28. if(getScrollHeight() > 230){
  29. document.getElementById('menudiv').style.top=(getScrollHeight() + 35) + 'px';
  30. }else{
  31. document.getElementById('menudiv').style.top=265 + 'px';
  32. }
  33. document.getElementById('menudiv').style.left=(pageWidthf()/2 - roznica) + 'px';
  34. }
  35. setInterval("changePosition();", 10);
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.