Develop Reference

Focus not working in angularJS. angular.element(...).focus is not a function?

I have written the following lines to add focus on an input element in angular js:
angular.element(document.getElementById("chatinput")).focus();
but is not working an giving an error:
angular.element(...).focus is not a function

The "jqLite" library that's included with Angular for angular.element() doesn't include the .focus() method.
To make it available, you'll have to load the jQuery library before loading Angular and your application code. Once you've done that, angular.element() will be an alias of jQuery instead of jqLite.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/path/to/angular.js"></script>
Or, the Element returned from getElementById() has its own .focus() method that you can call without using angular.element():
document.getElementById("chatinput").focus();
// though, you may want to check that it's found first
var chatinput = document.getElementById("chatinput");
if (chatinput) chatinput.focus();

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)

nivo-lightbox not launching when image clicked

I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)
I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).
(i've commented out the jquery as this is already loaded for my wordpress theme.
The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?
once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.
Image management: nextgen gallery
image layout: Justified Image Gallery
URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

If you open the console on this page - you'll see that there are two javascript errors.
1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71
I looked into the source code of your page and on line 71 you have this:
$(document).ready(function(){
$('a').nivoLightbox();
});
This means that jQuery is not working. You need to use a no-conflict wrapper.
2.Uncaught TypeError: Object [object Object] has no method 'orbit'
On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured.
To avoid such mistakes you need to check if the block is on the page, possibly like so:
var home_slider = $('#featured');
if( home_slider [0] ) { //if jQuery object is not empty
home_slider.orbit({
//yor params here
})
}
If you get rid of these errors - you'll most likely see the nivo-lightbox :)

Setting Default and Options in Jquery Plugin

I implemented the jquery plugin with default and options. Here is the working sample fiddle Everything seems ok but one question is when i call the function with following arguments is applicable for body tag. But i don't want this body tag appending to execute the function of jquery.
For example.
$(function(){
$("body").gettingmessage({variable1:false})
});
That function is appending with body inorder to execute. This is the only way of doing?
$(function(){
$.fn.gettingmessage({variable1:true})
});
This also working. But I am not sure this is the correct way of calling the function without any tag or id or class
Any suggestion would be great.
Thanks

jQuery UI TypeError: e.widget.extend is not a function

I have updated my jQuery files including jQUery UI to use the tooltip feature.
But now Javascript is dieing with the following error:
TypeError: e.widget.extend is not a function
Can anyone help me?

jQuery Ui was included twice (second time hidden because of another bug)
problem solved

I was getting the similar error for tag-it.min.js
b.widget is not a function tag-it.min.js
When I check, found my files were loading in this case
<script src="/scripts/tag-it.min.js">
<script src="/scripts/jquery-ui-1.11.1.js">
Just reverse the order and it is fixed
Might be it can help someone

I had to add wp_deregister_script( 'jquery-ui-widget' ); to admin-footer.php for an exception for widgets.php file only.