Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Effect.Pulsate nie działa z jQuery - dlaczego?
Forum PHP.pl > Forum > Przedszkole
casperii
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. };
viking
A te elementy to XML że stosujesz main-message-<?=$ERROR_TYPE ?> ? Raczej ci chodzi o id albo klasę.
casperii
<?=$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.
viking
Id wygenerujesz w kodzie main-message-bad a odnosisz się do elementu XML main-message-bad a nie elementu o id #main-message-bad
casperii
@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() { }
trueblue
Pomieszałeś Prototype z jQuery. Moduł Effect pochodzi ze script.aculo.us opartego na Prototype.
casperii
@trueblue czyli żeby działało jQuery z prototype trzeba zastosować:

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


dobry kierunek obieram ?
trueblue
Tak, tylko wtedy wszędzie dla jQuery używasz $j, a nie $.

Albo tak: http://stackoverflow.com/a/14552072/5889778
casperii
@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.
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.