We Keep Coding

Magnific Popup install/initialization

I'm very new to all this and having trouble installing it to my my backend code. Where does it go? Below my footer with all my JS?
Like, what does it mean by:
Popup initialization code should be executed after document ready?
Could someone please let me know if this is correct:
$(document).ready(function() {
$('.image-link').magnificPopup({
type:'image'
});
});
I've put this inside a script tag.
Which lies underneath my closing footer but just doesn't seem to work.

yes, put all necessary css and js files first. js files can be included in header or footer. It doesn't matter (footer is preferred location for loading js nowadays). However, don't call the magnificPopup() function before loading necessary js files. After all are loaded you can use your code in docready like you mentioned.
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="FOLDER_WHERE_YOU_KEPT_THIS_JS_FILE/jquery.magnific-popup.js"></script>
<script>
$(document).ready(function() {
$('.image-link').magnificPopup({
type:'image'
});
});
</script>
This should work if there no other js conflict and you created the html correctly like mentioned in the doc. Let me know if there is more confusion or if still you could not make it work...

Wordpress inline JS - cant get working

I'm trying to implement a simple play button for youtube video on a WordPress page.
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
jQuery('#play-video').on('click', function(ev) {
jQuery("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
Original code pen I found: here
It works fine on Codepen and js fiddle but has no effect on the WP page.
Am I missing something fundamental?
Any help is greatly appreciated

Almost guaranteed you are not loading jQuery in this project, and your code that you are adding relies on jQuery.
In your functions.php file (in your theme folder), add the below code (be sure it is between php open / close tags, not before / after them. php open tag look like <?php and closing tag ?>):
add_action('wp_enqueue_scripts', 'enqueue_my_jquery');
function enqueue_my_jquery() {
wp_enqueue_script('jquery');
}
You may find other resources that show you how to add jQuery directly to the header.php file - do not do that. it can (and will) cause a variety of problems.

<script type="text/javascript">
document.body.addEventListener('load', function() {
//jQuery should almost definitely be accessible in this scope
var $ = jQuery;
$('#play-video').on('click', function(ev) {
$('#video')[0].src += "&autoplay=1";
ev.preventDefault();
});
});
</script>
This is what I would consider a hacky way of adding javascript to Wordpress.
I would recommend always having your scripts in separate files and utilizing Wordpress's PHP function wp_enqueue_script in order to ensure script dependency order.

I found this at: https://codex.wordpress.org/Using_Javascript
Under the JavaScript in Posts section:
To include Javascript inside a post, you need to combine the call to
the script file with the call to the JavaScript itself.
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
I needed to put the script into a .js file and call for that file as well as the script itself.
Thanks so much for the help!

Uncaught TypeError: undefined is not a function while using jQuery UI

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?

jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">

This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.

use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})

For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.

Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>

You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.

The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.

And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.

I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").

$('body').layout is not a function

I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.

You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
 or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>

Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.

Twitter's Bootstrap Popover: Won't work, even when other JS is working ok

I want to set up a popover using Twitter's Bootstrap.
I've successfully used other JavaScript (dropdown, and tooltips), but I can't get this one working.
I've got this html inside my page:
hover for popover
I've set inside the document body this:
<script>
$(function() {
$('#matriz').popover({placement: 'bottom', trigger: 'hover', offset: 1});
});
</script>
I've called the files like this, using hotlinks:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-tooltip.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-dropdown.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-popover.js"></script>
<script src="https://github.com/twitter/bootstrap/raw/master/js/bootstrap-twipsy.js"></script>

BTW, it's redundant to use bootstrap-tooltips.js and bootstrap-twipsy.js. Tooltips replaced Twipsy.

Yes - if you load the CSS from elsewhere, everything works: http://jsfiddle.net/dirkk0/5DGef/

The important piece you're missing is the main CSS file, bootstrap.css.
Demo: http://jsfiddle.net/Sn2Zz/
( I wasn't sure where to hotlink, so I pasted the content of bootstrap.css.)
Particularly, you need the .popover-* styles.
Chances are it was "working", but you weren't able to see it because the popup's position in the DOM is right before the closing </body> tag.