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 
. (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
Post a Comment