Develop Reference

Animating live changes in meteor issue

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.

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)

jQuery hover only works one time

I am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.
I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?
$(document).ready(function(){
$('#novelDescrip').hide();
$('#barDescrip').hide();
$('.novel').hover(function(){
$('#novelDescrip').fadeIn('slow', 1);
},
function(){$('#novelDescrip').hide();}
);
$('#barminder').hover(function(){
$('#barDescrip').fadeIn('slow', 1);
},
function(){$('#barDescrip').hide();
});
});

This should explain the use of toggle as well as the link Jorge posted.
How do I check if an element is hidden in jQuery?
Here are a few methods to get you started with the jQuery toggle function:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
The slide and fade are used to give the toggle a slide or fade out effect.
You can also use the following attributes for different things:
$('element:hidden')
$('element:visible')
Or you can do the same with is:
$(element).is(":hidden")
$(element).is(":visible")
Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.
Hope that helps.

Replacing paragraph tag contents with a random word from javascript

When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.

The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").

The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.

Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});

Jquery make div always scroll to bottom

I have a div that contains a table. This table is dynamically updated, and is filling up with data as user is using our website.
Is it possible to force this div to always be scrolled to bottom? So that the user will always be able to see the bottom most table row that was added.
Thank you!

That would be something like
...onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};
Note, if the rows are added very often, you would want to use setTimeout with blocking variable check at the beginning to prevent scrolling down more often than twice per second or so. This technique is discussed e.g. here
UPDATE
Starting with jQuery 1.6 it is better to use .prop() instead of .attr() (see comments to this question):
onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};

Set the update element as position absolute and bottom:0
DEMO http://jsfiddle.net/Mdzmx/

Try something like it :
Create a anchor like <a id='bottomDiv'></a> and insert a javascript like this document.getElementById('bottomOfDiv').scrollIntoView(true);
I made a example here
http://jsfiddle.net/PTmpL/1/

Follow this tutorial
http://jqueryfordesigners.com/fixed-floating-elements/
but use the bottom css property to have the bottom most element, visible on the page
element{
bottom:0;
}

I'd recommend using the ScrollTo JQuery plugin. Just use
element.scrollTo('max', {axis: 'y'});
or
element.scrollTo('max', duration, {axis: 'y'});
This plugin has the added benifit of having a nice smooth scroll.

I think this could be the easy solution !!!
element.scrollTo(element.get(0).scrollHeight);