Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> jquery scroll position
olek123
post 28.02.2012, 11:46:42
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.02.2012

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

Witam ,

Chciałbym za pomocą jQuery odczytać aktualną (current) pozycję scrolla(suwaka) w divie ...

Potrzebuję to w celu nie zmieniania pozycji po odświeżeniu strony. ...

Wójek google nie pomaga ... ale może to moja słaba znajomość angielskiego ;P




próbowałem w ten sposób :


[HTML] pobierz, plaintext 
  1. var sc = document.getElementById("myDiv").scrollTop;
  2.  
  3. $("div.demo").scrollTop(sc);
[HTML] pobierz, plaintext 




[HTML] pobierz, plaintext 
  1. <div id="myDiv"  class='demo' style="float:left;padding:0;margin:0;width:58.5em;height:15.5em;background-color:transparent;overflow-y: scroll;" onscroll="scollPos();">
  2. </div>
[HTML] pobierz, plaintext





ale mi nie działa sad.gif ... dobrze to przypisuję ?

znalazłem u jednego z forumowiczów coś takiego :


[HTML] pobierz, plaintext 
  1.     $(document).scroll(function() {
  2.  
  3.     var height = $(window).height();
  4.     var myTop = $("#tenElement").offset().top;
  5.     var scrollTop = $(document).scrollTop() + height ;
  6.  
  7.     if (scrollTop > myTop) {
  8.     alert('bum');
  9.     }
  10.  
  11.     })
[HTML] pobierz, plaintext



tylko potrzebuję przerobić to na odczytanie pozycji scrolla z DIVa a nie ze scrolla dokumentu jak powyżej ...



podam może cały kod jak to wygląda obecnie:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <title></title>
  5.  
  6. <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8. </head>
  9. <body>
  10.  
  11.    <div id="myDiv"  class="demo" style="float:left;padding:0;margin:0;width:58.5em;height:15.5em;background-color:transparent;overflow-y: scroll;">
  12.  
  13. 		<br />
  14. 		<a id="pos"  href=''>jakas dana</a>
  15. 		<br />
  16. 		<a id="pos"  href=''>jakas dana</a>
  17. 		<br />
  18. 		<a id="pos"  href=''>jakas dana</a>
  19. 		<br />
  20. 		<a id="pos"  href=''>jakas dana</a>
  21. 		<br />
  22. 		<a id="pos"  href=''>jakas dana</a>
  23. 		<br />
  24. 		<a id="pos"  href=''>jakas dana</a>
  25. 		<br />
  26. 		<a id="pos"  href=''>jakas dana</a>
  27. 		<br />
  28. 		<a id="pos"  href=''>jakas dana</a>
  29. 		<br />
  30. 		<a id="pos"  href=''>jakas dana</a>
  31. 		<br />
  32. 		<a id="pos"  href=''>jakas dana</a>
  33. 		<br />
  34. 		<a id="pos"  href=''>jakas dana</a>
  35. 		<br />
  36. 		<a id="pos"  href=''>jakas dana</a>
  37. 		<br />
  38. 		<a id="pos"  href=''>jakas dana</a>
  39. 		<br />
  40. 		<a id="pos"  href=''>jakas dana</a>
  41. 		<br />
  42. 		<a id="pos"  href=''>jakas dana</a>
  43. 		<br />
  44. 		<a id="pos"  href=''>jakas dana</a>
  45.  
  46.     </div>
  47.  
  48.  
  49.  
  50. 		<script>
  51.  
  52. 		var height = $("div.demo").height();
  53. 		var myTop = $("#a").offset().top;
  54. 		var scrTop = $("div.demo").scrollTop();
  55.  
  56. 		var div = document.getElementById("myDiv").scrollTop;
  57.  
  58.  
  59.  
  60. 		$("div.demo").scrollTop(div);
  61.  
  62. 		</script>
  63.  
  64. </body>
  65. </html>
[HTML] pobierz, plaintext





słuchajcie już jestem bardzo blisko :


mam coś takiego:




[HTML] pobierz, plaintext 
  1. 		function mojafunkcja()
  2. 		{
  3. 			var myTop = $("div.demo").scrollTop();
  4.  
  5. 			return myTop
  6. 		}
  7.  
  8. 		var a;
  9. 		a = mojafunkcja();
  10.  
  11. 		$("div.demo").scrollTop(a);
[HTML] pobierz, plaintext



nie rozumiem dlaczego $("div.demo").scrollTop(a); nie ładuje mi wartości a ? ... jak wpiszę z palca zamiast "a" na przykład "50" to ustawia mi suwak tam gdzie chcę


czemu tak się dzieje questionmark.gif
Go to the top of the page
+Quote Post
nospor
post 28.02.2012, 11:50:37
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Cytat
nie rozumiem dlaczego $("div.demo").scrollTop(a); nie ładuje mi wartości a ? ... jak wpiszę z palca zamiast "a" na przykład "50"
Pobierasz wartość elementu, potem temu elementowi ustawiasz znowu tę samą wartość. No ale nic się nie dzieje.
Ale jak temu elementowi ustawisz inną wartość to on ma wówczas inną wartość.... dziwne... naprawdę dziwne.....

Łapiesz już absurd sytuacji czy jeszcze nie?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
olek123
post 28.02.2012, 22:55:22
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.02.2012

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

ok rozumiem ... faktycznie może być z tym jakiś problem ... przez ten absurd właśnie smile.gif


ale to jak inaczej to pobrać ?


bo jak zrobię tak:

document.write("Hello world! " + a);

to wyświetla mi tą wartość ...


ale ok chyba wiem o co chodzi ...


jest jakiś sposób? jak powienienem to zrobić ?



ok mam teraz coś takiego:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">



function mojafunkcja()
{
var myTop = document.getElementById("myDiv").scrollTop;

return myTop
}





</script>
</head>
<body>



<div id="myDiv" class='demo' style="float:left;padding:0;margin:0;width:58.5em;height:15.5em;background-color:transparent;overflow-y: scroll;" >

<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>
<br />
<a href=''>jakas dana</a>









</div>


<script>

var a;
a = mojafunkcja();

$("div.demo").scrollTop(a);


</script>

</body>
</html>




myślę że teraz jest trochę lepiej ... ale rozumiem że to przypisanie początkowe scrollTop jest niewłaściwe jeśli chcę aby to działało

mam już rozwiązanie mojego problemu ... musiałem to zrobić trochę inaczej:

po prostu w GETcie zapisuję sobie gdzie znajduje się po wybraniu danego rekordu suwak i następnie pod DIVem odczytuję tą wartość i dzięki temu suwak pozostaje dokładnie w tym samym miejscu :

poniżej cały kod:


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title></title>
  5.  
  6.  
  7. 		 <script src="http://code.jquery.com/jquery-latest.js"></script>
  8.  
  9.     <script type="text/javascript">
  10.  
  11.  
  12. 		function mojafunkcja(a,b,c)
  13. 		{
  14.  
  15. 			var myTop = $("div.demo").scrollTop();
  16.  
  17. 			window.location.href="test6.php?c="+a+"&v="+b+"&o=1&k=3&a="+c+"&m="+myTop+"&n=0";
  18.  
  19. 		}
  20.  
  21.  
  22.  
  23.  
  24. 		</script>
  25. </head>
  26. <body>
  27.  
  28.  
  29.  
  30.     <div id="myDiv"  class='demo' style="float:left;padding:0;margin:0;width:58.5em;height:15.5em;background-color:transparent;overflow-y: scroll;" >
  31.  
  32. 				<br />
  33. 				<?php
  34. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  35. 				?>
  36. 				<br />
  37. 				<?php
  38. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  39. 				?>
  40. 				<br />
  41. 				<?php
  42. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  43. 				?>
  44. 				<br />
  45. 				<?php
  46. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  47. 				?>
  48. 				<br />
  49. 				<?php
  50. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  51. 				?>
  52. 				<br />
  53. 				<?php
  54. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  55. 				?>
  56. 				<br />
  57. 				<?php
  58. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  59. 				?>
  60. 				<br />
  61. 				<?php
  62. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  63. 				?>
  64. 				<br />
  65. 				<?php
  66. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  67. 				?>
  68. 				<br />
  69. 				<?php
  70. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  71. 				?>
  72. 				<br />
  73. 				<?php
  74. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  75. 				?>
  76. 				<br />
  77. 				<?php
  78. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  79. 				?>
  80. 				<br />
  81. 				<?php
  82. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  83. 				?>
  84. 				<br />
  85. 				<?php
  86. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  87. 				?>
  88. 				<br />
  89. 				<?php
  90. 				echo "<a class='choo2' href='java script:mojafunkcja(2,3,3)'>rekord ndasid asdas dasd pasokop </a>";
  91. 				?>
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.     </div>
  100.  
  101.  
  102. 		<script>
  103.  
  104. $("div.demo").scrollTop(<?php echo $_GET['m']; ?>);
  105.  
  106.  
  107. 		</script>
  108.  
  109. </body>
  110. </html>
[HTML] pobierz, plaintext







PANIE MODERATOR możesz pan zamknąć temat.

Ten post edytował olek123 28.02.2012, 22:56:15
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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 Wersja Lo-Fi Aktualny czas: 27.05.2025 - 20:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn