Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Help with simple list arrow rotation

    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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    that's cool. is there a way to do it so you don't have to have the inline onclick on the H3 tag?

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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
    Last edited by wyclef; 05-15-2009 at 10:20 PM.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    woah... that just got a whole lot more complicated. ok, i will take a look through this code and try to make sense. thanks!

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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
    Code:
    window.onload = var oop=new Init('listroll');
    to the script but that didn't work. am i way off?

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ah, this seems to work.

    Code:
    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?
    Last edited by wyclef; 05-18-2009 at 10:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •