Codepen hexagon menu troubleshooting help: is my html file not properly linking to my javascript file? -
i self taught coder , grateful if give me advice on how following hexagon animated menu downloaded codepen work (link: http://codepen.io/web-tiki/pen/wvnqpg). have created 3 files: hexmenu.html, hexmenu.css, , hexmenu.js in same folder of course. when paste code code pen in each file menu doesn't seem work. head of file links js , css follows:
<!doctype html> <head> <html lang="en"> <meta charset="utf-8" /> <title>passion development project</title> <link href="hexmenu.css" rel="stylesheet" type="text/css" /> <script src="hexmenu.js" ></script> </head> now html code codepen in body tag; css in hexmenu.css , javascript in hexmenu.js file. each 1 pasted directly different files respectively codepen no modification (there nothing else in these files!), hence i'm little baffled why isn't working. advice?! css document seems working think wrong on javascript end. let me know i'm missing? created jsfiddle check if code working , ran smoothly. yet when put files on desktop , run on google chrome , firefox menu doesn't open up... easy fix godsend @ point! figure novice must missing obvious here...
you need window.onload in javascript. check following code in local adding window.onload , it's working charm in codepen.
here add code in same html page can separate javascript.
use following code:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script> window.onload = function() { var hexnav = document.getelementbyid('hexnav'); document.getelementbyid('menubtn').onclick = function() { var classname = ' ' + hexnav.classname + ' '; if ( ~classname.indexof(' active ') ) { hexnav.classname = classname.replace(' active ', ' '); } else { hexnav.classname += ' active'; } } }; </script> </head> <body> <nav id="hexnav"> <div id="menubtn"> <svg viewbox="0 0 100 100"> <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/> </svg> <span></span> </div> <ul id="hex"> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> <li class="tr"><div class="clip"><a href="#" class="content"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h2 class="title">title</h2><p>catch phrase</p> </a></div></li> </ul> </nav> </body> </html> hope helps. fiddle link
