Develop Reference

Js and wordpress help...where does it go?

So ive been putting off using js for a while because everytime I try to figure it out I get more confused, but now I really need it for a site im working on...
I want to hide the page until everything loads (so you don't see elements moving/jumping into place.
I've found various bits on here and around the web, but everytime I go to place the code anywhere that I feel it should go, I get errors.
take this for example:
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Ive tried going to the functions.php file and adding the js code i've found on the web but always get an error. So where do I copy the code for this, so it affects the CSS ive added?

In wordpress, you need to use a plugin to help you insert your javascript/jquery
Login to wordpress
Go to plugins>>add new
Search for Insert Headers and Footers plugin
Install and activate
Then launch the plugin and insert your javascript.
You will need to select the location of your javascript, either in the tag or just before the closing

When you add javascript to a wordpress website, you want to do it in one of two ways. You can either do it using a hook which is essentially a 'spot' in the code you wish to add to.
This can be done by placing the following in your functions.php
add_action('wp_head', 'wp_54885300_add_js_to_header');
function wp_54885300_add_js_to_header(){ ?>
<script>
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
</script>
<?php
}
Alternatively, if you find yourself needing to place lots of javascript into your website, you may wish to link to an external javascript file. This can be done with wp_enqueue_script().
Place the following in your functions.php file to enqueue an external stylesheet to your website.
add_action( 'wp_enqueue_scripts', 'wp_54885300_enqueue_script' );
function wp_54885300_enqueue_script(){
wp_enqueue_script('anyname', 'path-to-file.js', array(''), 'version', false );
}
As others have pointed out, what you are trying to do by hiding everything until the window has completely loaded may not be a good idea for a number or reasons.
But, atleast to the best of my knowledge, this ^^ is the proper way to include JS into a wordpress installation without depending on a plugin to get you started.

Need Help in Integrating Javascript with Wordpress

I have wordpress account for blogging. Recently I have opted for PopUpAds. I have the javascript code with me which I received from PopUpAds.
Can any one please tell me how to integrate this code into wordpress??
Any informative links will also be very helpful.
Thank You In advance.

It might be the safest ( but not the best ) way to install the plugin which allows you to add inline javascript code.
I.e. something like this - https://wordpress.org/plugins/tc-custom-javascript/
Also, if you can edit functions.php file within your active theme, the quickest way is to add a patch of code there:
<?php //add opening php tag only if there is closing tag at the end of functions.php file
function pop_up_ads_script() {
?>
<script type="text/javascript">
//your script from PopUpAds goes here
//check if PopUpAds code includes also script tags, then avoid adding duplicate tags
</script>
<?php
}
add_action( 'wp_footer', 'pop_up_ads_script' );
For this approach, be careful when editing and saving functions.php, since you might cause error due to bad syntax or typo, so first check if php tags. I
would suggest to do this via FTP access, rather than through built-in WordPress file editor.

Using a Wordpress plugin that lets you insert arbitrary HTML code as a shortcode is the best way to go IMO. That way the external code doesn't mess with the wysiwyg editor. I use this plugin: https://en-ca.wordpress.org/plugins/insert-html-snippet/
If the JavaScript code should be added to the head section of your page, there are plugins that do that as well.
Check out this useful blog post for adding external JS and CSS to Wordpress: http://blog.dynamicdrive.com/add-custom-javascript-css-wordpress/

Move jQuery to footer in WordPress? (through scripts.php & functions.pphp)

I'm trying to move jquery to my wordpress footer-page (to optimize pagespeed and keep google happy), but can't quite figure out how to do it.
It looks like jquery.js + 3 other js.files are located in scripts.php (through "wp_enqueue_script"), which in turn is referenced in functions.php.
I'm somewhat comfortable editing wordpress php & css files, but do not know how to write php actually and feel I need a little help so I won't break my site.
How and where do I move javascript so it's loaded last?

wp_enqueue_script can place a script in the footer. You will need to "deregister" it and then re-register and enqueue:
add_action("wp_enqueue_scripts", function()
{
wp_deregister_script('jquery');
wp_register_script('jquery', "path_to_jquery", false, 'whatever', true);
wp_enqueue_script("jquery");
});
The last argument passed as true places the script in the footer. The code above should be placed in functions.php.

Thanks for your help! Although I did try the code, in the end I found a wordpress plugin that seems to do the trick called "scripts-to-footer" - works like a charm so far.

BabylonJS Execute Script from External File

I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!

2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David

Twitter-Bootstrap-3 on Wordpress Jquery not loading

I am trying to hook up my custom theme created on Bootstrap 3 and installed onto the latest version of WordPress -working fine but there's an issue with it not being able to hook up to the Jquery library or my JS files.
I have usually been able to achieve this by doing:
<script src = "<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>
But it is just failing on me altogether.
So I have WordPress on the root of the Dir with my files sitting in the theme folder as expected. Short of ideas now :/
Side note: I have tried placing these into both header and footer files and also injecting the JavaScript straight into the HTML but nothing...

The recommended way to include both, jQuery and bootstrap.js would be a function in your functions.php.
function load_styles_and_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-scripts', get_template_directory_uri().'/js/bootstrap.min.js');
}
and then calling it at the end of the file
add_action('wp_enqueue_scripts', 'load_styles_and_scripts');
this way, you load the jQuery file which already comes with wordpress. As the call to enqueuing bootstrap.js comes after jQuery, this should work. You can also add dependecies in the add_action-call. This allows you to make sure, that dependencies are loaded in the right order.
For further information, have a look at http://codex.wordpress.org/Function_Reference/wp_enqueue_script