Solved

Active state on list nav not rendering

Posted on 2010-09-14
6
266 Views
Last Modified: 2012-05-10
For some reason I cannot figure out why the code below doesn't render with the active state.


Here is the code Im having an issue with:

css:
.vzt  ul.list { padding:0px;margin:0px; }
.vzt  ul li { float:left;list-style-type:none;padding:0px;margin:0px;height:45px; }
.vzt  ul li a.li { display:block;padding-top:15px;height:15px;padding-bottom:15px;border-right:1px solid #292929;text-align:center;vertical-align:middle;background-color:#000;margin:0 0 0 0;text-decoration:none;color:#999999; }
.vzt  ul li a.li:active { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#0cdbca;font-weight:bold; }
.vzt  ul li a.li:visited { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#999999;font-weight:bold; }
.vzt  ul li a.li:hover { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#fff;font-weight:bold; }
.vzt  ul li a.last { border:none;background:#000;}
.vzt  ul li a.last:hover { border:none;background:#000;}

Html:
<ul class="list" id="tabs" style="padding-left:45px;margin:0px;">
	<li><a id="myHeader2" href="javascript:showonlyone('newboxes2');" class="li" style="width:121px;">link1</a></li>
	<li><a id="myHeader3" href="javascript:showonlyone('newboxes3');"  class="li" style="width:137px;">link2</a></li>
	<li><a id="myHeader4" href="javascript:showonlyone('newboxes4');" class="li" style="width:172px;">link3</a></li>
	<li><a id="myHeader5" href="javascript:showonlyone('newboxes5');" class="li" style="width:161px;">link4</a></li>
	<li><a id="myHeader6" href="javascript:showonlyone('newboxes6');" class="li" style="width:250px;">link5</a></li>
			</ul>

Open in new window

0
Comment
Question by:yando18
  • 2
  • 2
  • 2
6 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33676016
Can't make out from this much code unless you can share showonlyone method and related code
0
 

Author Comment

by:yando18
ID: 33676349
Here is the script:

<!-- Script Modal Tabs  -->
<script type="text/javascript">
function showonlyone(thechosenone) {
    $$(".modal_content")[0].getElements("div[name=newboxes]").each(function(item, i){
        if (item.get('id') == thechosenone) {                            
            item.show();
        } else {
            item.hide();
        }
    });
}

</script>
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33678242
For pseudo classes like this, :active needs to come after :hover, which in turn needs to come after :link and :visited.

Make sure the order of the pseudo classes in your CSS are in the following order:

a:link
a:visited
a:hover
a:active


0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33679420
rather than name attribute for the div, can you assign a class 'newboxes' and then
I guess what you are trying to do is, show the chosen one and hide the rest of divs with same class. Please confirm
function showonlyone(thechosenone)
{
    $(".newboxes").hide();
    $("#" + thechosenone ).show( );
}
0
 

Author Comment

by:yando18
ID: 33682240
I've updated the code, and its work for the most part. The issue now is when you click the tab and click again the state is no longer active.

<script type="text/javascript">
var selectedIndex = 1;
var oldSelectedIndex = 1;
function showonlyone(thechosenone) {
      oldSelectedIndex = selectedIndex;
    $$(".modal_content")[0].getElements("div[name=newboxes]").each(function(item, i){
        if (item.get('id') == thechosenone) {                            
                  selectedIndex = i;
            item.show();
        } else {
            item.hide();
        }
    });
      var tabs = $$(".modal_content")[0].getElements(".list li a");
      tabs[selectedIndex-1].addClass('active');
      tabs[oldSelectedIndex-1].removeClass('active');
      console.log(tabs);
}

</script>
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 33682359
yando,

There seems to be some confusion on what you mean by Active.

In your original post, the CSS indicated that you meant the active state of a link, as shown by the following pseudo class selector

a:active //note the colon

This is not the same as you adding a class of active to an element. That would be represented by a class selector

a.active //note the fullstop

They are two very different things, and the similar names can cause some confusion. If you are wanting to indicate an 'active' state by adding a class, then consider renaming it - maybe something like selected.


0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now