I'm trying to display the browser window width onResize(). I've read lots of posts about it but it still isn't working. The JavaScript never runs (The alert never shows up).
This method of using onResize="dispScreenWidth()" works fine in a Bootstrap site. I know that the get_template_directory_uri() path is correct. I just installed jQuery updater but that was no help.
functions.php
<?php
function flashdatadesign_twentytwelve_credits() {
echo 'Website by <a href="http://example.com" title="example">';
}
add_action( 'twentytwelve_credits', 'mysite_twentytwelve_credits');
wp_enqueue_script( 'bcscript', get_template_directory_uri().'/js/bcscript.js', array ( 'jquery' ), NULL, true );
?>
header.php
<body <?php body_class(); ?> onResize="dispScreenWidth()">
<div id="page" class="hfeed site">
<p id="diag"></p> // --- this is just to display window.innerWidth
<header id="masthead" class="site-header" role="banner">
<hgroup>
...........
</body>
bcscript.js
jQuery(document).ready(function(){
function dispScreenWidth() {
jQuery('#diag').css('display', 'inline');
jQuery('#diag').html('');
jQuery('#diag').append(window.innerWidth + ', ');
alert('display');
}
});
Your function is out of scope.
You're declaring the dispScreenWidth() function inside another function so when you call it with onResize, that function is unavailable.
Try removing it from the jQuery(document).ready scope and putting it in the main scope.
Something like this:
jQuery(document).ready(function(){
//do other stuff
});
function dispScreenWidth() {
jQuery('#diag').css('display', 'inline');
jQuery('#diag').html('');
jQuery('#diag').append(window.innerWidth + ', ');
alert('display');
}
Also, you can use jQuery's equivalent to onResize instead of putting it in the body tag.
Like this:
jQuery(document).ready(function(){
//do other stuff
});
jQuery(window).on('resize', function(){
dispScreenWidth();
});
function dispScreenWidth() {
jQuery('#diag').css('display', 'inline');
jQuery('#diag').html('');
jQuery('#diag').append(window.innerWidth + ', ');
alert('display');
}