Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Grid Opacity Slider">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    
</head>
<body class="body">
     <div class="devtools">
         <div data-tooltip="Tooltip" class="opacity-val"></div>
         <input type="range" name="opcityslider" step="1" min="1" max="100" value="50" id="opacitySlider" class="opacityslider">
         <label for="showGrid">
             <input type="checkbox" checked name="showgrid" role="switch" id="showGridCheck" class="show-grid-checkbox">
             Grid overlay anzeigen
         </label>
    </div>
    <section class="container">
        <div class="grid" id="grid">
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
            <div class="grid-column"></div>
        </div>
    </section>
</body>
</html>
 
console.clear();
​
    function changeOpacity(event){
        const opacityVal = event.target.value / 100;
​
        //get all dev grid columns.
        let columns      = document.querySelectorAll('.grid-column');
        let rangeText    = document.querySelector('.opacity-val');
​
        columns.forEach((column, index) => {
            column.style.opacity = opacityVal;
            console.log(opacityVal);
        });
​
        rangeText.innerHTML = opacityVal;
        rangeText.style.transform = 'translate(' + opacityVal * 100 + '%, 3px)';
    
        console.log('changeOpacity fired');
    }
​
    function showOpacityGrid() {
        const showGridCheck = document.getElementById('showGridCheck');
        const grid          = document.getElementById('grid');
​
        if (showGridCheck.checked) {
            grid.style.display = 'grid';
            console.log('is clicked grid');
        } else {
            grid.style.display = 'none';
            console.log('is clicked none');
        }
    
        console.log('showOpacityGrid fired');
    }
​
document.addEventListener('DOMContentLoaded', (event) => {    
    const opacitySlider = document.getElementById('opacitySlider');
    opacitySlider.addEventListener('input', changeOpacity);
​
    const showGridCheck = document.getElementById('showGridCheck');
    showGridCheck.addEventListener('click', showOpacityGrid);
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers