conditional Operators (toggled = !toggled)???

tinfanide

08-20-2011, 09:32 AM

I've got a slide toggle script online and have got just one bit that I cannot figure out why.

What is (toggled = !toggled)? What does it mean?
Does that mean toggled = false? But I tested it, it seems not like that.

And once the slide is toggled, it should use the minheight.
Then the condition for var Height must be the opposite of (toggled = !toggled). Then what is (toggled = !toggled) like? Is that like (toggled != !toggled)?

<!DOCTYPE html>
<html>
<head>
<title>Avinash</title>

<style>
#slider {
margin:0px auto;
padding:0px;
width:400px;
border:1px solid #000;
background:#0f0;
height:0px;
overflow:hidden;
}
</style>
<script>

var minheight = 0;
var maxheight = 1000;
var time = 1000;
var timer = null;
var toggled = false;

window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px';
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight: minheight;

var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init;
if(instance < time ) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + "   " + disp + '</b><br /> Current Time : <b>' + instance + "   " + pos + '</b>';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' :' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
},1);
};
};
</script>
</head>
<body>
<h1> Toggle Slide </h1>
<input type="button" id="slide" value =" Slide Down "/>
<span id="log" style="position:absolute; left:10px; top:150px;"></span>
<br />
<div id="slider">
content goes here
</div>
</body>
</html>

devnull69

08-20-2011, 09:42 AM

= is the assignment operator and not the comparison operator (which is ==)

So you assign(!) the negated value of toggled back to toggled. So you toggle the value of "toggled" from true to false and backwards :-)

The result (the new value of toggled) is then the "condition" of the ternary operator (condition)?x:y

tinfanide

08-20-2011, 09:55 AM

So you assign(!) the negated value of toggled back to toggled. So you toggle the value of "toggled" from true to false and backwards :-)

The result (the new value of toggled) is then the "condition" of the ternary operator (condition)?x:y

var height = (toggled = !toggled) ? maxheight: minheight;

you assign(!) the negated value of toggled back to toggled

Is that right?
Does that also mean
(toggled = false)
!toggled equals what? Very confusing...

And I notice toggled is assigned globally as false
and I typed typeof toggled and !toggled
and it returns boolean

So first of all toggled = false
When the button is clicked, it comes to (toggled = !toggled)
Then does that mean toggled = false
this matches the ternary condition
then the browser reads height = maxheight

Then how about when it is toggled, the element height reaches the maxheight
Which line of scripts turn the toggled variable back to true
to let height be minheight
That is what sounds most confusing to me

jmrker

08-20-2011, 02:39 PM

See comments in red...
...
!toggled equals what? Very confusing

So first of all toggled = false
OK, original status.

When the button is clicked, it comes to (toggled = !toggled)
Then does that mean toggled = false
No, it means toggled = true (!toggled is [not false])

this matches the ternary condition
then the browser reads height = maxheight
Yes, because the result of the toggle = !toggle assignment is TRUE.

Then how about when it is toggled, the element height reaches the maxheight
Which line of scripts turn the toggled variable back to true
to let height be minheight
Same logic as above but with original value of toggle is now TRUE
Changes to FALSE with the assignment
Selects minheight because ternary test results is FALSE
That is what sounds most confusing to me
Clear as mud, but it covers the ground ...:D

Logic Ali

08-20-2011, 04:13 PM

https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#Logical_Operators

toggled = !toggled means toggled is assigned the boolean opposite of its current boolean value.

tinfanide

08-20-2011, 04:46 PM

https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#Logical_Operators

toggled = !toggled means toggled is assigned the boolean opposite of its current boolean value.

Thanks a lot. The MDN documentation on JS acutally has just opened my eyes.
there are a lot more than W3schools tutorials covered. Scary... for the operators, too much at a glance.

Shortly before ya guys replied, I've used valueOf and console.log to check the boolean and I found the value of toggled varied at different times. It's strange.

I was unable to ask the author. That's my first thought, though.
I got the scripts when searching tutorials on accordion online and found the scripts in Stack Overflow where the author didn't include a way to contact him/her... That was why I visited here and asked.