Web Analytics Made Easy -
StatCounter conditional Operators (toggled = !toggled)??? - CodingForum

Announcement

Collapse
No announcement yet.

conditional Operators (toggled = !toggled)???

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    = 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

    Comment


    • #3
      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

      Comment


      • #4
        See comments in red...
        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 ...

        Comment


        • #5
          https://developer.mozilla.org/en/Jav...ical_Operators

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

          Comment


          • #6
            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.

            Comment

            Working...
            X