Animating live changes in meteor issue - javascript

I am trying to animate each time the post.text is updated in meteor using Percolate:Momentum (I have tried other plugins but those didn't work either). The post.text updates fine, but it does not animate - not sure what I am doing wrong :S
JS
Template.textDisplay.helpers({
post: function () {
return MongoDatabase.findOne({}, { sort: { date: -1} });
}
});
MongoDatabase.insert({
text: message,
date: new Date()
});
HTML
<template name="textDisplay">
{{#momentum plugin='right-to-left'}}
{{post.text}}
{{/momentum}}
</template>

#Peter looking at the code it seems like Percolate:Momentum support just multiple elements a collection.find() cursor with at least 2 elements works fine. I made a simple jQuery use of fadeIn() to show you how you can actually use any jQuery to animate it
http://meteorpad.com/pad/32rHhkm6NmdxSsTt4/Copy%20of%20Test
you can try open a github issue for Percolate:Momentum maybe they have a work around or find a different library? But if it's just a single element it's actually easy to use jQuery for this. But there probably should be different animation package that works with just one element. Hopefully this is helpful.

Related

jQuery clone and append function isn't working as expected in AngularJS directive

in my app I'm trying I'm building a shopping cart. You can see the app in this codepen: http://codepen.io/summerfreeze/pen/VjqJYW. It's almost working, but I'm struggling with the last part. I want the "ADD ORDER LINE" button to add another order lines under the existing one. I'm trying to do this using jQuery:
myApp.directive('myDirective', function($scope) {
$scope.addline = function() {
$(".orderline").clone().appendTo('.main');
};
return addline();
});
But this doesn't seem to work. I would be grateful if someone would look at the code and tell me what mistake did I make.
Not sure why you were using a directive. I removed that from your code and it works. You still have other errors, but I'm guessing you can attend to those.
Here's the link to the modified version
new codepen version
$scope.addline = function(){
$(".orderline").clone().appendTo('.main');
};
As the others suggested, in order to follow clean code standards, please refrain from using jQuery code in AngularJS, in time it will lead to problems.
From what I can tell, you shouldn't be appending to #main, but to #main div[0]

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

Combining jQuery libraries: realistic-typewriter.js and waypoint.js

I am currently designing a website for a university project based around the open source project. My website is based around an infinite scroll layout, the idea is for each section to have a terminal that looks like the command line and to have the text print to these screens.
I have implemented realistic-typewriter.js (https://github.com/fardjad/realistic-typewriter.js) for the self-typing text. To have the animations triggered at pre-defined moments (when the user is at that section of the page) I have been told to use waypoint.js (https://github.com/imakewebthings/jquery-waypoints)
Now my problem is implementing the 2 together.
Typewriter.js is implemented something like this.
var typewriter = require('typewriter');
var twSpan = document.getElementById('typewriter');
var tw = typewriter(targetDomElement).withAccuracy(90)
.withMinimumSpeed(5)
.withMaximumSpeed(10)
.build();
tw.clear()
.type('TEXT GOES IN HERE')
});
What I don't understand here is the syntax of the variables at the start, it seems a bit convulted to my amateur eye.
The tw.clear() line - I assume the tw is the variable and the .clear does what?
Now the waypoint library - I was previously using this fine with the typed.js library, but its functionality was a bit limited and I was advised to move over to realistic-typewriter.js, the code doesn't seem to work in the same way with realistic-typewriter.js.
Here is the example code for waypoint.js from its documentation.
$('.thing').waypoint(function() {
// i tried to put the above code in here but it doesn't seem to work
); offset: '50%'
});
Basically I need to know how to combine waypoint.js and realistic-typewriter.js, but any explanations of the working processes of these would also be really helpful.
tw is an object that is accessing the "clear" method, which I am guessing clears out the element so it can type in it.
Also, looks like your waypoints code something is off. Should be something like:
$('.thing').waypoint(function() {
//code goes here
}, { offset: '50%' });
If you place the realistic-typewriter code there it should run it once you've reached that element.

Is it possible to create element on the fly with jQuery Mobile?

I have an app built using jQuery (and using various jQuery-UI tools).
For some reason, i have to port it to smartphones/tablet computer, and decided to use jQuery Mobile for that (in order to minimize the number of changes).
In my vanilla app, I created some elements of the page on the fly, depending of user interactions.
For example a slider could be created like that (p is an object with a bunch of params):
function createSlider(p){
return $("<div/>",{
"id":p.id,
"class":p.divClass,
}).slider({
"orientation": p.align,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
"animate":"normal"
/*and some event handling here, but it doesn't matter*/
});
}
And it will produce a nice looking slider. Now it looks like:
function createSlider(p){
return $("<range/>",{
"id":p.id,
"class":p.divClass,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
});
}
But as it's created on the fly, all the stuff done by jQuery Mobile on the page load isn't done on it.
Is there a way to force that initialization without writing the slider in the html?
Thanks.
EDIT: I found in the doc that it could be achieved using container.trigger("create");
However this does not work yet.
EDIT2: Ok create was the solution.
According to the documentation (see edit in the question), using trigger("create") on the containing element works.
And to make that work, you also need to remember that range is an input type and not a tag...
Working solution:
function createSlider(){
return $("<input/>",{
"type":"range",
"id":"sl",
"min":0,
"max":15,
"step":1,
"value":1,
});
}
function appendSlider(){
$("#yourdiv").append(createSlider()).trigger("create");
}
As a sidenote, the documentation for jQuery mobile lacks a search option.
Try calling .page() on the container the content is being added to. Alternatively, adding .page() to the content you're returning may also work.

Nesting resizable elements

I am using jQuery UI's resizable for nested divs, like so:
<div id="resizable1">
<div id="resizable2">
</div>
</div>
I'm running into a problem where disabling resizable 1 also disables resizable 2. So, if I call the following...
$("#resizable1").resizable("disable");
...then I can no longer resize resizable2 either.
Has anyone else encountered this, and know of a way around this behaviour?
Thanks,
Travis
I was having trouble using nested resizables as well.. after setting up the second (nested) I lost the ability to resize the top level one.
To work around this I initialize, and destroy the nested one upon hover over/out:
$(".the-nested-elements").each(function() {
$(this).hover(function() {
$(this).resizable();
},function() {
$(this).resizable("destroy");
});
});
It's not the most elegant solution, but it works.
A little late, as I'm sure you've moved on, but I ran into the same issue. This is related to a known issue: http://bugs.jqueryui.com/ticket/5973
According to rdworth, you can do a workaround for this:
$("#resizable1").resizable("disable")
.removeClass("ui-state-disabled ui-resizable-disabled")
.children(".ui-resizable-handle").hide();
You can check out the original post at: http://forum.jquery.com/topic/trouble-with-nested-resizables, or check out the fiddle at: http://jsfiddle.net/rdworth/vaD8v/

Categories

Resources