Mutual Exclusion??

[tunkKid]

So I have this code which basically toggles an image on and off:

var btnCounterProjects = 1;
function btnHandlerProjects() {
	if (btnCounterProjects++ % 2) showProjects();
	else hideProjects();
}

Simple. But now I have this function which will cause a different image to appear and Hide btnHandlerProjects().

var btnCounterKicked = 1;
function btnHandlerKickedShow() {
	if (btnCounterKicked++ % 2) showKicked();
	else hideKicked();
	hideProjects();
	btnCounterKicked = 1
	console.debug(btnCounterKicked);
   }

To hide btnHandlerKickedShow() I have this function which Hides btnHandlerKickedShow() and will then Show btnHandlerProjects()

var btnCounterKickedHide = 1;
function btnHandlerKickedHide() {
   if(btnCounterKickedHide == 1) {
      hideKicked();
      showProjects();
      console.debug("HIDEKICKED");
   } 
  }

My Question: When I call btnHandlerKickedShow() how can I make it so btnHandlerProjects() is Disabled or Locked while btnHandlerKickedShow() is called?? Otherwise a user can click on btnHandlerProjects() and the screen is filled with to many images.
Thanks!

[Old Pedant]

Ummm...I think you have stated your problem wrong.

how can I make it so btnHandlerProjects() is Disabled or Locked while btnHandlerKickedShow() is called??

The calling of btnHandlerKickedShow() surely takes only a few microseconds.

I have to assume you mean that you want btnHandlerProjects() disabled while the *STATE* of btnCounterLKicked is some value.

But I'm a bit mystified: In btnHandlerKickedShow() you *always* set the value of btnCounterKicked() back to 1. So what was the point in having that variable, in the first place??? Is it also manipulated by other code, someplace???

[venegal]

Here we go again:
Your code is confusing. Can you explain in words what you are after?

For example: "I have two buttons, one of them toggling the display of "Projects", the other one toggling the display of "Kicked"; I don't want them both showing at the same time though."

[Old Pedant]

LOL. Yeah, what he said.

[tunkKid]

I agree, there wasn't a need to reset the variable back to 1. It was not being manipulated by anything else.

So, button1 slides in a group of images. If you click on one of the images (button2) I want all those images to HIDE and One large image appears with Text. What I want now is if you click button1 it will not SHOW or Display all those images while you are viewing the result of button2.

[venegal]

If I am understanding you correctly, you are looking for something like this:

var btnCounterProjects = 1;
function btnHandlerProjects() {
	if ((btnCounterProjects++ % 2) && !(btnCounterKicked % 2)) {
		showProjects();
	} else hideProjects();
}

var btnCounterKicked = 1;
function btnHandlerKicked() {
	if (btnCounterKicked++ % 2) {
		btnHandlerProjects();
		showKicked();
	} else hideKicked();
}

where you can call btnHandlerKicked() instead of both btnHandlerKickedShow() and btnHandlerKickedHide().
Not tested though; it would be easier if you showed your site.

[Old Pedant]

There's a bug hiding in Venegal's solution. Do you see it??

Personally, I'd stop using counters when they really are just used to get true/false values. And I'd also use names that describe what is happening.

Then the code would be a lot clearer.

var showLargeImage = false;
var showKickedGroup = false;

function btnKickedClicked( )
{
    if ( showLargeImage ) return; // do NOTHING else
    showKickedGroup = ! showKickedGroup; // K.I.S.S.
    if ( showKickedGroup ) showKicked( );
    else                   hideKicked( );
}
function btnProjectsClicked( )
{
    showLargeImage = ! showLargeImage;
    if ( showLargeImage ) showProjects( );
    else                  hideProjects( );
}

The trouble with Venegal's code is that the "state" of the button btnCounterProjects is changed, even if the effect of it is disabled by the other state. And it's really hard to see that bug just because you are using counters, instead of sticking with simple boolean logic.

[Old Pedant]

That code doesn't hid button1, but you can see how easy it is to add that.

[tunkKid]

I agree with your boolean logic and the code seems much more effiecient. The button 1 or btnProjectsClicked( ) works great but I get no response from button 2 or btnKickedClicked( ). My previous code would make button 1 images Hide and showLargeImage but with this code I'm not getting any response?? Not exactly sure why

[Old Pedant]

Have to see the page in action.

No idea whether it is your goof or mine. Sorry.

[tunkKid]

http://kieranosullivan.com/portfolio/#
This is what i'm doing. If you click on projects you will see the images appear. Then if you click on the first image Kick Me! a new image appears and the others should disappear. While making the projects button useless.

[venegal]

Old Pedant:

Right, that should have been

if (!(btnCounterKicked % 2) && (btnCounterProjects++ % 2)) {

Nice catch.

And I should have gotten rid of those counters in the other thread, but they were so predominant there (more than 2 states for a simple toggle) that I didn't dare.

Anyway, thinking about it, those functions should really remember their states themselves, those global bools are giving me the creeps.

function btnProjectsClicked() {
	var self = arguments.callee;
	if (btnKickedClicked.isShown) return;
	if (self.isShown = self.isShown ? false : true) showProjects();
	    else hideProjects();
}
function btnKickedClicked() {
	var self = arguments.callee;
	if (self.isShown = self.isShown ? false : true) showKicked();
		else hideKicked();
}

[venegal]

tunkKid:

On the large image you got the handler onclick="showProj1();" where you should really call btnKickedClicked().

[Old Pedant]

But your link for Kick Me is doing this:
<li><a href="#" title="Kick Me!" class="btnProj1" onclick="showProj1();"></a></li>

and the code for showProj1() does just this:

function showProj1(){
$(".project1").show('normal');
}

so it's not even calling any of the other code. Not surprising that nothing useful happens.

[Old Pedant]

See, great minds really do run in the same gutters! LOL!