...

View Full Version : Multiple javascript event problem



itwasbo
12-18-2011, 07:35 PM
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..



<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>

Logic Ali
12-18-2011, 08:58 PM
You could supply the target elements with unique IDs which could be used to identify them, but presumably you want to avoid that.


<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>

xelawho
12-18-2011, 09:00 PM
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:



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";
}
}
}
}

itwasbo
12-18-2011, 10:57 PM
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.

xelawho
12-19-2011, 12:13 AM
hey - sorry for the bum steer... the more I read your question the less I understand what it is you're trying to do. :o
Glad you got it (almost) working :thumbsup:

itwasbo
12-19-2011, 12:16 AM
hey - sorry for the bum steer... the more I read your question the less I understand what it is you're trying to do. :o
Glad you got it (almost) working :thumbsup:

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.

Logic Ali
12-19-2011, 01:09 AM
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:

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum