Swipe Button with Javascript

Question

I really am struggling to put a swipe functionality on my toggle button. I have tried hammer.js, jQuery Mobile and now I am trying to use regular javascript. I really need some help and guidance on this.. I am going crazy. My toggle button toggles between showing and hiding two divs. My toggle button is here: My Toggle Button

$("[name=toggler]").click(function () {
    $(".toHide").hide();
    var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
    $("#" + toShow).toggle(1);
});

/*Toggle*/
.toggle-label {
    position: relative;
    display: block;
    width: 300px;
    height: 40px;
    /*border: 1px solid #808080;
    */
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
    -webkit-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
}

.toggle-label input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.toggle-label input[type="checkbox"] + .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f4f1f0;
    /*green*/
    transition: background 150ms linear;
    border-radius: 20px;
}

.toggle-label input[type="checkbox"]:checked + .back {
    background: #f4f1f0;
    /*orange*/
}

.toggle-label input[type="checkbox"] + .back .toggle {
    display: block;
    position: absolute;
    content: " ";
    width: 50%;
    height: 100%;
    transition: margin 150ms linear;
    /* border: 1px solid #808080;
    */
    border-radius: 20px;
    margin-top: -15px;
    margin-left: 150px;
    background: #f26922;
}

/*inside toggle */
.toggle-label input[type="checkbox"]:checked + .back .toggle {
    margin-left: 2px;
    margin-top: -15px;
    background-color: #f26922;
}

.toggle-label .label {
    display: block;
    position: absolute;
    width: 50%;
    color: #9fa1a4;
    text-align: center;
    font-size: 16px;
    margin-top: -20px;
}

.toggle-label .label.on {
    left: 0px;
    font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label .label.off {
    right: 0px;
    margin-top: -35px;
    font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label input[type="checkbox"]:checked + .back .label.on {
    color: #fff;
}

.toggle-label input[type="checkbox"] + .back .label.off {
    color: #fff;
}

.toggle-label input[type="checkbox"]:checked + .back .label.off {
    color: #9fa1a4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="toggle-label toggler" id="toggle">
    <input id="rdb1" type="checkbox" name="toggler" checked="true" />
    <span class="back">
        <span class="toggle"></span>
        <span class="label on">Option One</span>
        <span class="label off">Option Two</span>
    </span>
</label>

<div id="blk-1" class="toHide">
    Content One
</div>

<div id="blk-2" class="toHide" style="display: none;">
    Content Two
</div>

I tried enqueuing hammer.js in my PHP file but it just wasn't working. I tried jQuery mobile and it made my styles slightly off... Just really looking for a simple way to just swipe this button on mobile. For what it's worth I am also using Wordpress and a custom theme.

I have also tried this example but keep getting this error:

Uncaught TypeError:

 Cannot read property 'addEventListener' of null
    at swipe (scripts.js:72)
    at scripts.js:75

I finally got something to "work" the console states when I am swiping and not swiping, but still need to focus in on my button, any tips?

 $(function() {
   $(document).on('click touchstart', '[name=toggler]', function() {
   $('.toHide').hide();
  var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
   $("#" + toShow).toggle(1);
});
});


    
    let isSwiping = false;
    
    document.getElementById('swipe').addEventListener('mousedown', () => {
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('mousemove', () => {
      this.isSwiping = true;
    });
    
    document.getElementById('swipe').addEventListener('mouseup', e => {
      if (this.isSwiping && e.button === 0) {
        console.log('dragging');
      } else {
        console.log('not dragging');
      }
    
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('touchstart', () => {
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('touchmove', () => {
      this.isSwiping = true;
    });
    
    document.getElementById('swipe').addEventListener('touchend', e => {
      e.preventDefault();
    
      if (this.isSwiping) {
        console.log('swiping');
      } else {
        console.log('not swiping');
      }
    
      this.isSwiping = false;
    });

Will it help you? - https://codepen.io/gpressutto5/pen/NjJobG?editors=1010 — s.kuznetsov, Apr 08 '21 at 18:27

score 0 · Answer 1 · answered Apr 09 '21 at 04:09

Not an exact answer, but a link to a codepen which may help you. I have used in the past, as the mobile swipe is very smooth.

https://codepen.io/pixelmediahub/pen/poRdZeW

// Swipe Forward
        $(".sp-panel-set").on("swipeleft", function(event){
        
            i+=1;
            
            if (i < 0 ){
                i = panelAmount - 1;
            }
            
            if (i >= panelAmount) {
                i = 0;
            }
        
            var pos=(i*windowWidth);
            $(".sp-panel-set").css("left", -pos + "px");
            });
    
    // Swipe Backward
            $(".sp-panel-set").on("swiperight", function(event){
            
            i-=1;
            
            if (i < 0 ){
                i = panelAmount - 1;
            }
            
            if (i >= panelAmount) {
                i = 0;
            }
            
            var pos=(i*windowWidth);
            $(".sp-panel-set").css("left", -pos + "px");
            });
    
});

Swipe Button with Javascript

1 Answers1