Strobe
December 29, 2019, 3:41pm
1
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.
$(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.
Strobe
December 29, 2019, 3:45pm
3
Ah, thanks for the speedy reply! I am on the case and will provide the additional info soon.
Strobe
December 29, 2019, 4:58pm
4
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@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> © 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!
Strobe
December 29, 2019, 9:56pm
6
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@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> © 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>
Strobe
December 30, 2019, 11:52am
8
Bingo!
Many thanks indeed.
Here’s the code in question:
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.