Search results

Enable ripple for Switch label in JavaScript (ES5) Toggle Switch Button control

30 Jul 2021 / 1 minute to read

By default, label with ripple effect is not available in Switch. You can achieve this using rippleMouseHandler method.

The following example illustrates how to enable ripple effect for labels in Switch component.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true)

var switchObj = new ej.buttons.Switch({ checked: true });
switchObj.appendTo('#switch1');

// Function to handle ripple effect for Switch with label.
document.querySelector('.lSize label').addEventListener('mouseup', rippleHandler);
document.querySelector('.lSize label').addEventListener('mousedown', rippleHandler);

function rippleHandler(e) {
    var rippleSpan = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
    if (rippleSpan) {
        ejs.buttons.rippleMouseHandler(e, rippleSpan);
    }
}
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Switch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <table class="size">
            <tbody><tr>
                <td class="lSize"><label for="switch1">USB Tethering</label></td>
                <td>
                    <input type="checkbox" id="switch1">
                </td>
            </tr>
        </tbody></table>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
    visibility: hidden;
    margin-left: 10px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

.e-switch-wrapper {
  margin-top: 18px;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  padding-top: 24px;  
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

.size .lSize label{
  cursor: pointer;
  user-select: none;
}