Wordpress inline JS - cant get working - javascript

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!

Related

Work around annoying code appended to my homepage by free hosting service?

So the bottom part of my homepage source code looks like this (simplified):
</body>
</noscript>
<div>
<script type="text/javascript">
// ads code goes here
</script>
</div>
</html>
Detailed code here
I've tried using jQuery to add a <noscript> tag before the mentioned <div> after the document loads, but it didn't work.
Is there a way I can spare my visitors the trouble of dealing with that popup (other than switching host)?
Yes, insert this before their script runs:
<script>
window.stop();
</script>
This will prevent dom onload handlers from being called, though. Among other things.
The script from popcash.net creates a function called jsPopunder. You could try overwriting it with:
window.jsPopunder = undefined;

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...

js code is not working in an external file, but works file when placed in the same html page

I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></script>

Is there a way to use javascript code without using <script> tag?

So I'm working on my online portfolio using prosite.com and I created some simple hover thingy using javascript (http://wojtek.szukszto.com/index.html). The problem is prosite.com won't allow me to use < script > tag... Is there any way to do it? Maybe as an external html? I don't know... I'm not really good in coding, so any help would be appreciated.
You can have them as DOM Events like
<div onclick="alert('cat');">
I <strong>Really</strong> want a cat!
</div>
<body onload="//you can put a whole bunch of stuff here"></body>
(It is equivalent to window.onload = function(){ //stuff })
You can put your javascript code into external file and call in the head section of your html document
<head>
<script src ="/JS/yourjsfile.js"></script>
</head>
hope that your host allows you to call JS in the head section
The way I do it is by stating the type of script. The ProSite already has javascript integrated within itself. I use:
<script type="javascript"> Code-Goes-Here </script>

Does jQuery have to be written in the <script> tags in HTML?

I'm learning jQuery, and I'm running into a small problem. jQuery code works when I put it directly in my tags in my HTML, but when I import it from a different file, nothing happens. These are my script tags in HTML:
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/test.js"></script> <!--This is my jQuery code-->
test.js contains the following code:
$(document).ready(function(){
console.log("Hello");
});
When the page loads, the console is empty. However, when I paste the following code as so, in my html document, everything works fine.
<script>
$(document).ready(function(){
console.log("Hello");
});
</script>
Do you really have a folder named scripts in the folder where your HTML files exist? Otherwise try changing this src="scripts/jquery-1.10.2.js" to probably this: src="/scripts/jquery-1.10.2.js"
You can check by browsing to http://yoururl/scripts/jquery-1.10.2.js, the Jquery code should show up. If it's not there, you have to make sure that you include the right folder/file.
Yes.You will be able to push your scripts in 2 ways::
1-push your scripts in tag like>>
<script>$(document).ready(function(){alert("Welcome Dear");});</script>
2-push your inline scripts with attributes like>>
<button type='button' onclick="$(this).hide()">Hide Me</button>
make sure that the scripts folder contain test.js make sure that the extension is correct ..sometimes I make the same same mistake, instead of test.js i save it as test.js.txt
Try putting
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
in the body rather than the head.
Credits to this answer for giving the idea

Categories