javascript - Can't get JS to run -


this question has answer here:

i found slider menu on codepen liked no matter can't js run. tried multiple sources of code , none worked properly.

<html> <head>     <title>aos slide</title>     <link rel="stylesheet" type="text/css" href="slide-test.css">     <script src="slidetest.js"></script> </head>  <div id="button" class="button">     <div></div>     <div></div>     <div></div>   </div>   <div id="menu" class="none">     <nav>       <ul>         <li class="menu-item">           <a href="" class="link">home</a>         </li>         <li class="menu-item">            <a href="file:///users/scatman01/desktop/code/aos3.0/aos-hike.html">hike</a>         </li>         <li class="menu-item">           <a href="file:///users/scatman01/desktop/code/aos3.0/aos-bike.html">bike</a>         </li>         <li class="menu-item">           <a href="file:///users/scatman01/desktop/code/aos3.0/aos-fishing.html">fishing</a>         </li>         <li class="menu-item">           <a href="file:///users/scatman01/desktop/code/aos3.0/aos-run.html">run</a>           <li role="separator" class="divider"></li>         </li><li class="menu-item">           <a href="file:///users/scatman01/desktop/code/aos3.0/aos-triplecrown.html">triple crown</a>           <li role="separator" class="divider"></li>         </li><li class="menu-item">           <a href="file:///users/scatman01/desktop/code/aos3.0/aos-gallery.html">gallery</a>         </li><li class="menu-item">           <a href="" class="link">contact</a>         </li>       </ul>     </nav>   </div>   <div id="shadow" class="none"></div> </body> </html>

css:

html {   height: 100%;  }  body {   height: 100%;   margin: 0;   padding: .1px;   position: relative;   background: url(http://www.adventuresofscatman.com/wp-content/uploads/2015/09/img_4273.jpg);   background-size: cover;   overflow-x: hidden; }  .button{   position: absolute;   top: 30px;   left: 25px;;   width: 55px;   height: 50px; }  .button div {   height: 20%;   border-top: 7px solid rgb(103, 103, 103);   cursor: pointer;   transition: .5s; }  .button:hover div {   border-color: rgb(139, 139, 139);  }  .menu-in, .menu-out {   padding: .1px;   width: 240px;   height: 100%;   background: rgba(0, 0, 0, .65);   overflow: hidden;   position: absolute;   top: 0; }  .menu-in {   -webkit-animation: menu-in .9s forwards ease; }  .menu-out{   -webkit-animation: menu-out .4s forwards ease-in;  }  ul {   margin: 68px 0 0 0;   padding: 0; }  .menu-item {   list-style: none; }  .link {   display: block;   text-decoration: none;   color: rgb(190, 190, 190);   font: 28px/50px arial;   text-transform: uppercase;   height: 50px;   text-align: center;   transition: .1s; }  .link:hover {   color: rgb(230, 230, 230);   background: rgba(200, 200, 200, .1);  }  .shadow-in, .shadow-out{   width: 100%;   height: 100%;   position: absolute;   top: 0;   background: rgba(0, 0, 0, .4); }  .shadow-in {   -webkit-animation: shadow-in .9s forwards ease; }  .shadow-out {    -webkit-animation: shadow-out .4s forwards ease-in; }  .none {   display: none; }  @-webkit-keyframes menu-in {   0% {     left: -240px;   }   100% {     left: 0;   } }  @-webkit-keyframes menu-out {   0% {     left: 0;   }   100% {     left: -240px;   } }    @-webkit-keyframes shadow-in {   0% {     left: 0;     opacity: 0;   }   100% {     left: 240px;     opacity: 1;   } }  @-webkit-keyframes shadow-out {   0% {     left: 240px;     opacity: 1;   }   99%{     height: 100%;    }   100% {     height: 0;     left: 0;     opacity: 0;   } }

js:

document.getelementbyid('button').addeventlistener('click', function() {     showmenu(); });  document.getelementbyid('menu').addeventlistener('click', function() {     showmenu(); });  function showmenu() {     console.log('click');     var menu = document.getelementbyid('menu');     var shadow = document.getelementbyid('shadow');     var button = document.getelementbyid('button');      menu.classname = 'menu-in';     shadow.classname = 'shadow-in';     button.classname = 'none'; }  document.getelementbyid('shadow').addeventlistener('click', function() {     var menu = document.getelementbyid('menu');     var shadow = document.getelementbyid('shadow');     var button = document.getelementbyid('button');      menu.classname = 'menu-out';     shadow.classname = 'shadow-out';     button.classname = 'button'; });

i'm quite new javascript myself, though must ran similar issue yours before. couldn't external javascript file work. figured out needed separate jquery library hosted google in .html file in order make work.

i not sure 1 need (or if need any), can't no harm looking hosted libraries google , paste link between <script></script> tags above closing tag of body.

a small example of coding (might idea):

<!doctype html>  <html>    <head>    <title></title>    <link rel="stylesheet" type="text/css" href="css/style.css">  </head>    <body>    <div class="content">      <div class="parallax-bg">        <h1>hello everybody</h1>      </div>    </div>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    <script type="text/javascript" src="js/scrolling.js"></script>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

Swift game error message -

i following ios game tutorial. cannot figure out wrong here. error on these 2 lines. let newangle = percent * 180 - 180 cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi); 180.0 //error "use of unresolved identifier 'percent'" the tutorial uses: cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi)/ 180.0 but changed error suggested import spritekit class gamescene: skscene { var cannon: skspritenode! var touchlocation:cgpoint = cgpointzero override func didmovetoview(view: skview) { /* setup scene here */ cannon = self.childnodewithname("cannon") as! skspritenode } override func touchesbegan(touches: set<uitouch>, withevent event: uievent?) { /* called when touch begins */ touchlocation = touches.first!.locationinnode(self) } override func touchesmoved(touches: set<uitouch>, withevent event: uievent?) { touchlocation = touches.first!.locationinn...
Read more