0

I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).

How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with

Meteor.call('insertDoc', function(err,result) {
    // do something with result
});

I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with

{{#each docs}}
  <li class="{{isActive}}">{{name}}</li>
{{/each}}

and have a helper to return active if this._id equals the reactive var with the last inserted id.

But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.

mortensen
  • 1,167
  • 2
  • 13
  • 23
  • For highlighting and fade out: http://stackoverflow.com/questions/12814612/css3-transition-to-highlight-new-elements-created-in-jquery – fuzzybabybunny Jul 20 '15 at 23:02

2 Answers2

0

I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:

https://github.com/mizzao/meteor-animated-each

There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.

This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.

Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.

Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
0

I don't know if your method is the best, but that's how I'd go about doing it. As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)

CyberClaw
  • 435
  • 3
  • 13