Javascript Girl
  1. Javascript Girl
  3. Pouvez-vous combiner replace_html avec un effet visuel dans Rails RJS?
Intereting Posts
La variable globale JavaScript ne se met pas à jour Comment obtenir le dernier jour du mois précédent dans Javascript ou JQuery Outil de visualisation RegEx Pourquoi la fonction prototype 40x est-elle plus lente que la fonction déclarée par défaut? Comment puis-je remplir une liste déroulante en sélectionnant la valeur à partir d'une autre liste déroulante? Javascript – accès aux variables des membres privés à partir de fonctions définies par un prototype Événements window.scroll déclenchant deux fois LocalStorage renvoie null dans un onglet différent dans chrome Comment puis-je remplacer toutes les occurrences d'un dollar ($) par un trait de soulignement (_) dans javascript? Comment puis-je utiliser jQuery pour désactiver le bouton de soumission d'un formulaire jusqu'à ce que tous les champs requis aient été remplis? Comparez deux tableaux contenant des objets afin de calculer ce qui a changé? JQuery .keyPress () – Comment obtenir la valeur de l'entrée qui a déclenché l'événement? Faire apparaître le conteneur svg l'un en dessous de l'autre sur la mise en boucle du tableau Requête HTTP de javascript utilisant le message brut, y compris les en-têtes Comment savoir si une chaîne particulière possède des caractères unicode (en particulier, les caractères à double octet)

Pouvez-vous combiner replace_html avec un effet visuel dans Rails RJS?

Je développe un site Web avec Ruby on Rails et j'ai un div avec du contenu. Après avoir cliqué sur un lien, je souhaite que ce contenu soit remplacé par d'autres éléments. Cela fonctionne bien avec replace_html et rjs.

Cependant, je préférerais qu'il y ait une légère transition de fondu / apparence (crossfade?) Entre l'ancien et le nouveau contenu. De plus, le div sera redimensionné un peu afin qu'il soit plus frais si cela a eu un effet de croissance / rétrécissement. Je pensais que Scriptaculous devait avoir quelque chose comme ça, mais je ne peux certainement pas le trouver s'ils le font.

En passant, il y a un excellent exemple si vous avez un compte Basecamp: connectez-vous et cliquez sur "Toutes les personnes", puis "Ajouter une nouvelle entreprise" pour voir l'effet en action.

Quelqu'un sait-il comment faire ça? Merci! Brian

Pour fusionner en croix, vous devez absolument positionner votre nouveau contenu et avec les mêmes coordonnées x / y que l'ancien contenu. Voici un exemple testé: 

page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none') page << <<-JS var oldOffset = $('old-content').cumulativeOffset(); $('new-content').setStyle({ position: 'absolute', left: oldOffset.left + 'px', top: oldOffset.top + 'px' }); JS page['old-content'].fade :duration => 3 page['new-content'].appear :duration => 3

Notez le grand bloc dans le milieu, certaines sont plus faciles dans Prototype que dans RJS.

Une stratégie pourrait consister à mettre l'élément dans un div. Wrapping, à faire disparaître le partage div, à remplacer le code HTML dans l'élément, puis à faire disparaître la division wrapper à nouveau.

Je ne suis pas un utilisateur RJS / scriptaculous, alors je ne suis pas sûr de savoir quel est le code, mais je suis plutôt sûr que cette stratégie fonctionnera.

Découpez la 1ère division. Blind dans la 2ème division en même temps. Au fur et à mesure que le 1er disparaît, le 2ème apparaîtra pour élargir ce qui reste du premier.

Eh bien, quelque chose comme ça.

Chargez Firebug et passez le code si vous voulez voir ce qu'ils appellent.

Une façon rapide serait de remplacer et ensuite de pulser le div.