JS,pozycjonowanie div względem rozdzielczości ekranu. Opcje

[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?

Ten post edytował Niktoś 11.03.2012, 19:02:53

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

Ten post edytował Niktoś 11.03.2012, 19:39:12

[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

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 
<script type="text/javascript" language="javascript">
 
       function pageLoad() { // -wykonanie skrypyu po załadowaniu strony
           // call the savePanelPosition when the panel is moved
           $find('DragP1').add_move(savePanelPosition); //-ustawienie pozycji dla elementu drop-down po przesuwanięciu diva z funkcji  savePanelPosition;
           var elem = $get("<%=HiddenField1.ClientID%>");
           if (elem.value != "0") {
               var temp = new Array();
               temp = elem.value.split(';');
               // set the position of the panel manually with the retrieve value
               $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;
 
           }
       }
 
// kluczowa funkcja odpowiedzialna za pobranie i ustawienie pozycji diva i "elementu" drop down ściśle sprzężonego z nim
       function savePanelPosition() {
           var elem = $find('DragP1').get_element(); //-pobieranie właściwości elementu odpowiedzialnego za drop-down
           var loc = $common.getLocation(elem); //-pobranie aktualnej pozycji  elementu;
           var elem1 = $get("<%=HiddenField1.ClientID%>");
           // zapis pozycji do hidden fielda
           elem1.value = loc.x + ';' + loc.y;
       }
 
</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.

Ten post edytował Niktoś 12.03.2012, 21:30:48

[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 
function pageLoad() {
           // call the savePanelPosition when the panel is moved
           $find('DragP1').add_move(savePanelPosition);
           var elem = $get("<%=HiddenField1.ClientID%>");
           if (elem.value != "0") {
               var temp = new Array();
               temp = elem.value.split(';');
               // set the position of the panel manually with the retrieve value
               $jq("#BoxKosz").css('top', (parseInt(temp[1]) - parseInt($jq(window).scrollTop())) + "px");
               $jq("#BoxKosz").css('left', (parseInt(temp[0]) - parseInt($jq(window).scrollLeft())) + "px");
 
           }
       }
 
       function savePanelPosition() {
           var elem = $find('DragP1').get_element();
           var loc = $common.getLocation(elem);
           var elem1 = $get("<%=HiddenField1.ClientID%>");
           // store the value in the hidden field
           elem1.value = ((parseInt(loc.x) - parseInt($jq(window).scrollLeft())) + ';' + (parseInt(loc.y) - parseInt($jq(window).scrollTop())));
 
       }
 
</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

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ę

Pozdrawiam