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

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

htmlcssflexbox

Breaking down a statement into individual elements within an array, incorporating keys alongside the elements within the array

let condition = "[AccNum]==true&&[AccNum]==[ARID]&&[AccNum]==aaaa || [ARID]!=true&&[DOB]&gt;[ARID] || [DOB]&gt;bbb&&[DOS]&gt;=[ARID]&&[DOS]&lt;[Gender]&&[66642]&lt;=cccc&&[66642] I ...

javascriptarrayssplit

Unraveling the Mysteries of Node.js Application Logging

We've been having smooth sailing with our Kube cluster on AWS, but there seems to be a recurring issue with our Node app crashing and generating repetitive logs from our instances... I've scoured the internet for solutions but haven't had m ...

javascriptnode.js

Is there a way to prevent users from selecting dates and times prior to today, as well as blocking out the hours of 9:00am

Users are required to select a date within the range of today's date and one month in the future, and a time between 9:00am and 9:00pm. How can I implement validation to ensure this? <div class="row"> <div class="col"> <label cl ...

javascriptangularjsperformance

Using Jquery's prependTo method will add a display:block property to

Can't find a solution to this issue. This is the code snippet in question: var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" /& ...

jquerycssprepend

How do I use React and Material-UI to efficiently display multiple tables from a complex JSON object containing multiple arrays of data?

Trying to come up with an innovative approach to generate a unique dynamic table component that can create individual tables based on the number of arrays in a dictionary object (essentially iterating through each array and generating a table). For my sce ...

javascriptreactjsmaterial-ui

Looking for a way to easily swipe through videos?

My mobile phone viewport displays a series of pictures and videos, with the swipeleft/right function enabled for browsing. However, I noticed that while the swipe feature works fine for images, it stops functioning when a video is displayed. Can anyone p ...

javascriptjqueryjquery-mobile

I'm curious about the correct method for updating a parent component using a shared service within the ngOnInit function in Angular version 13

There have been instances where I encountered a scenario multiple times, where I utilize a shared service within the ngOnInit of a component to update a value in another component, specifically its parent. This often leads to the well-known Error: NG0100: ...

javascriptangularangular-servicesangular-changedetectionangular13

Retrieve JSON and HTML in an AJAX request

I have multiple pages that heavily rely on JavaScript, particularly for sorting and filtering datasets. These pages typically display a list of intricate items, usually rendered as <li> elements with HTML content. Users can delete, edit, or add item ...

javascriptajaxjsonoptimization

Tips for preserving an HTML dynamic table in a database

I have a challenge where I am generating a dynamic HTML table using javascript. What is the best way to store this dynamic HTML table in a database using CodeIgniter? This is the code snippet for my input form: <table id="tb3" name="tb3"> & ...

javascriptphphtmlcodeigniter

Avoid duplicating the use of the same controller in a page to prevent mirroring each other

I have implemented MVC partial controls on my page twice to handle search functionality. Each partial control has its own controller for searching, resulting in my page having two controllers with the same name. <div ng-app="app" ng-controller="MainCon ...

javascriptangularjs

Displaying and Concealing Elements with AngularJS and Implementing Alternating Styles

Within my collection of div elements showcasing product information, there is a need to display or hide specific fields based on the product type. While this functionality works smoothly, we now aim to enhance readability by implementing alternating row st ...

cssangularjsangularjs-directive

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

I am trying to color every <td> element in a row of three columns with the same color using the following code: for (var i = 0; itr < $("td").length; i++) { $("td").eq(i).css("background-color", Colors[i]); } However, this code colors each i ...

javascriptjqueryhtmlhtml-tableconditional-statements

Using React js to transform objects into arrays for useState

Hey there! I'm currently working on a webshop demo project for my portfolio. I've encountered an issue while trying to fetch data from commerce.js. The data is in the form of objects, which are causing problems when I try to map them. I've a ...

javascriptreactjs

Vertical Orientation in HTML

Would appreciate some assistance on creating a vertical text with HTML similar to the example in the linked screenshot. It needs to be straightforward and vertically oriented. Check out the screenshot for reference ...

javascripthtmlcssvertical-text

Instead of logging the JSON file in the console, download it using $.getJson()

Is there a method to download a json file without using jQuery's $.getJSON() and having to log the callback function's argument? I would like to avoid manually typing it from the console.log due to its length. Is there an option to print it, eve ...

javascriptjqueryjson

What is the best way to retrieve a value from a deeply nested callback function?

I am currently using the mssql npm library and it's functioning well. However, I'm facing difficulty retrieving the recordset returned from the sub-level callback function. Could someone guide me on how to obtain the recordset when dealing with ...

javascriptnode.jssql-servernpmnext.js

Utilizing SASS in Eclipse for Java EE Development

Although I have already looked at this Stack Overflow question, it did not provide the solution I am seeking. As a Java Web Developer, I have been utilizing Less for my CSS pre-processing needs. However, I am now interested in transitioning to Sass due to ...

javacsseclipsesass

"Can you share some tips on successfully transferring an image I've uploaded from an HTML page to

Looking for help with passing my uploaded image to Flask. Although the HTML page successfully uploads the image, I am facing challenges in transferring that image as a request to Flask. This is particularly important for image prediction purposes, but unfo ...

pythonhtmlmachine-learningflask

Obtain a Compilation of Video Sources in an HTML5 Format

Hey there, I am using an HTML5 video. This is just an example <video width="320" id="video" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video1.mp4" type="video/mp4"> <source src="movie.ogg" typ ...

javascripthtml