Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jquery] pasek miniatur - float a przesuwanie diva
Max Damage
post 24.11.2009, 12:44:12
Post #1





Grupa: Zarejestrowani
Postów: 246
Pomógł: 19
Dołączył: 14.06.2007

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

Cześć, próbuje napisać sobie pasek miniaturek. Póki co zrobiłem przesuwanie się wewnętrznego diva, działa. Problem w tym że muszę ten pasek mieć w innym divie (#zaw). Ma on ustawione float:right i przez to wariuje mi to przesuwanie. Mam nadzieje że ktoś mi powie dlaczego tak się dzieje i jak to poprawić.
[JAVASCRIPT] pobierz, plaintext 
  1. <style type="text/css">
  2. #opakowanie {
  3. 	overflow:hidden;
  4. 	width:998px;
  5. 	border:1px solid rgb(0,0,0);
  6. }
  7. #zaw {
  8. 	float:right;
  9. 	width:824px;
  10. 	border:1px solid rgb(0,0,0);
  11. }
  12. #op {
  13. 	border:2px solid rgb(255,0,0);
  14. 	height:158px;
  15. 	width:500px;	
  16. 	left:100px;
  17. }
  18. #zawartosc {
  19. 	border:2px solid rgb(0,255,0);
  20. 	height:154px;
  21. 	width:500px;
  22. 	left:100px;
  23. }
  24. #wew {
  25. 	position:relative;
  26. 	border:2px solid rgb(0,0,255);
  27. 	height:150px;
  28. 	width:780px;
  29. 	left:0px;
  30. }
  31. </style>
  32. <script language="javascript" src="jquery.js"></script>
  33. <script language="javascript">
  34. var rozmiar=150;
  35. $(document).ready(function(){
  36. 	$("#wew").width(1200);
  37.   $("#go").click(function(){
  38.  			if($("#zawartosc").offset().left+$("#zawartosc").width() >= $("#wew").offset().left+$("#wew").width()-rozmiar) {
  39. 				rozmiar=($("#zawartosc").offset().left+$("#zawartosc").width()) - ($("#wew").offset().left+$("#wew").width());
  40. 				rozmiar= - rozmiar+12;
  41. 			}			
  42.       	$("#wew").stop().animate( { left:$("#wew").offset().left-rozmiar+"px"}, 1000 );
  43. 				rozmiar=150;
  44. 	});
  45.  
  46.  
  47. 	$("#go2").click(function(){
  48. 			if($("#zawartosc").offset().left <= $("#wew").offset().left+rozmiar) {
  49. 				rozmiar=$("#wew").offset().left - $("#zawartosc").offset().left;
  50. 				rozmiar= -rozmiar-8;
  51. 			}		
  52.       $("#wew").stop().animate( { left:$("#wew").offset().left+rozmiar+"px"}, 1000 );
  53. 			rozmiar=150;
  54. 	});		
  55. });
  56. </script>
  57. </head>
  58. <body>
  59. <div id="opakowanie">
  60. 	<div id="zaw">
  61. 		<div id="op">
  62. 			<div id="strzalka1">
  63.  
  64.  			</div>
  65. 			<div id="zawartosc">
  66. 				<div id="wew">
  67. 					<img src="DB9+0.jpg" />
  68.      	 		<img src="DB9+1.jpg" />
  69.       		<img src="DB9+2.jpg" />
  70.       		<img src="DB9+3.jpg" />
  71.       		<img src="DB9+4.jpg" />
  72.       		<img src="DB9+5.jpg" />
  73.       		<img src="DB9+6.jpg" />
  74.  				</div>
  75. 			</div>
  76.   		<div id="strzalka2">
  77.  
  78.  			</div>
  79. 		</div>
  80. 	</div>
  81. </div>
  82. <br />
  83. <input type="button" id="go"  value="przesun w lewo" />
  84. <input type="button" id="go2" value="przesun w prawo" />
[JAVASCRIPT] pobierz, plaintext

EDIT: W końcu udało mi się poprawić skrypt. Trzeba było odjąć jeszcze sumę diva #zaw oraz body w animate. W sumie wyszedł mi chyba mocno zakręcony skrypt, ale póki co mi wystarczy : )

Ten post edytował Max Damage 24.11.2009, 21:03:07


--------------------
"Wszyscy wiedzą, że czegoś nie da się zrobić, i przychodzi taki jeden, który nie wie, że się nie da, i on właśnie to robi." - Albert Einstein
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: Przełącz na: Standardowy · 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: 24.07.2025 - 20:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn