Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JS,pozycjonowanie div względem rozdzielczości ekranu.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Niktoś
Witam ,aktualnie mam skrypt który pozycjonuje diva względem położenia.Działa to dobrze dla elementów z pozycjonowaniem absolute.Potrzebuje przerobić skrypt,aby działało to na diva z position fixed.
Pomyślałem ,aby obliczać top i left względem rozdzielczości ekranu.Jak to zrobić?Od aktualnego położenia diva przkładowo:
(x-800px;y-400px) odjąć wymiary rozdzielczości ekranu(x-800;y-600);Czy w ten sposób wyjdzie mi pozycja Top i left uzależniona od rozdzielczości?
kamil4u
Mógłbyś opisać dokładnie. Nie za bardzo mogę sobie to wyobrazić.. najlepiej jak przygotujesz jakiś prosty obrazek, żeby to zwizualizować.
Niktoś
Pracuje nad funkcjonalnością drop-down diva.Co jedynie muszę zrobić to zapamiętać koordynaty diva,aby tag ten nie wracał na pierwotne pozycje, tylko pozostał tam gdzie użytkownik przesunął tego diva ,działa u mnie gdy div jest z pozycjonowaniem absolute,z fixed już są problemy.Jak dam na fixed-a strona ma większe rozmiary od rozdzielczości ekranu(pojawiaja się suwaki),to jeśli użytkownik przesunie element za bardzo w lewo ,to po requeście on znika bo przesunął on poza rozmiar okna monitora,div ten będzie niewidoczny.
Jak działa dla absolute:
1.Użytkownik przesuwa diva z pozycji (x-200,y-400) do pozycji (x-600 y-1000).
2.Robi request-koordynaty końcowe czyli(x-600 ,y-1000) zapisane są do hiddenfielda
3.Następuje odczyt tych koordynatów z hiddenfielda w js i ustawienie elementu div tam gdzie użytkownik wcześniej przesunął.
Działa to dobrze.

W fixed to nie działa bo koordynaty 600;1000 wychodzą poza rozmiar rozdzielczości która jest przykładowo 800;600 i div jest nie widoczny.
kamil4u
Jeżeli dobrze rozumiem to chodzi Ci o to, że jak masz paski przesuwania i np. pasek ten jest na środku to po zapisie pozycji fixed div jest poza oknem, bo dołączana jest aktualna pozycja + to o ile jest obniżony pasek.

Jeżeli tak to wystarczy odjąć tylko od tego co masz scrollTop/scrollLeft

Innym rozwiązaniem znacznie lepszym jest wykorzystanie clientX/clientY zamiast e.layerX( e.offsetX )/e.layerY( e.offsetY ) . Domyślam się, że te drugie funkcje wykorzystujesz teraz - inne są funkcje dla IE i normalnych przeglądarek stąd nawiasy.

Jeżeli nadal będziesz miał problemy zapodaj jakimś banalnym demem - będzie mi łatwiej Ci pomóc smile.gif

Pozdrawiam
Niktoś
Może zarzucę kodem i opisze go gdyż kod dotyczy elementu z MS Ajax Framework i niektóre funkcje mogą być dla niektórych niezrozumiałe:
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript" language="javascript">
  2.  
  3. function pageLoad() { // -wykonanie skrypyu po załadowaniu strony
  4. // call the savePanelPosition when the panel is moved
  5. $find('DragP1').add_move(savePanelPosition); //-ustawienie pozycji dla elementu drop-down po przesuwanięciu diva z funkcji savePanelPosition;
  6. var elem = $get("<%=HiddenField1.ClientID%>");
  7. if (elem.value != "0") {
  8. var temp = new Array();
  9. temp = elem.value.split(';');
  10. // set the position of the panel manually with the retrieve value
  11. $jq("#BoxKosz").css('top', temp[1]+"px"); //ustawienie pozycji top po przesunięciu
  12. $jq("#BoxKosz").css('left', temp[0] + "px"); //ustawienie pozycji left po przesunięciu;
  13.  
  14. }
  15. }
  16.  
  17. // kluczowa funkcja odpowiedzialna za pobranie i ustawienie pozycji diva i "elementu" drop down ściśle sprzężonego z nim
  18. function savePanelPosition() {
  19. var elem = $find('DragP1').get_element(); //-pobieranie właściwości elementu odpowiedzialnego za drop-down
  20. var loc = $common.getLocation(elem); //-pobranie aktualnej pozycji elementu;
  21. var elem1 = $get("<%=HiddenField1.ClientID%>");
  22. // zapis pozycji do hidden fielda
  23. elem1.value = loc.x + ';' + loc.y;
  24. }
  25.  
  26. </script>
[JAVASCRIPT] pobierz, plaintext

Element drop down którego używam ,jest przystosowany dla elementów z position absolute,nie wiem jak przerobić ten skrypt ,aby wyliczał pozycję względem rozdzielczości dla position fixed.Nie mogę użyć dla tego elementu drop down e.offsetX ,bo takiej metody nie ma ,muszę to jakoś wyliczyć i ustawić pozycję dla elementu drop-down jak i diva.
kamil4u
Kod
$jq("#BoxKosz").css('top', temp[1]+"px"); //ustawienie pozycji top po przesunięciu
$jq("#BoxKosz").css('left', temp[0] + "px"); //ustawienie pozycji left po przesunięciu;


Odejmij od tych wartości scrollTop/scrollLeft. Możliwe, że biblioteka sama to udostępnia, jednak poniższe powinno działać:
Kod
$jq("#BoxKosz").css('top', (temp[1]-document.body.scrollTop)+"px"); //ustawienie pozycji top po przesunięciu
$jq("#BoxKosz").css('left', (temp[0]-document.body.scrollLeft) + "px"); //ustawienie pozycji left po przesunięciu;


Jeżeli nie zadziała to przygotuj demo, żebym sam mógł zobaczyć w czym problem.
Niktoś
Dzięki ,pomysł z odejmowaniem pozycji scrolli był dobry.Teraz mam position fixed zamieniany z position absolute:
Kod wygląda tak:
[JAVASCRIPT] pobierz, plaintext
  1. function pageLoad() {
  2. // call the savePanelPosition when the panel is moved
  3. $find('DragP1').add_move(savePanelPosition);
  4. var elem = $get("<%=HiddenField1.ClientID%>");
  5. if (elem.value != "0") {
  6. var temp = new Array();
  7. temp = elem.value.split(';');
  8. // set the position of the panel manually with the retrieve value
  9. $jq("#BoxKosz").css('top', (parseInt(temp[1]) - parseInt($jq(window).scrollTop())) + "px");
  10. $jq("#BoxKosz").css('left', (parseInt(temp[0]) - parseInt($jq(window).scrollLeft())) + "px");
  11.  
  12. }
  13. }
  14.  
  15. function savePanelPosition() {
  16. var elem = $find('DragP1').get_element();
  17. var loc = $common.getLocation(elem);
  18. var elem1 = $get("<%=HiddenField1.ClientID%>");
  19. // store the value in the hidden field
  20. elem1.value = ((parseInt(loc.x) - parseInt($jq(window).scrollLeft())) + ';' + (parseInt(loc.y) - parseInt($jq(window).scrollTop())));
  21.  
  22. }
  23.  
  24. </script>
[JAVASCRIPT] pobierz, plaintext


PS.Nie wiem czemu ale ,w js document.body.scrollTop zwracał w alercie 0 mimo przesunięcia scrolla.Tym wyżej sposobem działa.
kamil4u
Czyli uznaję, że działa smile.gif

To jest ten gorszy sposób, bo wykonujesz w sumie zbędną operację odejmowania. Powinieneś to zrobić tak jak to opisałem wcześniej. Jakbyś poszukał to prawdopodobnie biblioteka udostępnia odpowiedni dostęp do clientX/clientY ,bo inaczej biblioteka jest kiepska. Przerobiłbyś skrypt D&D i by było znacznie lepiej. Jeżeli jednak to ma tylko działać to jest ok, zależy czy Ci się chce i czy czujesz taką potrzebę smile.gif

Pozdrawiam
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.