javascript - HTML - div is not clickable -


i trying create onepager site , not able click header , want on right side not under logo

$(function () {      $('a[href*=#]').stop().click(function () {          if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {              var ud_hash = this.hash;              var ud_ziel = $(this.hash);              if (ud_ziel.length) {                  var ud_abstand_top = ud_ziel.offset().top;                  $('html,body').animate({                      scrolltop: ud_abstand_top                  }, 1000, function () {                      window.location.hash = ud_hash;                  });                  return false;              }          }      });  });
body,html {      width:100%;      height:100%;      margin:0;      padding:0;  }    .ud_scroll {      width:100%;      height:100%;      float:right;      position:relative;  }    div#header {      position: fixed;      left:20px;      top: 10px;      width: 100%;  }  {      color:black;      opacity:0.5;      text-decoration:none;      text-align:center;      vertical-align:top;      line-height: 100px;  }  a:hover {      opacity:1;  }    nav {  }  nav ul {      margin:0;      padding:0;      font-family: 'roboto slab', serif;  }
<!doctype html>  <html lang="en">  <head>      <meta charset="utf-8">      <title>scrumplex - home</title>      <link href="http://fonts.googleapis.com/css?family=roboto+slab:300" rel="stylesheet" type="text/css">      <link rel="stylesheet" type="text/css" href="files/style.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <script src="files/scroll.js"></script>  </head>  <div id="header">        <a href="#">          <img src="files/img/logo.png" alt="scrumplex">          scrumplex          </a>        <nav>          <ul>              <a href="#hello">hello!</a>              <a href="#whoami">who i?</a>              <a href="#dl">downloads</a>              <a href="#cc">copyright</a>              <a href="#about">about</a>          </ul>      </nav>    </div>  <section id="hello" class="ud_scroll"><h2>hi</h2></section>  <section id="whoami" class="ud_scroll"><h2>whoami</h2></section>  <section id="dl" class="ud_scroll"><h2>dl</h2></section>  <section id="cc" class="ud_scroll"><h2>cc</h2></section>  <section id="about" class="ud_scroll"><h2>about!</h2></section>    </body>  </html>

my header not clickable dont know why ps: i'm new css , html

the problem have there <section id="hello"> on links because class .ud_scroll has height:100%. instead of clicking links, clicking section. try making smaller, or removing height value.

next time can use 1 of firefox developer features: inspector. can open page, , click ctrl + shift + i, , try click on link. see this:

enter image description here

thats telling section, id hello, class ud_scroll on else. since "hi" inside section, can click , select it, below unclicable.


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -