Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Effect.Pulsate nie działa z jQuery - dlaczego?
casperii
post
Post #1





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


Panowie chciałem wykonać na stronie komunikat który by wyskakiwał i pulsował.
Niestety jeśli mam wstawione w stronie te 2 biblioteki
-jquery-1.7.1.min.js
- jquery.tools.min.js

to pulsacja nie działa - konsola nie wyświetla żadnych błędów.

Za wyświetlenie diva pulsacyjnego odpowiada poniższy kod:

  1.  
  2. <div id="messages">
  3. <div style="" class="message-<?=$ERROR_TYPE ?>" id="main-message-<?=$ERROR_TYPE ?>">
  4. <a class="dismiss-message" href="#" onclick="Effect.Fade('main-message-<?=$ERROR_TYPE ?>', { duration : 0.5 }); return false;"></a>
  5. <?=$ERROR_MESSAGE ?>
  6. </div>
  7. <script type="text/javascript" language="javascript">
  8. Effect.Pulsate('main-message-<?=$ERROR_TYPE ?>', { pulses : 2, duration : 1, from : 0.7 });
  9. </script>
  10. </div>


Kod JS:

  1. Effect.Pulsate = function(element) {
  2. element = $(element);
  3. var options = arguments[1] || { },
  4. oldOpacity = element.getInlineOpacity(),
  5. transition = options.transition || Effect.Transitions.linear,
  6. reverser = function(pos){
  7. return 1 - transition((-Math.cos((pos*(options.pulses||5)*2)*Math.PI)/2) + .5);
  8. };
  9.  
  10. return new Effect.Opacity(element,
  11. Object.extend(Object.extend({ duration: 2.0, from: 0,
  12. afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
  13. }, options), {transition: reverser}));
  14. };
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 8)
viking
post
Post #2





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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


A te elementy to XML że stosujesz main-message-<?=$ERROR_TYPE ?> ? Raczej ci chodzi o id albo klasę.
Go to the top of the page
+Quote Post
casperii
post
Post #3





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


<?=$ERROR_TYPE ?> zwraca typ komunikatu w zależności od tego co wypluł php.
Jeżeli np. są nie poprawne dane: error_type otrzyma "bad". Czyli nasza klasa będzie miała class="message-bad"
Styl jak i treść błędu wczytuje się jak najbardziej ok. Jedyny błąd to to że nie ma animacji pulsacji, jeżeli powyżej mam jquery.
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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


Id wygenerujesz w kodzie main-message-bad a odnosisz się do elementu XML main-message-bad a nie elementu o id #main-message-bad
Go to the top of the page
+Quote Post
casperii
post
Post #5





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


@viking to wyjaśnij mi proszę dlaczego to działa jeśli usunę z kodu:
-jquery-1.7.1.min.js
- jquery.tools.min.js


poza tym div ma class jak i ID o tej samej nazwie message-bad a odwołanie takie:

  1. Effect.Pulsate('main-message-bad', { pulses : 2, duration : 1, from : 0.7 });


czy takie
  1. Effect.Pulsate('#main-message-bad', { pulses : 2, duration : 1, from : 0.7 });


nie działa więc nie rozumiem. Może to powinno być wstawione w:

  1. $(document).ready(function() { }
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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


Pomieszałeś Prototype z jQuery. Moduł Effect pochodzi ze script.aculo.us opartego na Prototype.
Go to the top of the page
+Quote Post
casperii
post
Post #7





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


@trueblue czyli żeby działało jQuery z prototype trzeba zastosować:

  1. var $j = jQuery.noConflict();


dobry kierunek obieram ?
Go to the top of the page
+Quote Post
trueblue
post
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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


Tak, tylko wtedy wszędzie dla jQuery używasz $j, a nie $.

Albo tak: http://stackoverflow.com/a/14552072/5889778
Go to the top of the page
+Quote Post
casperii
post
Post #9





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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


@trueblue dzięki, tak jak myślałem od samego początku winę ponosiło jQuery który robił konflikt. Zastosowanie jQuery.noConflict(); rozwiązało problem.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 22.08.2025 - 15:27