Hello guys,
I have an app which has a message that scrolls at the bottom of the page using a meteor-jquery-marquee package. It works beautifully. However, I want to make it possible for the user to change that message using a form and a submit button.
When the user enters the new message, it changes and the marquee works, but it only changes it on the local machine, rather than all devices connected to my localhost.
I have tried putting it in a collection, but for some reason the marquee package does not work with {{#each}} statements, and the animation does not work. The annoying part is that the normal HTML marquee tag works with collections, but it is not smooth (it ticks rather than scrolls), and I intend to run this app on different monitors (different refresh rates).
Is there a way to retrieve a particular variable from a collection, and return it in a helper without having to use {{#each}} statements? That is my plan B.
Thank you so much for the time and effort, truly appreciated.
My code:
I defined the reactive var in my client main.js as
scrollingMessage= new ReactiveVar('Welcome to my app');
My footer html has the marquee code:
<div style="color: white;" class="ui center aligned container">
<div class='marquee'>{{scrollingMessage}}</div>
</div>
footer js:
Template.App_Body.onRendered(function appBodyOnRendered() {
this.autorun(() => {
const value = scrollingMessage.get();
const $marquee = this.$('.marquee');
$marquee.marquee('destroy');
$marquee.html(value);
$('.marquee').marquee({
duration: 8000,
gap: 200,
delayBeforeStart: 0,
direction: 'left',
});
});
});
The page that has the form to adjust change the reactive variable:
html:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Enter new messages</label>
<input type="text" name="newMsg" class="form-control" placeholder="New Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
.js:
'submit form': function(event){
event.preventDefault();
var newMsg = event.target.newMsg.value;
scrollingMessage.set(newMsg);
}
//and just a helper that returns the reac var
scrollingMessage() {
return scrollingMessage.get();
}