javascript - Color doesn't change at active dot in vertical dot navigation -


i implemented vertical dot navigation. (1)the problem active dot's color not changed white. first 1 kept white color though not active shown in figure (fig). (2)how can bring down dot positions? tried @ position, right , top properties, not changed.

.vnav {     position:absolute;     right:7px;     top:200px;     width: 50px;     z-index: 9999;     list-style-type: none; } 

my html is

<form  class="summarybackground" name="summary"  id="summary" style="height:500px;width:920px;overflow-y:hidden;"  method="post">  <div class="mybox" id="section">       <div class="vnav">       <ul class="vnav">           <li> <a href="#section1"><div class="label">landed</div></a>            </li>           <li> <a href="#section2"><div class="label">apartment</div></a>            </li>           <li> <a href="#section3"><div class="label"> condominium </div></a>            </li>           <li> <a href="#section4"><div class="label"> commercial </div></a>            </li>           <li> <a href="#section5"><div class="label"> farm </div></a>            </li>       </ul>      </div>     <div class="col-sm-9">       <div id="section1" class="par">             <h1>landed</h1>        </div>       <div id="section2" class="par">          <h1>apartment</h1>        </div>       <div id="section3" class="par">                  <h1>condominium</h1>        </div>        <div id="section4" class="par">                  <h1>commercial</h1>        </div>         <div id="section5" class="par">                 <h1>farm</h1>        </div>    </div>       </div>  </form> 

javascript is

<script> $(document).ready(function ($) {     var parposition = [];     $('.par').each(function () {         parposition.push($('form').offset().top);     });      $('a').click(function () {         $('form').animate({             scrolltop: $($.attr('form', 'href')).offset().top         }, 500);         return false;     });      $('.vnav ul li a').click(function () {         $('.vnav ul li a').removeclass('active');         $('form').addclass('active');     });      $('.vnav a').hover(function () {         $(this).find('.label').show();     }, function () {         $(this).find('.label').hide();     });      $(document).scroll(function () {         var position = $('form').scrolltop(),             index;         (var = 0; < parposition.length; i++) {             if (position <= parposition[i]) {                 index = i;                 break;             }         }         $('.vnav ul li a').removeclass('active');         $('.vnav ul li a:eq(' + index + ')').addclass('active');     }).scroll();      $('.vnav ul li a').click(function () {         $('.vnav ul li a').removeclass('active');         $(form).addclass('active');     }); }); </script> 

css is

.summarybackground {background-color:#000000;}  .mybox { border: none; padding: 5px; font: 24px/36px sans-serif; width: 850px; height: 500px; margin-bottom: 150%; }   .vnav {     position:absolute;     right:7px;     top:200px;     width: 50px;     z-index: 9999;     list-style-type: none; } .vnav ul {     position: relative;     padding: 3px;     padding-left: 35%; } .vnav ul li {     position: relative;     padding-bottom: 20px;     padding-left: 35%;     color: rgb(113, 135, 133); } .vnav {     display: block;     width: 13px;     height: 13px;     text-indent: -9999px;     border-radius: 50%;     border: 2px solid;     border-color: rgb(113, 135, 133);     text-decoration: none; } .vnav a:hover {     border-radius: 50%;     background-color: rgb(113, 135, 133);     text-decoration: none; } .vnav a.active {     border-radius: 50%;     background-color: #ffffff;     text-decoration: none; }  .label {     position:absolute;     right: 5%;     top: 40%;     width: 100%;     text-align: right;     font-size: 2em;     color: #ffffff;     display: none; }     div.col-sm-9 div {       height: 500px;       font-size: 28px;   }    #section1 {color: #fff; background-color: #1e88e5;}   #section2 {color: #fff; background-color: #673ab7;}   #section3 {color: #fff; background-color: #ff9800;}   #section4 {color: #fff; background-color: #00bcd4;}   #section5 {color: #fff; background-color: #009688;} 

removed class='vnav' ul tag.

changed background red active link, not place link dots above black background.

css:

        .vnav a.active {         border-radius: 50%;         background-color: #ff0000;         text-decoration: none;     } 

javascript:

        <script>         $(document).ready(function ($) {             $('.vnav > ul > li > a').click(function() {                 $('.vnav > ul > li > a').removeclass();                 $(this).addclass('active');             });          });         </script> 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -