We Keep Coding

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!

Addthis is Undefined when I use addthis, When I load page by Ajax

I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>

I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.

The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support

Certain js File Not Working in Drupal

I'm trying to render one div before another.
I've tested the js on my local machine to make sure it works by creating a simple page. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="QWERTY">
<div class="content">
<div class="field-name-field-image-one">IMAGE</div>
<div class="body">BODY</div>
</div>
</div>
<script>$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples</script>
</body>
</html>
I've added the following code to a js file on my Drupal site:
(function ($, Drupal, window, document, undefined) {
$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples
})(jQuery, Drupal, this, this.document);
My .info file links to the js and it is loading. Other elements that require javascript are working too. I've even tried adding the script in the html.tpl file, but that did not work either.
The divs I am trying to affect are nested deep within the html markup, and have several classes applied to them, compared to the simple version I have made. Could that be the reason? Am I not being specific enough?

Thanks to some help, I've updated it to the following, and it works:
(function ($, Drupal, window, document, undefined) {
$(function() {
$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples
});
})(jQuery, Drupal, this, this.document);

You don't need to use Javascript to change the order of fields in a content type.
If you're using Drupal 7, go to Home » Administration » Structure (/admin/structure/types) and click "manage display" next to the content type you want to change. You can now drag and drop the fields to change their display order for each view mode (e.g., Default, Teaser).
If you really want to use Javascript to do this, Drupal 7 uses a special syntax.
(function ($) {
Drupal.behaviors.custom_moveimage = {
attach: function (context, settings) {
$('.content .body').insertBefore('.content .field-name-field-image-one');
}
};
}(jQuery));
The Drupal documentation has more information about this.

Javascript: load AddThis upon clicking

I have been puzzling with this for quite a while and can't get it to work. Here is the situation. I want a SOCIAL MEDIA bar to ONLY appear if people click some DIV. It should not be loaded unless people click the div. For Social Media I have ADD THIS, and the GOOGLE+1 icon. But I can not get them to load by such an external call. Here is the code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html');
$.getScript('js-part.js');
});
});
</script>
</head>
<body>
<div id="socialmedia">
Show the Social Media
</div>
<div id="loadhere">
</div>
</body>
</html>
In the HTML part I have the HTML info that needs to be loaded:
html-part.html:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->
<g:plusone size="medium" id="gg"></g:plusone>
</div>
For the JS part I am struggling. Here is what needs to be loaded:
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
I have tried to call them one by one:
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google.com/js/plusone.js');
But I guess this is a crossdomain problem...?
If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?

The problem here is that addthis code fires on dom ready event. When you load it with jQuery the dom has already been loaded so the code is not executed. The fix is to use addthis.init() method to force the code execution after you load the code. There is no cross domain problem or anything.
Note that according to addthis documentation it should be possible by just passing a get variable through the widget url like this http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 but it didn't work for me.
I would also recommend you store the html in a string variable, that way you don't have to do unnecesary requests for a little static html.
See working demo here: http://jsfiddle.net/z7zrK/3/
$("#socialmedia").click(function(){
var add_this_html =
'<div class="addthis_toolbox addthis_default_style ">'+
'<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
'<a class="addthis_button_tweet"></a>'+
'<a class="addthis_counter addthis_pill_style">'+
'</a>'+
'</div>'+
'<g:plusone size="medium" id="gg"></g:plusone>';
$("#loadhere").html(add_this_html);
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
function(){
addthis.init(); //callback function for script loading
});
$.getScript('https://apis.google.com/js/plusone.js');
});

Just used amosrivera's answer (huge kiss to you btw :) and ran into another issue :
Addthis object can only be loaded once, so when you have multiple addthis toolboxes on the same page it may only work for the first clicked toolbox.
The workaround is to do :
if (window.addthis){ window.addthis = null; }
before calling
addthis.init();
Here's what I've just done to start loading the buttons only when an article is hovered long enough :
HTML:
<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
.....
<div class="sharing">
<div class="spinner"></div>
<div class="content"></div>
</div>
</article>
JS :
// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
var t;
$("article").hover(function() {
var that = this;
window.clearTimeout(t);
t = window.setTimeout(function () {
sharing_div = $('.sharing', that);
add_this_html =
'<div class="addthis_toolbox addthis_default_style "> \
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \
</div>';
if (sharing_div.find('.content div').length == 0) {
sharing_div.find('.spinner').show();
sharing_div.find('.content').html(add_this_html);
sharing_div.find('addthis_toolbox').attr({
'addthis:url': $(that).attr('data-url'),
'addthis:title': $(that).attr('data-title'),
'addthis:description': $(that).attr('data-description'),
})
if (window.addthis){ window.addthis = null; } // Forces addthis to reload
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
function(){
addthis.init();
setTimeout(function() {
sharing_div.find('.spinner').hide();
sharing_div.find('.content').show();
}, 2500);
});
}
}, 800);
});
});

To answer your official question, yes, I believe this is possible to achieve.
But, to further elaborate on this, I believe what you may want to try working with is the order in which your external scripts and external markup are loaded. An interesting situation we find when dealing with asynchronous actions such as these, is that they don't always complete, load, or execute in the order you would like unless you specifically say so. jQuery lets you do this through some callbacks you can pass to the getScript and load methods.
There also should not be a "cross-domain" problem with javascript files on other domains, though there certainly is when loading HTML.
I'm not sure if this will exactly solve the problem you're having, but it certainly feels like this is worth a try. You could try making sure the markup loads before the scripts do:
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html', function() {
// this waits until the "html-part.html" has finished loading...
$.getScript('js-part.js');
});
});
});
Now, we should also ask about how you are building your "js-part.js" file. (You only showed what you wanted, not what you've built.) If this is truly a JS file, you can't just use some HTML <script> tags to load other JS files. (You would instead want to continue calling getScript in this file, or use one of several other approaches to get your other JS stuff loaded, such as manually appending script elements to the document's head, or using another library, etc...)
Good luck!

How to get a javascript overlay to load on startup

I want to have a javascript overlay box load on startup inviting users to participate in a feedback survey. How can I do this. I do not want a separate window.

Christopher,
It sounds like you want a non-intrusive "pop-up" dialog, but for it just to overlay the main page and not show up in a separate browser window. "jQuery UI" has lots of built-in goodies like this. A simple example of the code may look like this:
<script src="jquery.js" />
<script src="jquery-ui.js" />
<script type="text/javascript">
$(window).load(function () {
$("#overlay_box").dialog();
});
</script>
...
<div id="overlay_box">
<!-- your HTML content here -->
</div>
For a live demo of the code above, as well as more details, visit:
http://jqueryui.com/demos/dialog/
Hope that helps.
-tjw

You would want to use a div that you can show when the form is finished loading or some other event occurs. Here are a couple examples sample1, sample2

You could add function to window.onload thats shows you overlay when the page is loaded
also are you using any framework alot of them have functionality like that.