Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] efekty wpadania po odświeżaniu diva
djsalat
post 18.08.2010, 21:11:56
Post #1





Grupa: Zarejestrowani
Postów: 97
Pomógł: 0
Dołączył: 20.01.2010
Skąd: łódzkie

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

witam:)
Chcialem powiedzieć na wstępie ze nie kminię javacripta i chciałbym aby ktoś mnie nakierował delikatnie albo sam powiedział co dopisać i w którym miejscu aby po odświeżeniu poniżej podanego pliku plik sie tak fajnie nakładał z efektem wpadania albo nakładania.

o to pliki


1. który ma tego diva który się odświeża ( "responsecontainer") i chce zeby on własnie po kazdym odświeżeniu się jakoś nakładał albo wpadał czy coś w tym stylu:)

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
  4. <script src="jquery-1.3.2.min.js"></script>
  5.  
  6. <script>
  7.  $(document).ready(function() {
  8.  	 $("#responsecontainer").load("response.php");
  9.    var refreshId = setInterval(function() {
  10.       $("#responsecontainer").load('response.php?randval='+ Math.random());
  11.    }, 9000);
  12. });
  13. </script>
  14. </head>
  15. <body>
  16.  
  17. <div id="responsecontainer">
  18. </div>
  19. </body>
[HTML] pobierz, plaintext


2. ten to już zbedny do podania tu ale pokaże ;p bo tu jest ta treść która ma wpadaćsmile.gif

[HTML] pobierz, plaintext 
  1. <? echo rand(); ?>
[HTML] pobierz, plaintext


3. to oczywiście biblioteka jquery...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
kapuch
post 18.08.2010, 21:19:14
Post #2





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

Musisz to jakos lepiej opisac bo:
Cytat
i chce zeby on własnie po kazdym odświeżeniu się jakoś nakładał albo wpadał czy coś w tym stylu:)

malo kto zrozumie, nawet ja po paru browarach nie jestem w stanie tego rozkminic, a zazwyczaj po browarze rozjasnia mi sie umysl winksmiley.jpg
Daj jakis przyklad - strone, albo opisz dokladniej.


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
djsalat
post 18.08.2010, 21:23:51
Post #3





Grupa: Zarejestrowani
Postów: 97
Pomógł: 0
Dołączył: 20.01.2010
Skąd: łódzkie

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

to jest sobie taki skrypt co odswierza jeden div co jakis czas. No i po każdym odświeżeniu chciałbym aby to co nowe przyjdzie po odświeżeniu wchodziło z efektem np którymś z tych : http://jquery.malsup.com/cycle/
Go to the top of the page
+Quote Post
kapuch
post 18.08.2010, 21:37:37
Post #4





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

No to praktycznie sam sobie udzieliles odpowiedzi, a dokladniej wystarczy ten Twoj skrypt ladowania dac wewnatrz funkcji odpowiedzialnej za ta animacje, w jquery chyba kazda funkcja ma miejsce na kod, ktory ma sie wykonac po skonczeniu animacji i tam wlasnie wstawiasz ten kod do ladowania tresci.
Nie chce mi sie zagladac w kod tej strony wiec posluze sie funkcja animate() dla przykladu:
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function() {
  2.   $('#responsecontainer').animate({ // costamcostam
  3.   }, 5000, function() {
  4.     // A tutaj wklejasz kod odpowiedzialny za ladowanie tresci, ale juz bez $('document)ready....,ktory wykona sie po skonczeniu animacji
  5.     // czyli tak:
  6.     $("#responsecontainer").load("response.php");
  7.     var refreshId = setInterval(function() {
  8.     $("#responsecontainer").load('response.php?randval='+ Math.random()); }, 9000);
  9.   });
  10. });
[JAVASCRIPT] pobierz, plaintext

Jak nie bedzie dzialac to pokombinuj, bo moze czegos zapomnialem wykasowac, lub dodac - poprostu kopiowalem na szybko.
Ale powinno byc ok.

Ten post edytował kapuch 18.08.2010, 21:42:52


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
djsalat
post 19.08.2010, 00:18:39
Post #5





Grupa: Zarejestrowani
Postów: 97
Pomógł: 0
Dołączył: 20.01.2010
Skąd: łódzkie

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

coś nie tak;/ nie ma zmian wogóple tak jak przedtem sie pojawiło tak jest zero animacji:(

najlepszy byłby dla mnie ten drugi efect na tej stronie http://www.givainc.com/labs/marquee_example.htm

tylko jak go połączyć z tym sad.gif
Go to the top of the page
+Quote Post
kapuch
post 20.08.2010, 12:05:28
Post #6





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

Tak jak pisalem, nie wiem czy tamte funkcje maja mozliwosc wykonania kodu, kiedy dana animacja bedzie skonczona, bo na jquery slabo sie znam.
Ale jesli maja to napewno da sie to zrobic.
Ja posluze sie kolejnym przykladem, na funkcjach fadeOut() i fadeIn(), mozliwe ze ten efekt ci wystarczy, a jesli nie, to
chociaz bedziesz wiedzial jak sie to m/w robi:

Plik INDEX HTML/PHP jak wolisz
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Costamcostam</title>
  6. <style type="text/css">
  7. .slideshow{
  8. 	border: 1px solid #000;
  9. 	width: 300px;
  10. 	height: 60px;
  11. 	background: #CC0;
  12. 	font-family: Verdana, Geneva, sans-serif;
  13. 	font-size: 16px;
  14. 	color: #000;
  15. 	text-align: center;
  16. 	vertical-align: middle;
  17. }
  18. </style>
  19. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script type="text/javascript">
  21. function animuj() {
  22.     $('.slideshow').fadeOut('slow', function() {
  23. 		$('.slideshow').load("plik.php?id="+Math.random(), function() {
  24. 			$('.slideshow').fadeIn('slow');
  25. 		});
  26. 	});
  27. // zamiast atrybutu 'slow' w funkcjach fadeOut() i fadeIn(), mozesz wpisac np. 4000 zeby dluzej trwal efekt.
  28. }
  29. </script>
  30. </head>
  31.  
  32. <body onload="setInterval('animuj()', 4000);"> <!-- TU USTAWIASZ ODSTEP CZASOWY -->
  33. <div class="slideshow">
  34. Puste
  35. </div>
  36.  
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


A TUTAJ PRZYKLADOWY PLIK Z TRESCIA (plik.php)
[PHP] pobierz, plaintext 
  1. <?php
  2. echo 'Losowa liczba:<br /><B>'.$_GET['id'].'</B>';
  3. ?>
[PHP] pobierz, plaintext

U mnie to dziala ladnie.

Ten post edytował kapuch 20.08.2010, 12:12:14


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
djsalat
post 20.08.2010, 13:41:52
Post #7





Grupa: Zarejestrowani
Postów: 97
Pomógł: 0
Dołączył: 20.01.2010
Skąd: łódzkie

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

o to mi chodziło:)))

genialny jesteś;p

a są jeszcze jakieś inne efekty zamiast fade in i fade out??


Szczerze mówiąc interesował by mnie cos w podobie co na tej stronie http://www.malsup.com/jquery/cycle/cover2.html
Go to the top of the page
+Quote Post
kapuch
post 20.08.2010, 18:21:52
Post #8





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

Zobacz to:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. h2 { margin: 5px 0px 0px 0px; }
  8. /* ================ PRZYKLAD 1 ================= */
  9. .container1{
  10. 	border: 1px solid #000;
  11. 	width: 300px;
  12. 	height: 60px;
  13. 	background: #FFF;
  14. 	font-family: Verdana, Geneva, sans-serif;
  15. 	font-size: 16px;
  16. 	color: #000;
  17. 	text-align: center;
  18. 	vertical-align: middle;
  19. }
  20. #slideshow1{
  21. 	background: #C9F;
  22. 	height: inherit;
  23. 	width: inherit;
  24. }
  25.  
  26. /* ================= PRZYKLAD 2 ================ */
  27. .container2{
  28. 	position: relative;
  29. 	width: 200px;
  30. 	height: 200px;
  31. 	background: #CCF;
  32. 	border: 1px solid #000;
  33. 	overflow: hidden;
  34. }
  35. #slideshow2{ 
  36. 	background: #666; 
  37. 	position:absolute; 
  38. 	top: 0px; 
  39. 	left: 0px; 
  40. 	width: inherit;
  41. 	height: inherit;
  42. }
  43.  
  44. /* =============== PRZYKLAD 3 ================== */
  45. .container3{
  46. 	position: relative;
  47. 	width: 200px;
  48. 	height: 200px;
  49. 	background: #CCF;
  50. 	border: 1px solid #000;
  51. 	overflow: hidden;
  52. }
  53. #slideshow3{ 
  54. 	background: #666; 
  55. 	position:absolute; 
  56. 	top: 0px; 
  57. 	left: 0px; 
  58. 	width: inherit;
  59. 	height: inherit;
  60. }
  61. </style>
  62. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  63. <script type="text/javascript">
  64. // =============== PRZYKLAD 1 ==================
  65. function animuj1() {
  66.     $('#slideshow1').fadeOut('slow', function() {
  67. 		$('#slideshow1').load("plik.php?id="+Math.random(), function() {
  68. 			$('#slideshow1').fadeIn('slow');
  69. 		});
  70. 	});
  71. }
  72.  
  73. // =============== PRZYKLAD 2 ==================
  74. function animuj2(){
  75.     $('#slideshow2').animate({
  76.     left: '-=200px'
  77.   }, 'slow', function() {
  78.  		$('#slideshow2').load("plik.php?id="+Math.random(), function() {
  79. 			$('#slideshow2').animate({ left: '+=200px' }, 'slow');
  80. 		});
  81.   });
  82. }
  83.  
  84. // =============== PRZYKLAD 3 ==================
  85. function animuj3(){
  86.     $('#slideshow3').slideUp('slow', function() {
  87.  		$('#slideshow3').load("plik.php?id="+Math.random(), function() {
  88. 			$('#slideshow3').slideDown('slow');
  89. 		});
  90.   });
  91. }
  92. </script>
  93.  
  94. </head>
  95.  
  96. <body onload="setInterval('animuj1()', 4000); setInterval('animuj2()', 4000); setInterval('animuj3()', 4000); setInterval('animuj4()', 4000);">
  97. <!--=============== PRZYKLAD 1 ==================-->
  98. <h2>Przykład 1</h2>
  99. <div class="container1">
  100. 	<div id="slideshow1">Puste</div>
  101. </div>
  102.  
  103. <!--=============== PRZYKLAD 2 ==================-->
  104. <h2>Przykład 2</h2>
  105. <div class="container2">
  106. 	<div id="slideshow2">Puste</div>       
  107. </div>
  108.  
  109. <!--=============== PRZYKLAD 3 ==================-->
  110. <h2>Przykład 3</h2>
  111. <div class="container3">
  112. 	<div id="slideshow3">Puste</div>       
  113. </div>
  114.  
  115. </body>
  116. </html>
[HTML] pobierz, plaintext

Tak na szybko zrobione, wybierz sobie.


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
djsalat
post 20.08.2010, 18:23:02
Post #9





Grupa: Zarejestrowani
Postów: 97
Pomógł: 0
Dołączył: 20.01.2010
Skąd: łódzkie

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

chyba już znalazłem swoje rozwiązanie:)


korzystałem z tej stronki moze komus terż się przyda do efektów:) :http://blog.alchemycode.pl/2010/01/15/szyb...cja-elementami/

poprostu zamieniłem twoje fade na slide smile.gif dzięki bardzo za pomoc jeszcze raz:)
Go to the top of the page
+Quote Post
kapuch
post 20.08.2010, 18:33:48
Post #10





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

Cytat(djsalat @ 20.08.2010, 19:23:02 ) *
chyba już znalazłem swoje rozwiązanie:)


korzystałem z tej stronki moze komus terż się przyda do efektów:) :http://blog.alchemycode.pl/2010/01/15/szyb...cja-elementami/

poprostu zamieniłem twoje fade na slide smile.gif dzięki bardzo za pomoc jeszcze raz:)

Spoko, ale wydaje mi sie ze od slide, lepsze jest animate, tak jak dalem w przykladzie 2, bo wyglada to tak, jakbys zmienial kartke, bo litery ida w lewo razem z divem, a przy slide masz efekt, tak jakbys ucinal diva.
Zawsze mozesz przerobic ten moj 2 przyklad z animate, tak aby zamiast w lewo, przesuwal sie do gory, wystarczy zamienic "left: '-=200px'" ma "top: '-=200px'" i "left: '+=200px'" na "top: '+=200px'".
Chyba bedzie lepiej wygladac - ale to kwestia gustu.


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
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: 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: 14.08.2025 - 02:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn