ReactJS: Toggle On Off button

This entry is part 7 of 35 in the series React JS

https://codepen.io/gaearon/pen/xEmzGg?editors=0010

Handling events in React.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

jQuery: Toggle an image

This entry is part 21 of 33 in the series jQuery Tutorial

Here I show an example where you can toggle an image using toggle().

Clicking inside the <div> which I have defined with a border will toggle the image to show and hide in the screen.

hide demo

<!doctype html>
<html>
<head>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        $(function () {
            $('div').click(function () {
                $('img').toggle('slow');
            });
        });
    </script>
</head>
<body>

<div><img src="//codecrawl.com/code/images/ushuaia1.jpg"></div>

</body>
</html>

The syntax for toggle is:

.toggle(duration [,easing] [,function()])

Duration:  A string or number determining how long the animation will run.

Easing:  A string indicating which easing function to use for the transition.

Function():  A function to call once the animation is completed, this is also known as callback function.

jQuery UI & Effects: Toggle class

This entry is part 2 of 10 in the series jQuery UI Effects

jQuery UI Effects – toggleClass Demo

Toggle class(es) on elements while animating with style changes.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - toggleClass Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').toggleClass('newClass', 1000);
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='newClass ui-corner-all'>
        Changing from one class to another.
    </div>
</div>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

When you first click on the button, the newClass will be removed.  Clicking on the button again will add the newClass back to the box.

jQuery UI & Effects: Toggle

This entry is part 4 of 10 in the series jQuery UI Effects

jQuery UI Effects – Toggle Demo

Display or hide elements using custom effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Toggle Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
            width: 240px;
            height: 135px;
            padding: 0.4em;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            // run the currently selected effect
            function runEffect() {
                // get effect type from
                var selectedEffect = $('#effectTypes').val();

                // most effect types need no options passed by default
                var options = {};
                // some effects have required parameters
                if (selectedEffect === 'scale') {
                    options = { percent: 0 };
                } else if (selectedEffect === 'size') {
                    options = { to: { width: 200, height: 60 } };
                }

                // run the effect
                $('#effect').toggle(selectedEffect, options, 500);
            };

            // set effect from select menu value
            $('#button').click(function () {
                runEffect();
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-widget-content ui-corner-all'>
        <h3 class='ui-widget-header ui-corner-all'>Toggle</h3>

        <p>
            Please do not hide me, my friend.
        </p>
    </div>
</div>

<select name='effects' id='effectTypes'>
    <option value='blind'>Blind</option>
    <option value='bounce'>Bounce</option>
    <option value='clip'>Clip</option>
    <option value='drop'>Drop</option>
    <option value='explode'>Explode</option>
    <option value='fold'>Fold</option>
    <option value='highlight'>Highlight</option>
    <option value='puff'>Puff</option>
    <option value='pulsate'>Pulsate</option>
    <option value='scale'>Scale</option>
    <option value='shake'>Shake</option>
    <option value='size'>Size</option>
    <option value='slide'>Slide</option>
</select>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

jQuery Mobile: Flip toggle switch

This entry is part 70 of 73 in the series jQuery Mobile

We look at how to build flip toggle switches.  

Flip toggle switches are useful for users to set the App settings, especially if you want to allow users to turn on or off certain features.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Flip Toggle Switch</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='flip1'>Flip toggle switch:</label>
            <select id='flip1' name='flip1' data-role='slider'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip2'>Flip toggle switch with theme:</label>
            <select name='flip2' id='flip2' data-role='slider' data-track-theme='b' data-theme='b'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip3'>Mini flip toggle switch:</label>
            <select name='flip3' id='flip3' data-role='slider' data-mini='true'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code