Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts

    conditional Operators (toggled = !toggled)???

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

    Code:
    <!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 + "&nbsp;&nbsp;&nbsp;" + disp + '</b><br /> Current Time : <b>'   + instance + "&nbsp;&nbsp;&nbsp;" + 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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    = 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

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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
    Code:
    var height = (toggled = !toggled) ? maxheight: minheight;
    you assign(!) the negated value of toggled back to toggled
    Is that right?
    Does that also mean
    Code:
    (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

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    See comments in red...
    Quote Originally Posted by tinfanide View Post
    ...
    !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 ...

  • Users who have thanked jmrker for this post:

    tinfanide (08-20-2011)

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    https://developer.mozilla.org/en/Jav...ical_Operators

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

  • Users who have thanked Logic Ali for this post:

    tinfanide (08-20-2011)

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    https://developer.mozilla.org/en/Jav...ical_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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •