Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery scroll position
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
olek123
28.02.2012, 11:46:42
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





nospor
28.02.2012, 11:50:37
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?
olek123
28.02.2012, 22:55:22
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.
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.