Is it possible to direct the user to a particular link upon swiping to unlock?

Hello everyone, I could use some assistance with this code. I am looking to redirect someone to a specific page when they swipe to unlock and automatically transfer them to another page when the swipe ends.

Any help is greatly appreciated. Thank you!

$(function () {
    $('.opened').hide();
    $('.closed').draggable({
        axis: 'x',
        containment: 'parent',
        drag: function (event, ui) {
            if (ui.position.left > 230) {
            }
        },
        stop: function (event, ui) {
            if (ui.position.left < 230) {
                $(this).animate({ left: 17 });
            }
            if (ui.position.left < 15) {
                $(this).animate({ left: 17 });
            }
            if (ui.position.left > 230) {
                $(this).animate({ left: 230 }, function () {
                    $(this).hide().animate({ left: 17 });
                    $('.opened').show();
                    $('.padlock-loop').addClass('padlock-open');
                });
            }
        }
    });
    $('.opened').draggable({
        axis: 'x',
        containment: 'parent',
        drag: function (event, ui) {
            if (ui.position.left < 5) {
            }
        },
        stop: function (event, ui) {
            if (ui.position.left > 15) {
                $(this).animate({ left: 230 });
            }
            if (ui.position.left > 230) {
                $(this).animate({ left: 230 });
            }
            if (ui.position.left < 15) {
                $(this).animate({ left: 17 }, function () {
                    $(this).hide().animate({ left: 230 });
                    $('.closed').show();
                    $('.padlock-loop').removeClass('padlock-open');
                });
            }
        }
    });
});
//@ sourceURL=pen.js
body {
  background: #5b8052;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  font-size: 0.8em;
}

.padlock {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  margin-top: -125px;
  margin-left: -30px;  
}

.padlock-loop {
  position: absolute;
  display: block;
  top: 8px;
  margin-bottom: 8px;
  margin-left: 4px;
  height: 30px;
  width: 40px;
  border-top: 6px solid #4D7046;
  border-left: 6px solid #4D7046;
  border-right: 6px solid #4D7046;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.padlock-open {
  top: 0;
}

.padlock-body {
  position: absolute;
  display: block;
  top: 44px;
  width: 60px;
  height: 60px;
  background: #4D7046;
}

.padlock:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 6px;
  left: 4px;
  top: 36px;
  background: #4D7046;
}

.padlock-body:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 26px;
  height: 8px;
  width: 8px;
  background: #3A5933;
  border-radius: 50%; 
}

.padlock-body:after {
  content: "";
  position: absolute;
  top: 22px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 16px solid #3A5933;
  
}

.slider-wrapper {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  margin-left: -140px;
  background: #496942;
  /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#507348), to(#5b8052));
  background-image: -webkit-linear-gradient(top, #507348, #5b8052); 
  background-image:    -moz-linear-gradient(top, #507348, #5b8052);
  background-image:     -ms-linear-gradient(top, #507348, #5b8052);
  background-image:      -o-linear-gradient(top, #507348, #5b8052);*/
  border-radius: 999px;
}

.slider-shape {
  position: relative;
  padding-left: 10px;
  width: 280px;
  height: 50px;
  border-radius: 999px;
  overflow: hidden;  
  /*box-shadow: inset 0 2px 11px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.55);*/
}


.open {
  display: block;
  position: absolute;
  left: 65px;
  width: 150px;
  height: 50px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 50px;
  text-transform: uppercase;
}

.close {
  display: block;
  position: absolute;
  left: 0;
  margin-left: -120px;
  height: 50px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 50px;
  text-transform: uppercase;
}

.slider-circle {
  margin-top: 4px;
  height: 42px;
  width: 42px;
  background: #5b8052;
  border-radius: 50%;
  /*box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.7);*/
  cursor: move;
}

.closed {
  position: absolute;
  left: 17px;
}

opened{
  position: absolute;
  left: 230px; 
}
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/waylaid/pen/BKIkj" />

<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
</head><body>
<div class="padlock">
  <span class="padlock-loop"></span>
  <span class="padlock-body"></span>
</div>
  
<div class="slider-wrapper">
  <div class="slider-shape">
    
    <div class="slider-circle closed">
      <span class="open">Slide to unlock</span>
      <span class="close">Slide to lock</span>
    </div>
    
    <div class="slider-circle opened">
      <span class="open">Slide to unlock</span>
      <span class="close">Slide to lock</span>
    </div>  
  </div>  
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

javascripthtmlcss

Answer №1

Here is a way to trigger an action based on position:

if (ui.position.left > 230) {
                $(this).animate({ left: 230 }, function () {
                  window.open("newpage.html");
                    $(this).hide().animate({ left: 17 });
                    $('.opened').show();
                    $('.padlock-loop').addClass('padlock-open');

                });

You can specify the path to the new page you want to open in place of "newpage.html".

Alternatively, you can use one of these methods:

window.location.href = "newpage.html"

Or

$(this).load("newpage.html");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm encountering an issue where the data in my personalDeatail model's add value is not updating automatically. Can someone please help me

I've been struggling to automatically update the data in model personalDetail.add value when adding two column data. The added data appears correctly in the input box, but it's not updating in personalDetail.add. What am I missing here? Help need ...

javascripthtmlangularjs

Transforming JavaScript array UNIX timestamps into JavaScript Date objects

Is there a way to convert UNIX epoch integers into JavaScript Date objects using jQuery? Attempting to pass a large JSON array generated by PHP to Highmaps.JS, which works almost great. However, Highmaps expects a Date object and Date objects aren't ...

javascriptphpjqueryarraysjson

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

javascripthtml

Tips on customizing image borders/masks with hover effects

Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...

javascriptcssreactjs

Guide on extracting JSON data from specific nodes using d3.js

Just starting out with d3.js and following the example of a simple molecule created by d3 at http://bl.ocks.org/mbostock/3037015. I have a couple questions: 1. How can I select multiple nodes within the molecule structure? 2. Once selected, how do I ext ...

javascriptjsonhtmld3.js

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

javascripthtmlvalidationdomradio-button

Fixing the Material UI upgrade error: "Make sure you have the right loader for this file type."

As a beginner in React, Webpack, Babel, and web development, I have been tasked by my company to upgrade the material-ui version for a dropdown search component. The current version used in the project is "1.0.0-beta.43", and I decided to start by upgradin ...

javascriptreactjswebpackmaterial-uibabeljs

Sharing data between promises in Node.jsExplanation: In Node.js, passing values

Can someone assist with passing an object that I am creating step by step using promises with firebase? I would like to know if there is a more efficient way to construct the object without passing it through the promise chain. Below is the code snippet I ...

javascriptnode.jspromisefirebase-realtime-database

Having trouble releasing the package on npm platform

I'm facing difficulties in publishing a public package to npm. Despite creating an organization, I'm unable to figure out how to add a new package. Any assistance on this matter would be greatly appreciated. ...

javascriptnode.jsnpm

uncovering the secrets of tree shaking when using an npm package in conjunction with webpack

Imagine having an npm package where all components are exported from a single index.js file: export * from './components/A'; export * from './components/B'; Now consider another package that relies on this initial package: import {A} ...

javascriptnpmwebpack

do not continue loop if promise is rejected in AngularJS

I've attempted multiple methods, but still haven't found a solution to this issue. Within my code, there is a method called iterator that returns a promise; this method runs in a loop x number of times. If the iterator function returns a rejecte ...

javascriptangularjsfor-loopangular-promise

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Currently, I am still a beginner in Angular and learning Angular 8. I am in the process of creating a simple API communication service to retrieve the necessary data for display. Within my main component, there is a sub-component that also needs to fetch ...

javascriptangulartypescriptrxjs

Implement a mouseover event on the axis label using D3.js and JavaScript

Is it possible to trigger a mouseover event on the y-axis label in a chart? For instance, let's say we have a scatter plot with labels "area1", "area2", and "area3" on the y-axis. When a user hovers over the label "area1", a tooltip should appear disp ...

javascriptd3.js

Tips for Choosing Certain List Items in a Responsive Bootstrap Navigation Menu for WordPress

I've put together a sleek bootstrap navbar menu for WordPress. If you want to check out the menu design, you can view it by clicking on this link: here There are still some tweaks that need to be made though. Specifically, I need to add a box around ...

jqueryhtmlcsswordpresstwitter-bootstrap

The Server-Side Rendered page is experiencing inconsistencies in rendering

I am currently working on a straightforward NextJS project with just one page. The application is configured to utilize redux, next-redux-wrapper, and redux thunk. It is important that the page always undergo server-side rendering. Here is an example of h ...

javascriptreactjsnext.js

Angular Recursive Bootstrap Breadcrumb Guide

I am looking to implement the bootstrap breadcrumb component (https://getbootstrap.com/docs/4.0/components/breadcrumb/) in my project. My goal is to use the breadcrumb to show the entire path to the current directory within a component that resembles a di ...

cssangularbootstrap-4

I am attempting to rebuild Vuex's Getting Started example by utilizing multiple components, yet I am struggling to understand how to call root methods from within these components

The project I'm working on can be found here. It is a simple one, but for the purpose of learning, I divided it into index and four js files (parent, child, root, and store). My challenge lies in figuring out how to call the increment and decrement ro ...

javascriptvue.jsvuex

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

htmlangulartypescript

Unable to manipulate or customize the V-slot component

I recently implemented the v-flip feature on my Nuxt webpage, resulting in the following template: <div class="about__cards"> <vue-flip class="about__single-card" active-click width = "350px" height="450px"> <template v-slot:front> ...

cssvue.jsnuxt.jsv-slot

Incorporating a setup file into my JavaScript project

In my JavaScript project, I have both frontend and backend codes (NodeJS). Here is the folder structure for my production environment: /prod /server sourceCode1.js sourceCode2.js ... sourceCodeN.js index.js ...

javascriptnode.jsexpressconfigconfiguration-files