Solved

Active state on list nav not rendering

Posted on 2010-09-14
6
275 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Turn Insights into Action

Communication across every corner of your business is essential to increase the velocity of your application delivery and support pipeline. Automate, standardize, and contextualize your communication processes with xMatters.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

695 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