Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS][JavaScript]Odczytanie pozycji div'a
Forum PHP.pl > Forum > Przedszkole
patryk20120
Witam smile.gif

Zrobiłem na stronie przesuwane div'y za pomocą kursora. Div'y po załadowaniu się strony są ustawiane za pomocą CSS ( np. "left: 200px; top: 200px;"). Chciałbym zrobić takie coś aby zapamiętywało dla danego usera, dane pozycje, lecz utknąłem na tym, jak odczytać pozycję danego div'a, czyli czy można jakoś wyciągnąć jego pomożenie (left i top) questionmark.gif
wookieb
offsetTop, offsetLeft, clientTop, clientLeft.
Niestety nie pamiętam czy te 2 ostatnie są napewno OK.
patryk20120
Dzięki, tylko mam pytanie, jak taką zmienną z JS zapisać PHP :/ questionmark.gif
wookieb
Wysłac ajaxem albo Zapisac do ciasteczka a potem w php sobie odczytac
  1. document.cookie+='pozycjax=100';
patryk20120
Jednak offsetTop i offsetLeft źle określają pozycję :/ Gdy ustawię div w CSS(top i left), dane z offsetTop i offsetLeft wskazują inne liczby :/ questionmark.gif można to jakoś pogodzić questionmark.gif
wookieb
jak bardzo rozne liczby? i pokaz kod.
patryk20120
np. 0(wg CSS) i 220(wg JS) ale jak jest 1(CSS) to jest 321(JS)
Kod:
  1. function cos123321(){
  2. d = document.getElementById("cos3");
  3. topPos = d.offsetTop;
  4. leftPos = d.offsetLeft;
  5. document.getElementById("cos3").innerHTML=topPos+"na"+leftPos;
  6. var notify2 = document.getElementById ('1');
  7. if (notify2)
  8. notify2.value = topPos;
  9. var notify = document.getElementById ('2');
  10. if (notify)
  11. notify.value = leftPos;
  12. setTimeout("cos123321()",1000 );
  13. }

No i później z from php (z value) pobieram te liczby i zapisuje do pliku...
wookieb
A pokaż jeszcze dokładny html i css. a najlepiej wystaw to publicznie to odrazu dostaniesz odpowiedz bez zbednych nakierowań.
patryk20120
OK, więc to mam w <head> na ustawianie div'a z danych w pliku:
  1. <?
  2.    $records = file($plik, FILE_IGNORE_NEW_LINES);  
  3. foreach($records as $key => $row){  
  4.    ++$line;
  5.    list($tmp['id'], $tmp['left'], $tmp['top']) = explode('|', rtrim($row));  
  6.        $tmp['line'] = $line-1;
  7.        $records[$key] = $tmp;    
  8. }  
  9.  foreach($records as $row){
  10.  
  11. echo sprintf('<style type="text/css">
  12. #%s {
  13. width: 200px;
  14.    height: 140px;
  15.    left: %spx;
  16.    top: %spx;
  17.    }
  18.    </style>',  $row['id'], $row['left'], $row['top']);  
  19.  
  20.  }
  21.  ?>

To jest <form>:
  1. <form action="#" method="post">
  2.  
  3.  
  4. TOP
  5. <input type="text" name="1" id="1" size="30" value="" class="text-input" />
  6. <br>
  7. LEFT:
  8. <input type="text" name="2" id="2" size="30" value="" class="text-input" />
  9. <br />
  10. <input type="submit" onclick='changeTextbox();' name="wyslij" id="wyslij" value="Send" />
  11. </form>

No i kodzik na dodawanie:
  1. <?php
  2. if(isset($_POST['wyslij'])){
  3. $cos = $_POST['1'];
  4. $cos2 = $_POST['2'];
  5.     if (file_exists($plik)){
  6.     unlink($plik);
  7. $file=fopen(''.$ip.'.txt', 'a');
  8.    flock($file, '2');
  9.    fwrite($file, "cos3|$cos|$cos2\n");
  10. flock($file, '3');
  11. fclose($file);
  12. echo 'plik nadpisano! -  Zapisno cos3 '.$cos.' na '.$cos2.'<br>';
  13. $records = file($plik, FILE_IGNORE_NEW_LINES);  
  14. foreach($records as $key => $row){  
  15.    ++$line;
  16.    list($tmp['id'], $tmp['left'], $tmp['top']) = explode('|', rtrim($row));  
  17.        $tmp['line'] = $line-1;
  18.        $records[$key] = $tmp;    
  19. }  
  20.  foreach($records as $row){
  21.  
  22. echo sprintf('ID: %s. Left: %spx. Top: %spx.', $row['id'], $row['left'], $row['top']);  
  23.  
  24.  }
  25. }else{
  26. $file=fopen(''.$ip.'.txt', 'a');
  27.    flock($file, '2');
  28. flock($file, '3');
  29. fclose($file);
  30. echo'plik utworzono<br>';
  31. }
  32. }
  33. ?>

No i funkcja JS na pobieranie pozycji:
  1. <script type="text/javascript">
  2. function cos123321(){
  3. d = document.getElementById("cos3");
  4. topPos = d.offsetTop;
  5. leftPos = d.offsetLeft;
  6. document.getElementById("cos3").innerHTML=topPos+"na"+leftPos;
  7. var notify2 = document.getElementById ('1');
  8. if (notify2)
  9. notify2.value = topPos;
  10. var notify = document.getElementById ('2');
  11. if (notify)
  12. notify.value = leftPos;
  13. setTimeout("cos123321()",1000 );
  14. }

Może ktoś mi pomoże tongue.gif Błagam sad.gif
wookieb
Wystaw publicznie.
patryk20120
Czyli plik cały questionmark.gif
wookieb
Czyli tak abyśmy zobaczyli wynik działania tego skryptu.
patryk20120
Proszę: http://patryksite.boo.pl/pse/index.php
wookieb
Jak mu dajesz position: relative to nie dziw ze wyniki nie zgadzaja sie tak dokładnie. Daj position: absolute i powinno byc ok.
patryk20120
Niestety dalej to samo sad.gif
wookieb
Pozycja w pionie (top) sie zgadzala.
Nie zgadzala sie tylko pozycja w poziomie (left) ktora naprawisz przez usuniecie marginesow dla tego elementu
  1. margin: 0;


I jeszcze mala uwaga. Jak dobrze rozumiem dzialanie twoje skryptu dzieli sie na pare czesci
Kod
// odczytanie wartosci pozycji zapisanych w pliku

// zapisanie nowych wartosci pozycji do pliku

Zamien kolejnosc bo niestety wczytanie swiezo zapisanej piozycji dziala po kolejnym odswiezeniu.
patryk20120
Wielkie dzięki ;-)
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.