Member Avatar for AppDevGuy

I want to make a pop-out list that shows multiple items where only one of those items has a bullet next to it. The best way to described what I want to do in HTML is by example: In Firefox you can click
View | Character Encoding | Auto-Detect

That brings up a side list of several items. Only one of those items has a solid dot next to it that shows it is the selected item. You can click to change which item has the bullet next to it. I want to know how do the same thing with HTML, CSS, and Javascript.

I've made attempts at doing this using either div or li for the items. I think my problem is in the CSS for those items. I use Javascript to change which single item on the list has a class attribute for the item that gets the bullet. The item that gets the bullet gets a class called itemselected and the other items all get a class called itemnotselected. You can see the CSS for those below.

Note that some of the properties are commented out. That's because I've tried variations to see if I can get it working right.

My problems are with:
- getting the dot onto the left of the text description of a single item,
- align the dot vertically with the text description,
- get all other row text descriptions aligned the same vertically.
- Getting the dot within the colored background box that has the text description from within the a tag.

I'm using an "a" tag within an "li" (or within "div" on some variations I've tried) in order to get the onclick. That part of it works. My Javascript executes and changes which elements have which classes assigned to them. I then see changes in the displayed list that indicate I've changed which row has class="itemselected".

My problem is in layout appearances. I'm testing with IE 7, latest Firefox, Seamonkey, Safari. All have similar problems but IE is worse than the others.

li.itemselected, a.itemselected, div.itemselected
{
    display: list-item;
    list-style-type:disc;
    /* background-image: url(images/dot.gif); */
    /* background-image: url(images/arrow.png); */
    list-style-image: url(images/dot.gif)  ! important; 
    /*list-style-image: none; */
    /*list-style-position:inside;*/
    background-repeat: no-repeat;
    /*padding-left:6px; */
    margin-left: 15px;
    /*background-position: 0 .5em; */
    background-position: left center;
    /*background-color: #b041d3;*/
    background: #b041d3 none;
    font-size: 9pt;
    z-index:4;

}

/*

li.itemselected li:before {
    background: #b041d3 none ! important;
    padding-left:6px;
    margin-left: 15px;
	content: "\00BB \0020";
    z-index:4;
	}

li.itemnotselected li:before {
    background: #b041d3 none ! important;
    padding-left:6px;
    margin-left: 15px;
	content: "▶ \0020";
    z-index:4;
	}
*/


li.itemnotselected, a.itemnotselected, div.itemnotselected
{
    display: list-item;
    list-style-type:square;
    /*list-style-type: none; */
    /*border-left-width:thick;*/
    /*padding-left:6px; */
    margin-left: 15px;
    /*background-position: 0 .5em; */
    background-position: left center;
    /*color: #746C19;*/
    background-color: #f0e1a3 ! important;
    font-size: 9pt;
    z-index:4;

}
  • 2 Contributors
  • 1 Reply
  • 67 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

AppDevGuy,

Try this (tested in IE6, Opera 9.01 and Moz 3.0.7). It's pretty simple but seems to work:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
ul#test { list-style-type:none; margin-left:0; padding-left:0; }
ul#test input.radio { position:relative; left:-2000px; }
ul#test input.radio.checked { left:0px; }
</style>

<script language="JavaScript" type="text/javascript">
function radio(container){
	var inputElements = document.getElementById(container).getElementsByTagName('input');
	for (var i=0; i<inputElements.length; i++){
		if(inputElements[i].getAttribute('type') != 'radio') { continue; }
		if(inputElements[i].checked) { inputElements[i].className = 'radio checked'; }
		else { inputElements[i].className = 'radio'; }
		inputElements[i].blur();
	}
}
</script>
</head>

<body>

<ul id="test">
	<li><input id="r1" type="radio" name="x" onclick="radio('test', 'x')" class="radio checked" checked="checked"><label for="r1">Item 1</label></li>
	<li><input id="r2" type="radio" name="x" onclick="radio('test', 'x')" class="radio"><label for="r2">Item 2</label></li>
	<li><input id="r3" type="radio" name="x" onclick="radio('test', 'x')" class="radio"><label for="r3">Item 3</label></li>
	<li><input id="r4" type="radio" name="x" onclick="radio('test', 'x')" class="radio"><label for="r4">Item 4</label></li>
<ul>

</body>
</html>

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.