Javascript: Find all elements on page and add the same CSS -


currently learning javascript , trying create expanding menu.

i'm trying find elements of same class , setting css value on click elements in nodelist. error see in console is:

cannot read property 'style' of undefined

i know it's loop not setting variable correctly; not sure is.

jsfiddle

http://jsfiddle.net/dxv68/

html

<div class="master">  <a href="#" id="btn-nav">     <span></span>     <span>menu</span>     <span></span> </a>  <nav id="main-nav">   <div class="wrapper">   <div class="background">   <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div>    <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div>    <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div>   <div class="slice"></div> </div> </div> </nav>  </div><!-- end master -->

css

@import url(http://fonts.googleapis.com/css?family=droid+sans);   body {     background: #2980b9;     font-family: 'droid sans', sans-serif; }   #btn-nav {     position:absolute;     left:10px;     top:10px;     width:30px;     height:30px;     display:block;         z-index:1; }  #btn-nav span:nth-child(2) {     top:10px; }  #btn-nav span:nth-child(3) {     top:20px; }  #btn-nav span {     height: 4px;     width: 30px;     background: white;     content: "";     text-indent: -999em;     display:inline-block;     position:absolute;     zoom: 1;     top:0px;     left:0px;     text-align:center;     -webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);         -webkit-transform: rotate(0deg); }   #btn-nav:hover > span {     top:10px;         -webkit-animation: rotateani .5s 1s forwards;  }  #btn-nav:hover > span:nth-child(1) {   -webkit-animation: rotateani .5s .5s forwards, expandani .3s .8s forwards; }  #btn-nav:hover > span:nth-child(2) {   -webkit-animation: rotateani .5s .5s forwards, expandani-2 .3s .8s forwards; }  #btn-nav:hover > span:nth-child(3) {   -webkit-animation: rotateani .5s .5s forwards, expandani-3 .3s .8s forwards; }   @-webkit-keyframes rotateani {   0% {-webkit-transform: rotate(0deg);}   100% {-webkit-transform: rotate(90deg);} }  @-webkit-keyframes expandani {   0% {left:0;}   100% {left:-10px;} }  @-webkit-keyframes expandani-2 {   0% {left:0;}   100% {left:0px;} }  @-webkit-keyframes expandani-3 {   0% {left:0;}   100% {left:10px;} }   #main-nav {   position:fixed;   left:0;   top:0;   display:block;   width:100%;   height:100%;   z-index:-1; }  #main-nav .wrapper {   display:table;   width:100%;   height:100%; }  .slice {   width:25%;   height:30%;   float:left;   background:black;   opacity:0;   -webkit-transition: 1s; }  .background {   position:absolute;   left:0;   top:0;   width:100%;   height:100%;   z-index:-1; }

js

(function () {     'use strict';      var menubtn = document.getelementbyid('btn-nav');     var slice = document.queryselectorall('.slice');      for(var = 0; <= slice.length; i++) {         var boxes = slice[i];     }      menubtn.addeventlistener('click', function() {         boxes.style.opacity = 1;     }, false);  }());

you need place loop inside event, it's doing setting last slice's opacity.

var menubtn = document.getelementbyid('btn-nav'); var slice = document.queryselectorall('.slice');  menubtn.addeventlistener('click', function() {     for(var = 0; < slice.length; i++) {         slice[i].style.opacity = 1;     } }, false);

Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more