Inline Javascript not working

Hello there

I am trying to bring my small javascript inline.

My Hamburger menu works perfectly when called from

<script src="js/main.js"></script>

It generates a pulldown menu when the Hamburger is clicked. However, when I move the contents of main.js inline to my HTML pages between <script></script> tags to replace the code quoted above then it stops working. :open_mouth: Here’s the code in question:

$(document).ready(function(){$('#mobileview').click(function(){var panel=$('#panel');if($(this).hasClass('active')){$(this).removeClass('active');$(panel).slideUp();}else{$(this).addClass('active');$(panel).slideDown();}});});

I suspect I am missing something pretty basic that I need to do! Any guidance/suggestions would be much appreciated.

We need to see the entire page showing all HTML and JavaScript. It could be where you are putting the script tag in relation to other code.

Ah, thanks for the speedy reply! I am on the case and will provide the additional info soon. :sunglasses:

Hello again

Here’s the corresponding stripped-down HTML from my index.html file. You will see that the Javascript comes late in the file, for SEO reasons, just before the </body> tag. There is no further Javascript, other than a file called js/jquery-1.11.2.min.js which I can provide but I believe is just a generic library.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang=en xml:lang=en>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8"/>
<meta http-equiv=Content-Security-Policy content="default-src 'self'; img-src https://*; base-uri 'self'; frame-ancestors 'none';"/>
<meta name=viewport content="width=device-width, initial-scale=1"/>
<link rel=apple-touch-icon-precomposed sizes=57x57 href="https://www.EXAMPLE.com/apple-touch-icon-57x57.png"/>
<link rel=apple-touch-icon-precomposed sizes=114x114 href="https://www.EXAMPLE.com/apple-touch-icon-114x114.png"/>
<link rel=apple-touch-icon-precomposed sizes=72x72 href="https://www.EXAMPLE.com/apple-touch-icon-72x72.png"/>
<link rel=apple-touch-icon-precomposed sizes=144x144 href="https://www.EXAMPLE.com/apple-touch-icon-144x144.png"/>
<link rel=apple-touch-icon-precomposed sizes=60x60 href="https://www.EXAMPLE.com/apple-touch-icon-60x60.png"/>
<link rel=apple-touch-icon-precomposed sizes=120x120 href="https://www.EXAMPLE.com/apple-touch-icon-120x120.png"/>
<link rel=apple-touch-icon-precomposed sizes=76x76 href="https://www.EXAMPLE.com/apple-touch-icon-76x76.png"/>
<link rel=apple-touch-icon-precomposed sizes=152x152 href="https://www.EXAMPLE.com/apple-touch-icon-152x152.png"/>
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-196x196.png" sizes=196x196 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-96x96.png" sizes=96x96 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-32x32.png" sizes=32x32 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-16x16.png" sizes=16x16 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-128.png" sizes=128x128 />
<meta name=application-name content="EXAMPLE "/>
<meta name=msapplication-TileColor content="#FFFFFF"/>
<meta name=msapplication-TileImage content="https://www.EXAMPLE.com/mstile-144x144.png"/>
<meta name=msapplication-square70x70logo content="https://www.EXAMPLE.com/mstile-70x70.png"/>
<meta name=msapplication-square150x150logo content="https://www.EXAMPLE.com/mstile-150x150.png"/>
<meta name=msapplication-wide310x150logo content="https://www.EXAMPLE.com/mstile-310x150.png"/>
<meta name=msapplication-square310x310logo content="https://www.EXAMPLE.com/mstile-310x310.png"/>
<title>EXAMPLE</title>
<meta name=keywords content="EXAMPLE"/>
<meta name=description content="EXAMPLE"/>
<link href=EXAMPLE.css rel=stylesheet type="text/css"/>
<link rel=canonical href="https://www.EXAMPLE.com"/>
</head>
<body>
<div id=fullWidth>
<div id=mainheader>
<div id=mainlogo>
<h1><a href="https://www.EXAMPLE.com/" title="EXAMPLE">
<img title="EXAMPLE" src="images/EXAMPLE.jpg" width=260 height=160 alt="EXAMPLE"/></a></h1>
</div>
</div>
<div id=mobileview></div>
<div id=panel>
<div id=main class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=index.html title=Home>...</a> </li>
<li><a href=A.html title=A>...</a> </li>
<li><a href=contact.php title=Contact>...</a> </li>
</ul>
</div>
<div id=B class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=C.html title=...>...</a></li>
<li><a href=D.html title=...>...</a></li>
<li><a href=E.html title=...>...</a></li>
<li><a href=F.html title="...">...</a></li>
<li><a href=G.html title=...>...</a></li>
</ul>
</div>
<div id=Z class=boxed>
<h2 class=heading>...</h2>
<ul>
...</ul>
</div>
<div id=Y class=boxed>
<h2 class=heading>..</h2>
<ul>
<li><a href=H.html title="...">...</a></li>
<li><a href=I.html title="...">...</a></li>
<li><a href=J.html title=...>...</a></li>
</ul>
</div>
<div id=info class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=K.html title="...">...</a> </li>
<li><a href=L.html title=...>...</a> </li>
<li><a href=M.html title="...">...</a> </li>
<li><a href=N.html title="...">...</a> </li>
<li><a href=O.html title="...">...</a> </li>
</ul>
</div>
<div id=X class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href="mailto:enquiries&#64;EXAMPLE.com" title=Contact>...</a> </li>
<li><strong>...<br/>...</strong> </li>
</ul>
</div>
</div>
<div id=content>
<div class=content>
<h2 class=title>...</h2>
<p><strong>EXAMPLE</strong>...</p></div>
<div class=content>
<h3 class=title>...</h3>
<div class=row>
<div class=column><a href=K.html title="..."><img title="..." src="images/EXAMPLE.jpg" id=K width=150 height=150 alt="..."/></a><div class=caption>...</div></div>
<div class=column><a href=L.html title=...><img title=... src="images/EXAMPLE.jpg" id=L width=150 height=150 alt=L /></a><div class=caption>L</div></div>
<div class=column><a href=M.html title=M><img title=M src="images/EXAMPLE.jpg" id=M width=150 height=150 alt=M/></a><div class=caption>M</div></div>
<div class=column><a href=N.html title="N"><img title="N" src="images/EXAMPLE.jpg" id=N width=150 height=150 alt="N"/></a><div class=caption>N</div></div>
<div class=column><a href=O.html title=O><img title=O src="images/EXAMPLE.jpg" id=O width=150 height=150 alt=O/></a><div class=caption>O</div></div>
</div>
</div>
<div class=content>
<h3 class=title>...</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class=content>
<h3 class=title>...</h3>
<ul>
<li><p>...</a>.<br/>
<a href="https://www.EXAMPLE.com/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W1 alt="..." width=160 height=81 /></a></p></li>
<li><p>...<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank>...</a>.<br/>
<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W2 alt="..." width=104 height=47 /></a></p></li>
<li><p>...<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank>...</a>.<br/>
<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W3 alt="..." width=40 height=47 /></a></p></li>
</ul>
</div>
<div class=content>
<p>EXAMPLE<a href="https://www.EXAMPLE.com/en-gb/" title=... target=_blank>
<img title=... src="images/EXAMPLE.png" id=... alt=... width=162 height=47 /></a>...<a href="https://EXAMPLE.co.uk/" title=... target=_blank>
<img title=... src="images/EXAMPLE.png" id=... alt=... width=120 height=32 /></a>...</p>
</div>
<div class=content>
<p><a href="https://www.EXAMPLE.ac.uk/" title="..." target=_blank>
<img title="..." src="images/EXAMPLE.png" id=... alt="..." width=125 height=125 /></a>...<a href="https://www.EXAMPLE.ac.uk/" title="..." target=_blank>...</a>...</p>
</div>
</div>
<div id=mainfooter>
<p> &#169; EXAMPLE <br/>
...<br/>EXAMPLE<br/>
<br/>
...<br/>
...<br/>
<br/>
...<a href="https://www.EXAMPLE.com/" title="EXAMPLE "><strong>EXAMPLE</strong></a> </p>
<a href="https://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0" target=_blank>
<img title="Valid XHTML 1.0" src="images/valid-xhtml10.png" id=XHTML width=88 height=31 alt="Valid XHTML 1.0"/>
</a>
<a href="https://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" target=_blank>
<img title="Valid CSS" src="images/vcss.gif" id=CSS width=88 height=31 alt="Valid CSS"/>
</a>
</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script><script src="js/main.js"></script></body>
</html>

I look forward to hearing any thoughts! :grinning:

@Strobe I do not see the jQuery code you mentioned in your first post in any script tags in the html document you posted. We need to see where you were putting the script element containing the code.

$(document).ready(function(){$('#mobileview').click(function(){var panel=$('#panel');if($(this).hasClass('active')){$(this).removeClass('active');$(panel).slideUp();}else{$(this).addClass('active');$(panel).slideDown();}});});

Apologies – the html document I posted was the functioning version that calls the src=js/main.js file. Here is my inline non-functioning version with the script element code substituted in within the script tags:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang=en xml:lang=en>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8"/>
<meta http-equiv=Content-Security-Policy content="default-src 'self'; img-src https://*; base-uri 'self'; frame-ancestors 'none';"/>
<meta name=viewport content="width=device-width, initial-scale=1"/>
<link rel=apple-touch-icon-precomposed sizes=57x57 href="https://www.EXAMPLE.com/apple-touch-icon-57x57.png"/>
<link rel=apple-touch-icon-precomposed sizes=114x114 href="https://www.EXAMPLE.com/apple-touch-icon-114x114.png"/>
<link rel=apple-touch-icon-precomposed sizes=72x72 href="https://www.EXAMPLE.com/apple-touch-icon-72x72.png"/>
<link rel=apple-touch-icon-precomposed sizes=144x144 href="https://www.EXAMPLE.com/apple-touch-icon-144x144.png"/>
<link rel=apple-touch-icon-precomposed sizes=60x60 href="https://www.EXAMPLE.com/apple-touch-icon-60x60.png"/>
<link rel=apple-touch-icon-precomposed sizes=120x120 href="https://www.EXAMPLE.com/apple-touch-icon-120x120.png"/>
<link rel=apple-touch-icon-precomposed sizes=76x76 href="https://www.EXAMPLE.com/apple-touch-icon-76x76.png"/>
<link rel=apple-touch-icon-precomposed sizes=152x152 href="https://www.EXAMPLE.com/apple-touch-icon-152x152.png"/>
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-196x196.png" sizes=196x196 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-96x96.png" sizes=96x96 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-32x32.png" sizes=32x32 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-16x16.png" sizes=16x16 />
<link rel=icon type="image/png" href="https://www.EXAMPLE.com/favicon-128.png" sizes=128x128 />
<meta name=application-name content="EXAMPLE "/>
<meta name=msapplication-TileColor content="#FFFFFF"/>
<meta name=msapplication-TileImage content="https://www.EXAMPLE.com/mstile-144x144.png"/>
<meta name=msapplication-square70x70logo content="https://www.EXAMPLE.com/mstile-70x70.png"/>
<meta name=msapplication-square150x150logo content="https://www.EXAMPLE.com/mstile-150x150.png"/>
<meta name=msapplication-wide310x150logo content="https://www.EXAMPLE.com/mstile-310x150.png"/>
<meta name=msapplication-square310x310logo content="https://www.EXAMPLE.com/mstile-310x310.png"/>
<title>EXAMPLE</title>
<meta name=keywords content="EXAMPLE"/>
<meta name=description content="EXAMPLE"/>
<link href=EXAMPLE.css rel=stylesheet type="text/css"/>
<link rel=canonical href="https://www.EXAMPLE.com"/>
</head>
<body>
<div id=fullWidth>
<div id=mainheader>
<div id=mainlogo>
<h1><a href="https://www.EXAMPLE.com/" title="EXAMPLE">
<img title="EXAMPLE" src="images/EXAMPLE.jpg" width=260 height=160 alt="EXAMPLE"/></a></h1>
</div>
</div>
<div id=mobileview></div>
<div id=panel>
<div id=main class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=index.html title=Home>...</a> </li>
<li><a href=A.html title=A>...</a> </li>
<li><a href=contact.php title=Contact>...</a> </li>
</ul>
</div>
<div id=B class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=C.html title=...>...</a></li>
<li><a href=D.html title=...>...</a></li>
<li><a href=E.html title=...>...</a></li>
<li><a href=F.html title="...">...</a></li>
<li><a href=G.html title=...>...</a></li>
</ul>
</div>
<div id=Z class=boxed>
<h2 class=heading>...</h2>
<ul>
...</ul>
</div>
<div id=Y class=boxed>
<h2 class=heading>..</h2>
<ul>
<li><a href=H.html title="...">...</a></li>
<li><a href=I.html title="...">...</a></li>
<li><a href=J.html title=...>...</a></li>
</ul>
</div>
<div id=info class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href=K.html title="...">...</a> </li>
<li><a href=L.html title=...>...</a> </li>
<li><a href=M.html title="...">...</a> </li>
<li><a href=N.html title="...">...</a> </li>
<li><a href=O.html title="...">...</a> </li>
</ul>
</div>
<div id=X class=boxed>
<h2 class=heading>...</h2>
<ul>
<li><a href="mailto:enquiries&#64;EXAMPLE.com" title=Contact>...</a> </li>
<li><strong>...<br/>...</strong> </li>
</ul>
</div>
</div>
<div id=content>
<div class=content>
<h2 class=title>...</h2>
<p><strong>EXAMPLE</strong>...</p></div>
<div class=content>
<h3 class=title>...</h3>
<div class=row>
<div class=column><a href=K.html title="..."><img title="..." src="images/EXAMPLE.jpg" id=K width=150 height=150 alt="..."/></a><div class=caption>...</div></div>
<div class=column><a href=L.html title=...><img title=... src="images/EXAMPLE.jpg" id=L width=150 height=150 alt=L /></a><div class=caption>L</div></div>
<div class=column><a href=M.html title=M><img title=M src="images/EXAMPLE.jpg" id=M width=150 height=150 alt=M/></a><div class=caption>M</div></div>
<div class=column><a href=N.html title="N"><img title="N" src="images/EXAMPLE.jpg" id=N width=150 height=150 alt="N"/></a><div class=caption>N</div></div>
<div class=column><a href=O.html title=O><img title=O src="images/EXAMPLE.jpg" id=O width=150 height=150 alt=O/></a><div class=caption>O</div></div>
</div>
</div>
<div class=content>
<h3 class=title>...</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class=content>
<h3 class=title>...</h3>
<ul>
<li><p>...</a>.<br/>
<a href="https://www.EXAMPLE.com/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W1 alt="..." width=160 height=81 /></a></p></li>
<li><p>...<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank>...</a>.<br/>
<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W2 alt="..." width=104 height=47 /></a></p></li>
<li><p>...<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank>...</a>.<br/>
<a href="https://www.EXAMPLE.org.uk/" title="..." target=_blank><img title="..." src="images/EXAMPLE.png" id=W3 alt="..." width=40 height=47 /></a></p></li>
</ul>
</div>
<div class=content>
<p>EXAMPLE<a href="https://www.EXAMPLE.com/en-gb/" title=... target=_blank>
<img title=... src="images/EXAMPLE.png" id=... alt=... width=162 height=47 /></a>...<a href="https://EXAMPLE.co.uk/" title=... target=_blank>
<img title=... src="images/EXAMPLE.png" id=... alt=... width=120 height=32 /></a>...</p>
</div>
<div class=content>
<p><a href="https://www.EXAMPLE.ac.uk/" title="..." target=_blank>
<img title="..." src="images/EXAMPLE.png" id=... alt="..." width=125 height=125 /></a>...<a href="https://www.EXAMPLE.ac.uk/" title="..." target=_blank>...</a>...</p>
</div>
</div>
<div id=mainfooter>
<p> &#169; EXAMPLE <br/>
...<br/>EXAMPLE<br/>
<br/>
...<br/>
...<br/>
<br/>
...<a href="https://www.EXAMPLE.com/" title="EXAMPLE "><strong>EXAMPLE</strong></a> </p>
<a href="https://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0" target=_blank>
<img title="Valid XHTML 1.0" src="images/valid-xhtml10.png" id=XHTML width=88 height=31 alt="Valid XHTML 1.0"/>
</a>
<a href="https://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" target=_blank>
<img title="Valid CSS" src="images/vcss.gif" id=CSS width=88 height=31 alt="Valid CSS"/>
</a>
</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script><script>$(document).ready(function(){$('#mobileview').click(function(){var panel=$('#panel');if($(this).hasClass('active')){$(this).removeClass('active');$(panel).slideUp();}else{$(this).addClass('active');$(panel).slideDown();}});});</script></body>
</html>

Are you seeing any errors in the browser console?

Are you testing the code locally? If so, your Content-Security-Policy would need to be:

<meta http-equiv=Content-Security-Policy 
    content="default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' https://*; base-uri 'self'; frame-ancestors 'none';" />
  
2 Likes

Bingo!:smiley: You have cracked it: The Content Security Policy was preventing the Javascript from running inline. As soon as I changed the CSP to your specification the Hamburger began to work again, both offline and online.

Many thanks indeed.:sunglasses: