We Keep Coding

jsfiddle - Tutorial demo not working

I'm reading the jsfiddle tutorial and copied the demo to jsfiddle:
https://jsfiddle.net/cdt86915998/ps6shugt/. Running this demo in chrome and console gives Uncaught TypeError: undefined is not a function.
I suppose this error is caused by javascript configuration, but I already have jQuery(edge) configured.
This is my code:
$('test').addEvent('click', (function() {
$('test').set('html', 'Goodbye World!')
$('test').fade('out');
}));

Select MooTools not jQuery as your Javascript Frameworks and Extensions.
From your tutorial:
We are using MooTools (jsFiddle’s default library) to do a number of
things

please change addEvent to on function. You clearly don't have the proper knowledge about jQuery functions. Please refer the jquery doc properly
$('#test').on('click', (function() {
$('#test').html('Goodbye World!')
$('#test').fadeOut();
}));

I assumed from the question you were using jQuery - if so, your syntax is wrong.
Other answers have solved your issue using mootools, so you're better off following their advice if that's the library you're trying to use.
With jQuery
To select the div by id you need to add a # to its selector.
Also, some of your jQuery methods were incorrect. Try using this code below:
$('#test').on('click', function() {
$('#test').html('Goodbye World!')
$('#test').fadeOut();
});

Assuming you want to persist in using jQuery, try updating the javascript section as follows:
$('#test').on('click', (function() {
$('#test').html('Goodbye World!');
$('#test').fadeOut(1000);
}));
This corrects the syntax for selecting by id using #id. The error you are seeing is because .set and .fade are not jquery functions.

If you look at the Tutorial it requires 'Mootools' and not 'jquery' which is what you have tried to insert. jQuery doesn't have addEvent. Try with mootools and it will work straight away

Meaning of $get('0')?

I just upgraded to jQuery 1.12 from an older version. I'm going through the code, trying to resolve breaking changes.
One such change is occurring in the following code:
$(document).ready(function() {
Sys.Application.add_unload(applciationUnloadHandler);
function applciationUnloadHandler() {
var contactDropDown = $get('0');
createCookie('NewProgram_ContactID_Cookie', contactDropDown.value, null);
}
});
This code fails because $get('0') returns null.
But I really don't understand what this is supposed to be doing. I don't see $get() defined anywhere. I can see from looking at the code behind that the '0' argument represents a contact ID, but I can't see what the code is supposed to be doing.

$get is a shortcut function for Sys.UI.DomElement.getElementById
The $get method provides a shortcut to the getElementById method of the Sys.UI.DomElement class.
Reference

$get is defined in the ASP.NET AJAX Client Side Library that should be included if you are using a ScriptManager.

Timeglider object always staying empty and undefined

So my example is really basic. Actually not even the basic example from the Timeglider examples is working:
var tg1 = {};
$(function () {
tg1 = $("#placement").timeline({
"icon_folder":"timeglider/icons/",
"data_source":"json/idaho.json"
});
tg_actor = tg1.data("timeline");
tg_actor.zoom(1);
});
It says that tg1.data("timeline")is undefined. Even though there is data in there.
So my issue is that I cannot create an instance of the Timeglider plugin. So I'm not able to use it's functions. Could someone tell me why the data object is always undefined?
Here it is working...
So I found this running example: http://www.avo.alaska.edu/includes/js/timeglider/kitchen_sink.html and here it is working properly. I studied the code and it's nearly the same I have. So what could I have done different?
Working with older jQuery version
http://code.jquery.com/jquery-1.11.2.min.js is working without an error. How can I use the latest jQuery? Even with the migrate plugin I get the same error.

Working with 1.11.2 of jQuery (http://code.jquery.com/jquery-1.11.2.min.js) so it seems like this plugin is just no compatible to the latest version.

Using jQuery with Magento without replacing $ with jQuery?

I've not really found a definitive answer for this question. I've had to edit jQuery plugins to replace instances of $. This, for me at least, is a serious issue. Anyone coming after me, if going to have a nightmare to maintain of upgrade my work. I use a lot of plugins.
Is this really the only option?

If the plugin is poorly written then I guess you could try using the jQuery.noConflict method.
If it's properly written you don't need it because it will already wrap all $ usages in an anonymous method:
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );

As Darin has mentioned, well authored plugins are wrapped in an anonymous method. You can use the same trick in your own code too, rather than use noConflict - for example if you had a JavaScript file with loads of jQuery in it that you didn't want to update:
(function ($) {
$(document).ready( function () {
$('#myid').hide();
});
// and so on...
}(jQuery));

jquery element not defined, but it used to skip it

I recently transferred a site to a new host. Reloaded everything, and the javascript that worked fine before is breaking at an element it can't find. $('#emailForm') is not defined.
Now, the #emailform isn't on the page, but it wasn't before either, and JS used to skip this and it would just work. Not sure why this is happening. Any clues
Here is the site I am having the prblem:
http://rosecomm.com/26/gearwrench/

jQuery will return an empty jQuery object from $('#emailForm') if there isn't an element with the id='emailForm'.
One of the following is likely true:
You forgot to include jQuery - therefore $ is undefined.
There is another library included that uses $ - in which case you can wrap your code in a quick closure to rename jQuery to $
The Closure:
(function($){
// $ is jQuery
$('#emailForm').whatever();
})(jQuery);
You could console.log(window.$,window.jQuery); in firebug to check for both of these problems.

You have mootools-1.2.2-core-yc.js installed as well, and it is conflicting with jQuery.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
$(document).ready(function() {
(function($){
// bind 'myForm' and provide a simple callback function
$('#emailForm').ajaxForm(function() {
var txt=document.getElementById("formReturn")
txt.innerHTML="<p>Thank You</p>";
});
...
$(document).ready is being called against the moo tools library instead of jQuery.

I'm not sure why it would be skipped before, but to avoid the error, wrap the statement(s) that reference $('#emailForm') in an if statement that checks to see if it is present:
if ( $('#emailForm').length ) {
// code to handle $('#emailForm') goes here...
}