...

View Full Version : Mutual Exclusion??



tunkKid
06-03-2009, 10:26 PM
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
06-03-2009, 11:12 PM
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
06-03-2009, 11:21 PM
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
06-03-2009, 11:25 PM
LOL. Yeah, what he said.

tunkKid
06-03-2009, 11:28 PM
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
06-03-2009, 11:49 PM
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
06-04-2009, 12:03 AM
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
06-04-2009, 12:05 AM
That code doesn't hid button1, but you can see how easy it is to add that.

tunkKid
06-04-2009, 12:30 AM
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
06-04-2009, 12:35 AM
Have to see the page in action.

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

tunkKid
06-04-2009, 12:38 AM
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
06-04-2009, 01:08 AM
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
06-04-2009, 01:22 AM
tunkKid:

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

Old Pedant
06-04-2009, 01:24 AM
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
06-04-2009, 01:24 AM
See, great minds really do run in the same gutters! LOL!

tunkKid
06-04-2009, 03:23 AM
venegal: your code:

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) showProj1();
else hideProj1();
}
Is great!! its doing exactly what I want, Except for making the images in the background invisible. So I need to hide the images during btnKickedClicked(). The Projects button is disabled and working great, but the images are def. still there when btnKickedClicked() is clicked.

As you can see here:http://kieranosullivan.com/portfolio/

Thanks for so much help guys!!

venegal
06-04-2009, 04:00 AM
Oh, you want those pictures to disappear. This will work:

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) {
hideProjects();
showProj1();
}
else {
showProjects();
hideProj1();
}
}


Of course, for the other buttons you don't want to write seperate functions; just change the ones you have a little, so you can pass in as an argument which button has been pressed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum