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

I implemented vertical dot navigation. (1)The problem is the active dot's color is not changed to white. Just the first one is kept with white color though it is not active as shown in figure Color doesn't change at active dot in vertical dot navigation
. (2)How can I bring down the dot positions? I tried at position, right and top properties, but 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;         for (var i = 0; i < 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 a {     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;} 

Replay

Removed class='vNav' from UL tag.

changed background to red for active link, as I could not place the 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>

Finally I can manage to make the things work. My solution is as follow. HTML

<nav id="cd-vertical-nav">
        <ul>
            <li>
                <a data-number="1" href="#section1" class="is-selected">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Landed</span>
                </a>
            </li>
            <li>
                <a data-number="2" href="#section2" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Apartment</span>
                </a>
            </li>
            <li>
                <a data-number="3" href="#section3" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Condominium</span>
                </a>
            </li>
            <li>
                <a data-number="4" href="#section4" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Commercial</span>
                </a>
            </li>
            <li>
                <a data-number="5" href="#section5">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Farm</span>
                </a>
            </li>

        </ul>
</nav>
<div class="col-sm-9">
      <div id="section1">
        <h1 class="header">Landed</h1>

      </div>
      <div id="section2">
        <h1 class="header">Apartment</h1>

      </div>
      <div id="section3">
        <h1 class="header">Condominium</h1>

      </div>

      <div id="section4">
        <h1 class="header">Commercial</h1>

      </div> 

      <div id="section5">
        <h1 class="header">Farm</h1>

      </div>
   </div>

CSS

#cd-vertical-nav {
  position: absolute;
  right: 4%;
  top: 65%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
#cd-vertical-nav li {
  text-align: right;
  list-style:none;
}
#cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
#cd-vertical-nav a span {
  display: inline-block;
  float: right;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
  background-color: white;
}
#cd-vertical-nav .cd-dot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

h1.header{
    color: green;
    text-align: center;
    font-size: 1em;
}
div.col-sm-9 div {
      height: 500px;
      font-size: 18px;

}

#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;}

JAVASCRIPT

<script>
$('a').click(function () {
        $('a').removeClass('is-selected');
        $(this).addClass('is-selected');
    });
</script>

Category: javascript Time: 2016-01-16 Views: 3

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.203 (s). 12 q(s)