jQuery if/else statements?

[suhaildawood]

I am having some trouble with this code. I want have an onclick function on a div and I want to call this function. Only the 'if' section of the code works. If the #about opacity is anything other than 0.47, it still executes the 'if' code, but not the 'else'

function opacityabout() {
		if ($('#about').css("opacity", "0.47")) {
			$('#about').css("opacity", "1");
			$('#home').css("opacity", "0.47");
			$('#right').css("-webkit-transform", "rotate(180deg)");
		}
		else {
			$('#about').css("opacity", "0.47");
			$('#home').css("opacity", "1");
			$('#right').css("-webkit-transform", "rotate(180deg)");
		}
		}

My HTML is set up like this:

<div id="right" onclick="opacityabout()"> </div>

Thanks

[pritaeas]

Try:

if ($("#about").css("opacity") == 0.47)
{
}
else
{
}

With a value it sets, without it gets.

[suhaildawood]

Hi, thanks for your reply. Unfortunately, it still does not work. the #right div rotates, but the #home and #about are unchanged. Also, if you click it again nothing happens.

[Airshow]

I think the main problem is setting the opacity values to strings. Should be numeric values 0.47 , 1 not "0.47" , "1" .

But there's another potential problem that css opacity values are not guaranteed, in all browsers, to read back from the DOM at exactly the same value they were set to. Maybe you would get away with it, maybe not.

My preferred solution would be to attach the click function in javascript, not in HTML, and to test a boolean instead of a css opacity value.

Something like this should do it:

$(function(){
	var opacities = [0.47, 1];
	$('#right').click(function() {
		var op = $('#about').data('opaque');
		$('#about').data('opaque', !op).css("opacity", opacities[op?0:1]);
		$('#home').css('opacity', opacities[op?1:0]);
		$(this).css('-webkit-transform', 'rotate(180deg)');
	});
	$('#about').data('opaque',true).css("opacity", opacities[1]);//intialise #about
	$('#home').css('opacity', opacities[0]);//intialise #home
});

I'm not sure I have initialised #about and #home the right way round. If not, then change the last two lines to:

$('#about').data('opaque',false).css("opacity", opacities[0]);//intialise #about
	$('#home').css('opacity', opacities[1]);//intialise #home

Airshow

[Troy III]

I am having some trouble with this code. I want have an onclick function on a div and I want to call this function. Only the 'if' section of the code works. If the #about opacity is anything other than 0.47, it still executes the 'if' code, but not the 'else'

function opacityabout() {
		if ($('#about').css("opacity", "0.47")) {
			$('#about').css("opacity", "1");
			$('#home').css("opacity", "0.47");
			$('#right').css("-webkit-transform", "rotate(180deg)");
		}
		else {
			$('#about').css("opacity", "0.47");
			$('#home').css("opacity", "1");
			$('#right').css("-webkit-transform", "rotate(180deg)");
		}
		}

My HTML is set up like this:

<div id="right" onclick="opacityabout()"> </div>

Thanks

Your statement: if ($('#about').css("opacity", "0.47")) { will always return true.
That's because it's a statement not a conditional. It's the same as stating "if(document)"

The "if" clause will only convert your statement into a boolean value, which happens to be true. Therefore your 'else' clause will never execute. You need a get-er, not a set-er, for your conditional.

I never use jQuerry,
so all I can offer is pure JavaScript solution. Which includes my cS reader method:

cS=
/*b.b. Troy III p.a.e.*/
function(e){return getComputedStyle(e,0)||e.currentStyle}

Therein your working conditional would look something like this:

if( cS($('#about')).opacity <= 0.47 ){...

[suhaildawood]

Thanks everyone for replying! Airshow, your solution with the opacities worked perfectly! Thanks. Now, there is a little issue with the rotating. When you click the #right div once, it rotates 180, but after that, onclick, just the opacities alternate and the rotate does not happen.
Thanks again

[Airshow]

Suhail,

I'm not sure how css('-webkit-transform', 'rotate(180deg)') works.

If it performs a first rotate(180deg) then sticks there, then I guess it must work relative to the original orientation, not relative to current position.

Is so, then this might work:

...
$(this).css('-webkit-transform', op?'rotate(180deg)':'rotate(0deg)');
...

You may need to swap the 'rotate(180deg)' with 'rotate(0deg)' to get it working in the correct sense.

'rotate(0deg)' may simplify to 'rotate(0)'.

Airshow

[suhaildawood]

Yes! Thanks SO much airshow! It finally works. Now, i'm going to go over how you solved the problem and learn from it - I wish I was as good with javascript as you! Thanks again :)

[Airshow]

Suhail,

Here's a version with a few more comments:

$(function(){
	var opacities = [0.47, 1];//define value once
	$('#right').click(function() {
		var op = $('#about').data('opaque');//read current 'opaque' setting
		$('#about').data('opaque', !op).css("opacity", opacities[op?0:1]);//toggle #about's opacity
		$('#home').css('opacity', opacities[op?1:0]);//toggle #home's opacity, in opposite sense from #about
		$(this).css('-webkit-transform', op?'rotate(180deg)':'rotate(0deg)');//toggle #right's rotation
	});
	$('#about').data('opaque',true).css("opacity", opacities[1]);//intialise #about
	$('#home').css('opacity', opacities[0]);//intialise #home
});

Good luck

Airshow

[suhaildawood]

Thanks so much!