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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple javascript event problem

    Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative..

    Code:
    <script language="javascript"> 
    function toggle() {
    	var ele = document.getElementById("commpopup");
    	if(ele.style.display == "block") {
        	ele.style.display = "none";
      	}
    	else {
    		ele.style.display = "block";
    	}
    } 
    </script>
    
    <div class="togglecomment">
         <div class="popup" id="commpopup">
              <div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
         </div>
         <div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
    </div>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You could supply the target elements with unique IDs which could be used to identify them, but presumably you want to avoid that.

    Code:
    <script type="text/javascript">
    
    function toggle( elem )
    {
      while( elem && elem.className != "togglecomment" )
        elem = elem.parentNode;
    
      if( elem )
      {
        elem = elem.getElementsByTagName( '*' );
    
        for( var i = 0; elem[ i ]; i++ )
          if( /\bpopup\b/.test( elem[ i ].className ) )
            ( elem = elem[ i ] ).style.display = ( elem.style.display != 'none' ? 'none' : 'block' );
      }
    
      return false;
    }
    
    </script>
    
    <div class="togglecomment">
         <div class="popup" id="commpopup">
              <div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
         </div>
         <div class="button"><a href="#" onclick="return toggle(this);"><img src="images/comment_btn.jpg" />XXX</a></div>
    </div>

  • Users who have thanked Logic Ali for this post:

    itwasbo (12-18-2011)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    untested, but it should be something like this, looping through all the divs, checking if their class name is "popup" then performing the action, rather than just finding one with the right id and doing it:

    Code:
    function toggle() {
    	var ele = document.getElementsByTagName("div");
    	for(var i=0;i<ele.length;i++) {
    	if (ele[i].className=="popup") {
    	if(ele[i].style.display == "block") {
        	ele[i].style.display = "none";
      	}
    	else {
    		ele[i].style.display = "block";
    			}
    		}
    	}	
    }

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tried both scripts, have some feedback.. Oh first of all thanks for your help!

    Logic - The script is almost perfect except for the fact that I have to double click it. Is it possible so that all I would have to do is click once? Also is there some way that when I click outside of it or on another trigger that the other one goes away?

    Xelawho - Thanks for the help, but when I click either trigger it activates every trigger haha.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    hey - sorry for the bum steer... the more I read your question the less I understand what it is you're trying to do.
    Glad you got it (almost) working

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    hey - sorry for the bum steer... the more I read your question the less I understand what it is you're trying to do.
    Glad you got it (almost) working
    No worries xelawho.. ya I just want to make it so that if I have multiple selectors on one page the one I click is the one that displays.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by itwasbo View Post

    Logic - The script is almost perfect except for the fact that I have to double click it. Is it possible so that all I would have to do is click once?
    That's determined by the initial display style setting, which may be different to what you've shown. The example as shown would not have to be double-clicked. If your stylesheets hide the element initially, you need this:
    Code:
    function toggle( elem )
    {
      while( elem && elem.className != "togglecomment" )
        elem = elem.parentNode;
    
      if( elem )
      {
        elem = elem.getElementsByTagName( '*' );
    
        for( var i = 0; elem[ i ]; i++ )
          if( /\bpopup\b/.test( elem[ i ].className ) )
            ( elem = elem[ i ] ).style.display = ( elem.style.display == 'block' ? 'none' : 'block' );
      }
    
      return false;
    }
    Also is there some way that when I click outside of it or on another trigger that the other one goes away?
    If you mean 'click to display one and any other currently visible is hidden', then that's an entirely different routine.


  •  

    Posting Permissions

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