Please be so good to take a look at my script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$count = 4;
$row = 10;
function across() {
var $active = $('#slideshow .active .current');
var $next = $active.next();
$next.addClass('current');
$active.animate({left: '+=50px'},800,'swing').removeClass('current');
$row += 10;
$count--;
if($count == 0) {
$count = 4;
$row = 10;
$($active).stop();
$('#slideshow .active .bed').animate({left: '-=50px'},1);
$("#slideshow .div:first-child").addClass('active');
$(".div .bed:first-child").addClass('current');
down();
}
}
$count2 = 4;
function down() {
var $active = $('#slideshow .active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
$count2--;
if($count2 == 0) {
$("#slideshow .div:first-child").addClass('active');
}
}
$(function() {
setInterval(across, 1000);
});
</script>
<style>
body {
background-color: black;
}
.active {
border: 1px solid white;
}
.current {
border: 1px solid white;
}
.div{
width: 200px;
height: 200px;
}
.alpha {
background-color: green;
}
.beta {
background-color: yellow;
}
.gamma {
background-color: red;
}
.delta {
background-color: pink;
}
.bed {
width: 50px;
height: 50px;
}
.one {
position: relative;
top: 0px;
background-color: orange;
}
.two {
position: relative;
top: 10px;
background-color: purple;
}
.three {
position: relative;
top: 20px;
background-color: grey;
}
</style>
</head><body>
<div id="slideshow">
<div class="div alpha active">
<div class="bed one current">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div beta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div gamma">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
<div class="div delta">
<div class="bed one">s</div><div class="bed two">s</div><div class="bed three">s</div>
</div>
</div>
</body></html>
http://jsfiddle.net/QSfgG/
It's working well, but as you can probably see, it loops really strangely! What I want is for the squares in the first block to all move individually and then slide back, then the squares in the second to do the same, then the third, then the fourth, and then for the whole thing to loop again, over and over ad infinitum.
Instead, the first block behaves correctly, then the second, and then the third, but then on the last the weirdness begins; blocks 2 and 4 begin to move together, then block 3, then blocks 2 and 4 again. Block 1 is missed out completely. Really weird.
I think the answer lies somewhere in function down.
Thanks for your time!
The problem is you're adding the 'active' class in two places. Given your code design, you should only be adding/removing it in the down() function.
Simply remove the line in across():
$("#slideshow .div:first-child").addClass('active');
Also, you need to reset $count2 to be 4 or it will only loop twice. Do that in down(), refer to my Fiddle for specifics.
Here's my own version of your Fiddle. I split out the HTML, CSS, and JavaScript so it was easier for me to debug.
Link: jsFiddle
Another suggestion is to remove $count2. Instead of checking for $count2 == 0, check for !$next.length. When it is 0, it will evaluate as truthy.
Link: jsFiddle without $count2
Related
I'm wondering if anyone has discovered a beautiful way to rotate out logo's based on 'sections' of the page.
In more detail I have a logo on a transparent navbar, let's say a white logo.
My page is broken into sections, some gray/light background some darker/black backgrounds. As I scroll, I hope that the sticky logo will be swapped out to an opposing color. I attempted to do this by naming each section with an id such as id='white and id=black.
Then once I scrolled down and hit that I'd trigger the function and swap out the picture, although, I realized that it only detects the first id of white or the second of black.
Not sure how to approach this other then make a unique id for each section, which, seems barbaric.
window.onscroll = function() {
myFunction()
};
function myFunction() {
if ($(this).scrollTop() >= $('#white').position().top) {
logoSwap(0);
} else if (($(this).scrollTop() >= $('#black').position().top)) {
logoSwap(1);
}
}
function logoSwap(which) {
if (which) {
$('#logo').css("background-color", "black");
} else {
$('#logo').css("background-color", "white");
}
}
#logo {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
background-color: black;
}
.h500 {
height: 500px;
}
.white {
background-color: white;
}
.black {
background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo">
</div>
<section id="white" class='h500 white'>
</section>
<section id="black" class='h500 black'>
</section>
<section id="white" class='h500 white'>
</section>
<section id="black" class='h500 black'>
</section>
You have to use classes and not id's because there must be only one item in the document having a same id, contrary to class.
About the script: the idea is to iterate over all the sections .white or .black and get the top and bottom for each one, which will allow you while handling scrolling event to verify if your logo is inside a given section (between the section's top and bottom positions)
Edit: I add this code (with pure javascript) to my comment.
const whites = [...document.querySelectorAll('.white')].map(e => ({
top: e.getBoundingClientRect().top,
bottom: e.getBoundingClientRect().bottom
}));
//If you have a logic of only white and black sections, you can omit blacks, else you can use them
// const blacks = [...document.querySelectorAll('.black')].map(e => ({top: e.top, bottom: e.bottom}));
const logo = document.querySelector('#logo');
document.addEventListener('scroll', () => {
let position = (logo.getBoundingClientRect().bottom + logo.getBoundingClientRect().top) / 2 + window.scrollY;
for (let i = 0; i < whites.length; i++) {
if (position >= whites[i].top && position <= whites[i].bottom) {
logo.classList.remove('whiteLogo');
logo.classList.add('blackLogo');
return;
}
}
logo.classList.remove('blackLogo');
logo.classList.add('whiteLogo');
});
*,
html,
body {
margin: 0;
padding: 0;
}
section {
height: 200px;
}
.black,
.blackLogo {
background: black;
}
.white,
.whiteLogo {
background: white;
}
#logo {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="logo" class="whiteLogo"></div>
<section class="black"></section>
<section class="white"></section>
<section class="black"></section>
<section class="black"></section>
<section class="white"></section>
<section class="black"></section>
</body>
</html>
DOM id's need to be unique, so your code will only recognize the first instance of each. You should find the last section you scrolled over, and find what class that has:
function myFunction() {
var position = $(this).scrollTop()
var class_pos = $('.white, .black').filter(function(){ return position >= $(this).position().top})
// console.log(class_pos)
if ($(class_pos[class_pos.length - 1]).hasClass('white')){
logoSwap(0);
} else {
logoSwap(1);
}
}
I've been playing around with the code below and using it to create a progress bar that responds to a certain type of data input. The data I'm using comes in the form of an array but I've noticed that the code only creates one progress bar.
How could I embed this within my for loop so that it creates a separate progress bar for each item in the array?
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 2000);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width=width + 10;
elem.style.width = width + '%';
elem.innerHTML = ((100 - width)/10) + ' mins';
}
}
}
move();
#myProgress {
width: 80%;
background-color: #ddd;
horizontal-align: center;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
</body>
Here is the link to what I'm working on: My Workspace
Side Note: I've been trying to get the progress bar to be centered on the page with a margin: 200px on either side. The margin attribute in my CSS doesn't seem to be doing this and only applying the margin to the left but not to the right - where am I going wrong with this?
Try this
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<div id="myProgress">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
$("#myProgress").html(progressbars);
});
</script>
</html>
Using Javascript Only
Just replace previous script with this
<script>
window.onload=function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
document.getElementById("myProgress").innerHTML=progressbars;
}
This will generate
I see that you have included bootstrap 4
In that case you can create progress bars with Bootstrap
var progressbars="";
for (var i = 1; i <=10; i++) {
progressbars+='<div class="progress">'
+'<div class="progress-bar" role="progressbar" style="width: '+i+'%" aria-valuenow="'+i+'" aria-valuemin="0" aria-valuemax="100">'+i+'%</div>'
+'</div>';
}
document.querySelector(".feefo").innerHTML=progressbars;
And it looks a lot nicer :)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I want to make a simple slider using pure javascript that support at least ie8, but got stuck at the moment. The problem is I when I click one of the paging items it should grab current index and then target another div for the slider container item with the same index as the paging. Basically I want to add and remove active class on both div.sliderItems & div.pagingItems based on div.pagingItems index. Here's my code:
window.onload = function(){
var slider = document.getElementById('slider'),
sliderItems = slider.children,
totalItems = sliderItems.length,
activeSlider = document.querySelector('.activeSlider'),
pagingSlider = document.getElementById('pagingSlider'),
pagingItems = pagingSlider.children,
activePaging = document.querySelector('.activePaging');
function next(){
for (var i = 0; i < totalItems; i++) {
if (i < totalItems - 1) {
if (sliderItems[i].className.match( /(?:^|\s)activeSlider(?!\S)/ )) {
sliderItems[i].className = sliderItems[i].className.replace( /(?:^|\s)activeSlider(?!\S)/g , '' );
sliderItems[i + 1].className += ' activeSlider';
pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
pagingItems[i + 1].className += ' activePaging';
return;
}
} else {
sliderItems[i].className = sliderItems[i].className.replace( /(?:^|\s)activeSlider(?!\S)/g , '' );
sliderItems[i + 1 - totalItems].className += ' activeSlider';
pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
pagingItems[i + 1 - totalItems].className += ' activePaging';
return;
}
}
}
for (var i = 0; i < totalItems; i++) {
(function(index){
pagingItems[i].onclick = function(){
pagingItems[i].className = pagingItems[i].className.replace( /(?:^|\s)activePaging(?!\S)/g , '' );
this.className += ' activePaging';
console.log(index);
}
})(i);
}
if (activeSlider === null) {
sliderItems[0].className += ' activeSlider';
pagingItems[0].className += ' activePaging';
}
var start = setInterval(next, 3000);
pagingSlider.onmouseenter = function(){clearInterval(start);};
pagingSlider.onmouseleave = function(){start = setInterval(next, 3000);};
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.wrapperSlider {
position: relative;
width: 100%;
padding-bottom: 35%;
}
#slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#slider > * {
display: table;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: red;
opacity: 0;
transition: all ease-in-out .5s;
}
#slider > * > * {
display: table-cell;
vertical-align: middle;
}
#slider > *.activeSlider {
z-index: 1;
background: green;
opacity: 1;
}
.wrapperPaging {
text-align: center;
}
#pagingSlider {
display: inline-block;
font-size: 0;
}
#pagingSlider > * {
display: inline-block;
margin: 0 10px;
font-size: 14px;
color: black;
cursor: pointer;
transition: all ease-in-out .5s;
}
#pagingSlider > *.activePaging {
color: red;
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test File | Vanilla JS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<div class="wrapperSlider">
<div id="slider">
<div class="sliderItems">
<div>Item 1</div>
</div>
<div class="sliderItems">
<div>Item 2</div>
</div>
<div class="sliderItems">
<div>Item 3</div>
</div>
<div class="sliderItems">
<div>Item 4</div>
</div>
<div class="sliderItems">
<div>Item 5</div>
</div>
</div>
</div>
<div class="wrapperPaging">
<div id="pagingSlider">
<a class="pagingItems">1</a>
<a class="pagingItems">2</a>
<a class="pagingItems">3</a>
<a class="pagingItems">4</a>
<a class="pagingItems">5</a>
</div>
</div>
</body>
</html>
Your onclick function has a closure around the i loop counter, which is causing the "classic" closure bug of all of your event handlers sharing the same value for i and i persisting after its defining scope has ended. At that point, i has the last value set by the loop, which is one more than the number of actual items there are, so when the time comes to click on your slider, no matter which number you click on, you get the same i value that is one more than the highest index used. While your code was set up to avoid this problem by using an immediately invoked function expression that passes itself a copy of i, which it receives as index, your nested onclick functions ignored that and used i anyway. You could just change references to i with index. But, changing the pageSlider[i] reference to this solves the issue as well and doesn't rely on the IIFE.
A couple of other small pieces of advice...
An <a> is only valid when it has a name or href attribute and, in your case, you really aren't trying to navigate anywhere, so the <a> tag is inappropriate for what you are doing. In my example below, I've changed those to <span> elements, which is more appropriate.
Instead of working with the className property, it is simpler (and less error prone) to use classList, which provides .add(), remove() and toggle() and methods. When you use .add(), you don't have to worry about prepending a space in situations when there will be more than one class applied. And, most importantly, you can easily remove a class without regular expressions and String.replace().
window.onload = function(){
var slider = document.getElementById('slider'),
sliderItems = slider.children,
totalItems = sliderItems.length,
activeSlider = document.querySelector('.activeSlider'),
pagingSlider = document.getElementById('pagingSlider'),
pagingItems = pagingSlider.children,
activePaging = document.querySelector('.activePaging');
function next(){
for (var i = 0; i < totalItems; i++) {
if (i < totalItems - 1) {
if (sliderItems[i].className.indexOf('activeSlider') > -1) {
sliderItems[i].classList.remove('activeSlider');
sliderItems[i + 1].classList.add('activeSlider');
pagingItems[i].classList.remove('activePaging');
pagingItems[i + 1].classList.add('activePaging');
}
} else {
sliderItems[i].classList.remove('activeSlider');
sliderItems[i + 1 - totalItems].classList.add('activeSlider');
pagingItems[i].classList.remove('activePaging');
pagingItems[i + 1 - totalItems].classList.add('activePaging');
}
}
}
for (var i = 0; i < totalItems; i++) {
pagingItems[i].onclick = function(){
// You were forming a closure around i in this function. You can reference
// the element that triggered the event simply with "this"
this.previousElementSibling.classList.remove('activePaging');
this.classList.add('activePaging');
}
}
if (activeSlider === null) {
sliderItems[0].classList.add('activeSlider');
pagingItems[0].classList.add('activePaging');
}
var start = setInterval(next, 3000);
pagingSlider.onmouseenter = function(){clearInterval(start);};
pagingSlider.onmouseleave = function(){start = setInterval(next, 3000);};
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.wrapperSlider {
position: relative;
width: 100%;
padding-bottom: 35%;
}
#slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#slider > * {
display: table;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background: red;
opacity: 0;
transition: all ease-in-out .5s;
}
#slider > * > * {
display: table-cell;
vertical-align: middle;
}
#slider > *.activeSlider {
z-index: 1;
background: green;
opacity: 1;
}
.wrapperPaging {
text-align: center;
}
#pagingSlider {
display: inline-block;
font-size: 0;
}
#pagingSlider > * {
display: inline-block;
margin: 0 10px;
font-size: 14px;
color: black;
cursor: pointer;
transition: all ease-in-out .5s;
}
#pagingSlider > *.activePaging {
color: red;
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test File | Vanilla JS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<div class="wrapperSlider">
<div id="slider">
<div class="sliderItems">
<div>Item 1</div>
</div>
<div class="sliderItems">
<div>Item 2</div>
</div>
<div class="sliderItems">
<div>Item 3</div>
</div>
<div class="sliderItems">
<div>Item 4</div>
</div>
<div class="sliderItems">
<div>Item 5</div>
</div>
</div>
</div>
<div class="wrapperPaging">
<div id="pagingSlider">
<span class="pagingItems">1</span>
<span class="pagingItems">2</span>
<span class="pagingItems">3</span>
<span class="pagingItems">4</span>
<span class="pagingItems">5</span>
</div>
</div>
</body>
</html>
I'm currently working through this tutorial from helpingdev, but have come up against a brick wall - I've followed every step so far as i can tell and have the interface working - however when i run the page the image doesn't change, it simply stays on the first one.
the video is over three years old, so I'm guessing something in the syntax just need's to be changed - i just can't figure out what even with chrome dev tools.
Thanks for your help.
Here's the html, css, and js for the page:
html:
<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>
Previous
Next
</div>
<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>
</body>
</html>
css:
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}
a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}
js:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();
});
function startSlider(){
count = $("#slider > img").length;
loop = setInterval(function(){
if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;
}
$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
},3000);
}
This
$("slider > img").fadeOut(300);
Should be
$("#slider > img").fadeOut(300);
You missed a # in front of slider
Also remove the code loop = you are assigning a function to the loop variable but never executing it. So what you need is to run it rather than assigning it. Removing the assignment will execute that block of code.
On another question I asked if I could set the font-weight to bold on a text element when that text is selected. This has been completed much to the avail of #Eric ! But currently, when you click a text, you can happily click another one and both of the text will be bold.
How can I prevent more than one text element from being bold?
Here is my code on JSFiddle: http://jsfiddle.net/6XMzf/ or below:
CSS:
html,body {
margin: 0;
padding: 0
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
color: white;
}
.stretch {
width:100%;
height:100%;
}
.navigationPlaceholder {
width:100px;
height: 400px;
left: 100px;
top: 100px;
position: absolute;
}
#navigation {
background-color: #000000;
}
#navigationText ul {
font-family: "Yanone Kaffeesatz";
font-weight: 100;
text-align: left;
font-size: 25px;
color: #b2b2b2;
left: 25px;
top: 50px;
position: absolute;
line-height: 40px;
list-style-type: none;
}
.noSelect {
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit browsers */
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Max Kramer | iOS Developer</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = '400';
}, false);
}
</script>
</body>
</html>
If you don't have a selector engine handy like jQuery and really have to do this in plain Javascript, I would do it like this:
function addClass(elem, className) {
if (elem.className.indexOf(className) == -1) {
elem.className += " " + className;
}
}
function removeClass(elem, className) {
elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}
var lastSelected = null;
function initNavClickHandler() {
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
addClass(this, "selected");
if (lastSelected) {
removeClass(lastSelected, "selected");
}
lastSelected = this;
}, false);
}
}
initNavClickHandler();
Then, add a CSS rule that controls the selected look:
.selected {font-weight: 800;}
This is a lot more flexible for styling because you can add as many CSS rules as you want to the .selected class to change/modify it without ever touching your code.
You can see it work here: http://jsfiddle.net/jfriend00/rrxaQ/
If you can use things like jQuery then this is a much simpler problem. Let me show you the jQuery solution for both highlighting and unhighlighting.
$("#navigationText li").click( function() {
$("#navigationText li").css("fontWeight", "100");
$(this).css("fontWeight", "400");
});
Now you can achieve the same thing yourself without jQuery. You either need to create a global that holds the currently bolded item and remove the fontWeight or just remove the fontWeight from all items (brute force).
//untested with global to store currently selected
var nav = document.getElementById('navigationText');
var activeItem = null;
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
if (activeItem) {activeItem.style.fontWeight = '100'; }
this.style.fontWeight = '400';
activeItem = this;
}, false);
}
//sorry I don't feel like writing a brute force one for you!