Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
click on a horizontal anv link. it should change color (become active) and make the others inactive. however, it's not working.
see it in (in)action here:
http://mattbillings.com/index_new.php
Any ideas?
==Javascript==
var nav_arr = new Array ('places','people','events','nature');
function nav_swap(id){
for(var i=0; i < nav_arr.length; i++){
var Element = document.getElementById(nav_arr[i]);
if (i == (id-1)) {
if(Element){
Element.className = "active";
}
} else {
if(Element){
Element.className = "inactive";
}
}
}
}
==markup===
<ul id="navlist">
<li><a href="javascript:sendRequest('nav','&pf_id=2','load');nav_swap(2);" id="people">People</a></li>
<li><a href="javascript:sendRequest('nav','&pf_id=1','load');nav_swap(1);" id="places">Places</a></li>
<li><a href="javascript:sendRequest('nav','&pf_id=3','load');nav_swap(3);" id="events">Events</a></li>
<li><a href="javascript:sendRequest('nav','&pf_id=4','load');nav_swap(4);" id="nature">Nature</a></li>
<li><a href="#">Store</a></li>
</ul>
</div>
==css==
div#navcontainer {padding:0;margin:0;}
div#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #625F73;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #625F73;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #cccccc;
color: #000;
}
.inactive {
background-color: #625F73;
color: White;
}
.active{
background-color: #e4e4e4;
color: #000000;
} -
-
CommentAuthorthumblewend
- CommentTimeApr 19th 2006
Rather than help you make this way work, I'd prefer to advise that the way you are approaching the website is not ideal. In my opinion it is relying on Ajax in an unsuitable fashion. I would suggest making each of those links real HTML links to separate pages so that the site's content is accessible to search-engines and non-javascript environments, and also directly bookmarkable and linkable. This method would also solve your current problem as you could then apply an id to each page's body element and do some CSS sort of like this to make the right link look highlighted:
body#peoplePage #people,
body#placesPage #places,
body#eventsPage #events,
body#naturePage #nature {
background-color: #e4e4e4;
color: #000000;
}
No javascript needed. Simpler implementation and far more accessible. What do you think? -
-
I agree with thumblewend. Don't use AJAX just to use AJAX. Use it if it enhances the user experience.
-
Check out the following tutorial for swapping stylesheets with javascript. ALA Working with alternate stylesheets
1 to 4 of 4