...

View Full Version : Help with simple list arrow rotation



wyclef
05-15-2009, 05:30 PM
Hey, how could I take this

http://dynodealz.com/drop.html

and add a simple little arrow to the H3 tag that rotates when you click it?

vwphillips
05-15-2009, 06:20 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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function S(obj){
var img=obj.getElementsByTagName('IMG')[0];
if (img) img.src=img.src.indexOf('down')>-1?img.src.replace('down','up'):img.src.replace('up','down');
}
/*]]>*/
</script></head>

<body>
<div class="listroll" style="cursor:pointer;">
<h3 onclick="S(this);">Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>

<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 onclick="S(this);">Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 onclick="S(this);">Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>

<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 onclick="S(this);">Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>

</div>

</body>

</html>

wyclef
05-15-2009, 06:58 PM
that's cool. is there a way to do it so you don't have to have the inline onclick on the H3 tag?

wyclef
05-15-2009, 09:14 PM
when you click down on one, and dont click it up, then click another one, the first one you clicked doesnt reset itself... is there any easy fix to that? it's almost like it needs an else if type of thing to put it back to default state? the updated link...

http://dynodealz.com/drop1.html

vwphillips
05-16-2009, 09:06 AM
<!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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Init(cls){
var p=zxcByClassName(cls)[0];
var h3=p.getElementsByTagName('H3');
var lis=p.getElementsByTagName('LI');
this.ary=[];
for (var z0=0;z0<h3.length;z0++){
if (lis[z0]){
this.addevt(h3[z0],'click','Toggle',z0);
this.ary[z0]=[h3[z0].getElementsByTagName('IMG')[0]];
}
}
this.lst=false;
}

Init.prototype.Toggle=function(nu){
var ary=this.ary[nu];
if (this.lst&&this.lst!=ary) this.lst[0].src=this.lst[0].src.replace('up','down')
var img=ary[0];
if (img) img.src=img.src.indexOf('down')>-1?img.src.replace('down','up'):img.src.replace('up','down');
this.lst=ary;
}

Init.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
else o['on'+t]=o[f];
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

/*]]>*/
</script>

</head>

<body onload="var oop=new Init('listroll');">
<div class="listroll" style="cursor:pointer;">
<h3 >Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>

<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 >Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 >Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>

<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>
<h3 >Test<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></h3>
<ul>
<li>Nam ut hendrerit arcu. Proin ut fermentum ante. Suspendisse rhoncus vehicula sem, eget pulvinar nibh ullamcorper sit amet. Nam mattis orci id lectus mollis non fermentum dui sollicitudin. Donec convallis commodo eros eu molestie. Cras consequat felis ac elit tristique ut iaculis odio sollicitudin.</li>
</ul>

</div>

</body>

</html>

wyclef
05-17-2009, 08:52 PM
woah... that just got a whole lot more complicated. :) ok, i will take a look through this code and try to make sense. thanks!

wyclef
05-18-2009, 07:34 PM
that definitely worked. i guess since i've come this far i might as well look into how to remove the onload event from the body tag. i tried adding
window.onload = var oop=new Init('listroll'); to the script but that didn't work. am i way off?

wyclef
05-18-2009, 10:11 PM
ah, this seems to work.



window.onload = function() {
var oop=new Init('listroll');
}


but now i get an undefined error on the pages i'm not using the script on because it's looking for the H3 and LI that only appear on some of the pages. What now? do I have to attach that listroll class to the script so it will only look at H3s and LIs within the listroll class?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum