...

View Full Version : need to change class ids with function



singedpiper
05-31-2006, 05:10 PM
I currently have this snippet:


<ul id="buttons" class="sortable boxy clickable">
<li>
<div class="num">132</div>
<div class="Authenticating"><a href="http://www.google.com" onclick="pop(this.href, 132); return false;">James Herreid</a></div>
<div class="clear">&nbsp;</div>
</li>
<li id="selected">
<div class="num">84</div>
<div class="Authenticating"><a href="http://www.yahoo.com" onclick="pop(this.href, 84); return false;">Daniel Thurgood</a></div>
<div class="clear">&nbsp;</div>
</li>


now, when the function pop(url, number) runs, I need it to set the class of the li that was just clicked to selected, and remove the selected class from the previous selection

how can I do this... changing class names is ok, but the general html layout needs to remain.

?

vwphillips
05-31-2006, 06:49 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.Authenticating{
background-color:red;width:200px;
}

.Authenticating2{
background-color:blue;width:100px;
}
/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function pop(obj,cls){
}

function SwapClass(obj,cls){
var div=obj;
while (div.tagName!='DIV'&&div.parentNode){
div=div.parentNode;
}
if (div.tagName!='DIV'){ return; }
var ul=obj;
while (ul.tagName!='UL'&&ul.parentNode){
ul=ul.parentNode;
}
if (ul.tagName!='UL'){ return; }
if (ul.div){
if (ul.div!=div){ ul.div.className=ul.div.cls; }
}
if (!div.cls){ div.cls=div.className; }
div.className=(div.className==div.cls)?cls:div.cls;
ul.div=div;


}
/*]]>*/
</script>
</head>

<body>
<ul id="buttons" class="sortable boxy clickable">
<li>
<div class="num">132</div>
<div class="Authenticating" onclick="SwapClass(this,'Authenticating2');" ><a href="http://www.google.com" onclick="pop(this.href, 132); return false;">James Herreid</a></div>
<div class="clear">&nbsp;</div>
</li>
<li id="selected">
<div class="num">84</div>
<div class="Authenticating" onclick="SwapClass(this,'Authenticating2');" ><a href="http://www.yahoo.com" onclick="pop(this.href, 84); return false;">Daniel Thurgood</a></div>
<div class="clear">&nbsp;</div>
</li>
</ul>
</body>

</html>

Beagle
05-31-2006, 06:52 PM
<script type="text/javascript">
function LI_linkClicked(p_a)
{
/**************************
*** Local Variables ***/

var li;
var ul;
var counter;
var items;

/*** End Local Variables ***
*******************************/

li = p_a.parentNode.parentNode;
ul = li.parentNode;

pop(p_a.href, Number(li.getElementsByTagName("div")[0].innerHTML));

items = ul.getElementsByTagName("li");
counter = 0;
itemCount = items.length

while (counter < items.length && items[counter].className != 'selected')
++counter;

if (counter < items.length)
items[counter].className = '';

li.className = 'selected';

return false;
}
</script>

<ul id="buttons" class="sortable boxy clickable">
<li>
<div class="num">132</div>
<div class="Authenticating"><a href="http://www.google.com" onclick="return LI_linkClicked(this);">James Herreid</a></div>
<div class="clear">&nbsp;</div>
</li>
<li class="selected">
<div class="num">84</div>
<div class="Authenticating"><a href="http://www.yahoo.com" onclick="return LI_linkClicked(this);">Daniel Thurgood</a></div>
<div class="clear">&nbsp;</div>
</li>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum