Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS][JavaScript]Odczytanie pozycji div'a
patryk20120
post
Post #1





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
wookieb
post
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
offsetTop, offsetLeft, clientTop, clientLeft.
Niestety nie pamiętam czy te 2 ostatnie są napewno OK.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #3





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

Dzięki, tylko mam pytanie, jak taką zmienną z JS zapisać PHP :/ questionmark.gif
Go to the top of the page
+Quote Post
wookieb
post
Post #4





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Wysłac ajaxem albo Zapisac do ciasteczka a potem w php sobie odczytac
[HTML] pobierz, plaintext 
  1. document.cookie+='pozycjax=100';
[HTML] pobierz, plaintext


Ten post edytował wookieb 19.06.2009, 20:52:27


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
Wicepsik
post
Post #5





Grupa: Zarejestrowani
Postów: 1 575
Pomógł: 299
Dołączył: 26.03.2009

Ostrzeżenie: (20%)
X----

http://www.google.pl/search?q=zmienne+z+JS...lient=firefox-a


--------------------
Manual .:. Google
Go to the top of the page
+Quote Post
patryk20120
post
Post #6





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
wookieb
post
Post #7





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
jak bardzo rozne liczby? i pokaz kod.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #8





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

np. 0(wg CSS) i 220(wg JS) ale jak jest 1(CSS) to jest 321(JS)
Kod:
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext

No i później z from php (z value) pobieram te liczby i zapisuje do pliku...

Ten post edytował patryk20120 21.06.2009, 21:29:52
Go to the top of the page
+Quote Post
wookieb
post
Post #9





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
A pokaż jeszcze dokładny html i css. a najlepiej wystaw to publicznie to odrazu dostaniesz odpowiedz bez zbednych nakierowań.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #10





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

OK, więc to mam w <head> na ustawianie div'a z danych w pliku:
[PHP] pobierz, plaintext 
  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.   ?>
[PHP] pobierz, plaintext

To jest <form>:
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext

No i kodzik na dodawanie:
[PHP] pobierz, plaintext 
  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. ?>
[PHP] pobierz, plaintext

No i funkcja JS na pobieranie pozycji:
[HTML] pobierz, plaintext 
  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. }
  15. </script>
[HTML] pobierz, plaintext

Może ktoś mi pomoże tongue.gif Błagam sad.gif

Ten post edytował patryk20120 21.06.2009, 21:46:33
Go to the top of the page
+Quote Post
wookieb
post
Post #11





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Wystaw publicznie.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #12





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

Czyli plik cały questionmark.gif
Go to the top of the page
+Quote Post
wookieb
post
Post #13





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Czyli tak abyśmy zobaczyli wynik działania tego skryptu.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #14





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

Proszę: http://patryksite.boo.pl/pse/index.php
Go to the top of the page
+Quote Post
wookieb
post
Post #15





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Jak mu dajesz position: relative to nie dziw ze wyniki nie zgadzaja sie tak dokładnie. Daj position: absolute i powinno byc ok.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #16





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

Niestety dalej to samo sad.gif
Go to the top of the page
+Quote Post
wookieb
post
Post #17





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Pozycja w pionie (top) sie zgadzala.
Nie zgadzala sie tylko pozycja w poziomie (left) ktora naprawisz przez usuniecie marginesow dla tego elementu
[HTML] pobierz, plaintext 
  1. margin: 0;
[HTML] pobierz, plaintext


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.

Ten post edytował wookieb 22.06.2009, 07:23:15


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
patryk20120
post
Post #18





Grupa: Zarejestrowani
Postów: 256
Pomógł: 1
Dołączył: 20.04.2008

Ostrzeżenie: (0%)
-----

Wielkie dzięki ;-)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 11:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn