Solved

Active state on list nav not rendering

Posted on 2010-09-14
6
268 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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 …
This video teaches users how to migrate an existing Wordpress website to a new domain.

770 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