JavaScript file isn't executed

  • Resolved hutruk

    (@hutruk)


    11 years, 9 months ago

    Hello there!

    I suppose this is a pretty newbie question, but I just can’t figure it out… I would like to use a script to determine the window width dynamically in my template and load a different css. This is the script I’m using:

    function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1010) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

    The code is in the file resolution-test.js

    I’m using the following code in my header.php:

    <?php
	function my_scripts_method() {
	wp_enqueue_script(
		'resolution-test.js',
		get_template_directory_uri() . '/js/resolution-test.js',
		array( 'jquery' )
	);
	}

	add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
  <link id="size-stylesheet" rel="stylesheet" type="text/css" href="https://***/css/wide.css">

    I do know about the noConflict mode in WordPress, so I tried changing the JavaScript Code in the following way:

    jQuery(document).ready(function(){
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1010) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
});

    It still doesn’t work. What am doing wrong? Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Is it actually being enqueued / do you have a wp_head(); call in there?

    Thread Starter hutruk

    (@hutruk)

    Thank you for the answer!
    You are right, indeed I forgot to include the call. Now that I’ve changed the header.php file my output looks like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testseite</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="***/wp-content/themes/anoton_theme_01/css/wide.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css">
<link rel='stylesheet' id='custom-css-css'  href='***/media/custom-css/custom-css-1372072614.min.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='NextGEN-css'  href='***/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='shutter-css'  href='***/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4' type='text/css' media='screen' />
<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {"msgLoading":"B I T T E \u00a0\u00a0W A R T E N","msgClose":"Klicken zum Schliessen ","imageCount":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='***/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3'></script>
<script type='text/javascript' src='***/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='***/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='***/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<script type='text/javascript' src='***/wp-content/themes/anoton_theme_01/js/resolution-test.js?ver=3.5.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="***/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="***/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='Beitr?ge & News' href='***/beitrage-news/' />
<meta name="generator" content="WordPress 3.5.1" />
<link rel='canonical' href='***/' />
<!-- <meta name="NextGEN" version="1.9.12" /> -->
</head>

    A lot of scripts are now included, also the resolution test, but it is still not working…

    Thread Starter hutruk

    (@hutruk)

    I now tried to include a very simple script to output an alert with “Hello world”, but it also doesn’t work… Scripts do show up in the header, but they are not executed…

    A syntax error elsewhere could be causing problems – perhaps you could share a link?

    Thread Starter hutruk

    (@hutruk)

    Sorry for the late answer…
    I did find a syntax error. My theme was missing the footer hook, but actually it should have not affected the code in the header?…
    Well, in the end I got rid of the javascript and used media queries instead.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘JavaScript file isn't executed’ is closed to new replies.