cross-browser <UL> SELECT list - any ideas? -
03-02-2006
, 09:13 PM
From what I can guess, this is not cross-browser. am I correct? IE-only?
what *would* be cross-browser, without resorting to the un-debugged AJAX
code I saw?
There's more I can do with this code. it came from a book that is
suspiciously IE-only.
<style>
..list {
cursor:hand;
overflow:auto;
width:150pt;
height:75pt;
border:1pt black solid;
}
..list UL {
list-style-type: none;
margin-left:2pt;
margin-top:0pt;
margin-bottom:0pt;
}
..list UL LI {
margin-top:0pt;
margin-bottom:0pt;
}
..list UL LI.selected {
background:navy;
color:white;
}
</style>
<script>
function checkParent(src,tag) {
while ("HTML" != src.tagName) {
if (tag == src.tagName) {
return src;
}
src=src.parentElement;
}
return null;
}
function selectItem(list) {
var el=checkParent(event.srcElement,"LI");
if ("LI"==el.tagName) {
if (null != list.selected) list.selected.className="";
if (list.selected != el) {
el.className="selected";
list.selected=el;
//do something here
} else list.selected=null;
}
}
<script>
<div class="list">
<ul id="src" onclick="selectItem(this);">
<li><img src="i/img1.jpg" /></li>
<li><img src="i/img2.jpg" /></li>
<li><strong>hi there</strong></li>
<li>click me</li>
</ul>
</div> |