CODEWITHSUNDEEP
javascriptjqueryiphoneslider
ExodusNicholas
ExodusNicholas

Reputation: 1644

Jquery: iphone "slide to unlock"

I want to create a jquery script that works like the iphones "slide to unlock" bar. i want to have 2 divs, the container, and the slider. i want to be able to drag the slider to the right, and when the slider reaches the very right of the container, have it do something.

i don't want to use jqueryUI in doing this, that library is too bloated, i've seen some other drag and drop scripts out there but a lot of what i've tried has utterly failed, so now i'm back to step 1 wondering if there's a really simple way to drag a div and when it reaches the very right of it's container, to 'do something'.

i would REALLY appreciate any help at all, i think my hair is falling out over this. nick

Upvotes: 1

Views: 2507

Answers (3)

Moheri
Moheri

Reputation: 7

So I know this post is REALLY old, but I'm trying to execute the solution that McKay proposed. I'm really quite new to jquery so don't roast me for this :D Maybe someone has a hint on how I can get this to work.

EDIT: Oh, and I'm also on a solution for this using jquery UI.

$(".slider-handle").mousedown(function() {
	$(".slider-handle").on("mousemove", function(){
		$(".slider-handle").css("margin-left" === "event.pageX" + "px");
	});
});
.unlock-slider {
  background: #d1d1d1;
  width: 300px;
  height: 50px;
  position:relative;
}

.slider-handle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: tomato;
  position: absolute;
  z-index: 10;
}
<div class="slider-wrapper">
 <div class="unlock-slider">
  <div class="slider-handle">
  </div>
 </div>
</div>

Upvotes: 0

MillsJROSS
MillsJROSS

Reputation: 1239

I'd suggest using a library that already does what you're looking for, in terms of actually sliding an object.

jquery UI

This is of course a link to the JQuery UI library. However, most UI (User Interface) libraries come with the ability to slide objects, so choose whichever one you're most familiar with. If you're not familiar with one, I'd suggest doing some research.

The JQuery library should give you the ability to slide the object and check the slide objects value, so you'll know when to run your lock/unlock script. As mentioned, though, I'm sure most other libraries will give you the same abilities.

Upvotes: 1

McKay
McKay

Reputation: 12614

Well, you can attach to the mousedown event, then on mousemove set the location of the div to be the location of the mouse (offset by the original offset), until mouseup (revert to original position), or sufficiently to the right "do something". Sounds simple enough?

Upvotes: 0

Related Questions