Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: DIV update effect
Forum PHP.pl > Forum > XML, AJAX > AJAX
prond
Witam, czy ktoś z was może mi pomóc w stworzeniu skryptu, który wymienia zawartość DIVa AJAXem, w taki sposób, aby nie było żadnego "skakania".

Przez skakanie rozumiem przesuwanie treści pod DIVem kiedy nowa zawartość zajmuje mniej, albo więcej miejsca.

Próbowałem wykorzystać scriptaculous :
  1. <script type="text/javascript">
  2. <!--
  3. Effect.Updater = Class.create();
  4. Object.extend(Object.extend(Effect.Updater.prototype,
  5. Effect.Base.prototype), {
  6. initialize: function(element) {
  7. this.element = $(element);
  8. var options = Object.extend({
  9. duration: 0.001,
  10. newContent: ''
  11. }, arguments[1] || {});
  12. this.start(options);
  13. },
  14. loop: function(timePos) {
  15. if(timePos >= this.startOn) {
  16. Element.update(this.element,this.options.newContent);
  17. this.cancel();
  18. return;
  19. }
  20. }
  21. });
  22.  
  23. function updateSolutionsList(intProblemId)
  24. {
  25. new Effect.Fade('solutionsList', {queue : 'end'});
  26. new Effect.Updater('solutionsList', {newContent : $('Ajax-Loader').innerHTML, queue : 'end'});
  27. new Effect.Appear('solutionsList', {queue : 'end'});
  28.  
  29. new Ajax.Request('/Solutions/index/'+intProblemId, {
  30. onComplete: function (response) {
  31. new Effect.Fade('solutionsList', {queue : 'end'});
  32. new Effect.Updater('solutionsList', {newContent : response.responseText, queue : 'end'});
  33. new Effect.Appear('solutionsList', {queue : 'end'});
  34. }
  35. });
  36. }
  37. //-->


Wszystko niby ładnie, ale potrzebuje jeszcze płynnego efektu do zmiany wysokości DIVa.
gebp
Zainteresuj się mintAjax
prond
Wolałbym nie korzystać z kolejnej biblioteki ponieważ używam do budowy aplikacji CakePHP, który ma wbudowane helpery dla prototype.js i scriptaculous.js.

W wielu miejscach korzystam z tych helperów dlatego wolę tworzyć niestandardowe UI w oparciu o prototype.js i scriptaculous.js.
gebp
Zaproponowałem mintAJAX ze wzgledu że jest tam kilka rozwiązań dotyczących ogólnie napisze wyświetlania. Z tego co zauważyłem (niestety nie jestem dobry w js) to głównie jest to robione w Java Script'cie. Myślałem że jak podejrzysz tamtejsze przykłady i samą bibloteke to wyrwiesz to o co Ci chodzi.
ActivePlayer
http://wiki.script.aculo.us/scriptaculous/...tsTreasureChest
Cytat
move AND resize an element

pass me the desired most outer bouding box position and dimensions. calculations includes margin/border/paddings, so when you know you want a div positioned
and sized a specific way, this will position and animate the transition. set duration=0 for no aninmation. note you will need to click ‘edit’ to view the real source! the stupid wiki interpreter is parsing asterisks as bold text dispite being inside a code block!
by jake richardson {jaecob.gmail.com}

Link to Class Source – {jason.at.shaped.ca} hosting this to hopefully save someone from having to sign up at the wiki to view the source properly.

http://www.shaped.ca/Effect.MoveAndResizeTo.js
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.