touch - jQuery - Div follow touchmove/mousemove + autoalign -

touch - jQuery - Div follow touchmove/mousemove + autoalign -

i want create simple function in jquery script. when finger/cursor touches/clicks on screen, want pages slide horizontally next movements of finger/cursor. know there lot of plugins created many people, don't need else's solutions. image visual view of how html looks like. simple.

the jquery sciprt not correct, hope give thought simple function need. don't classes or fade-functions or anything.

$(document).live('touchmove' or 'mousemove', function() { $('div[class=page_*], div[class=page_^]').[follow movements horizontally, , auto align nearest border when allow go.]; });

also want able same 1 big div, width-variable of element moving should equal $(window).width();. think best idea. can set more content within big div , create larger, maintain that. should more simple , focus on 1 element only.

so, here solution. i've made changes can have more 3 pages. also, i've defined variable named threshold set half of page. if want have threshold bigger or smaller hakf of page have create more changes.

html code:

<div class="container"> <div class="wrap"> <div class="page page1"></div> <div class="page page2"></div> <div class="page page3"></div> <div class="page page4"></div> </div> </div>

css code:

.container, .page, .wrap { width: 300px; height: 400px; } .container { background: #efefef; box-shadow: 0px 0px 10px black; overflow: hidden; position: relative; margin: 5px auto; } .wrap { width: 1200px; position: absolute; top: 0; left: 0; } .page { float: left; display: block; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .page1 { background: yellow; } .page2 { background: green; } .page3 { background: blue; } .page4 { background: red; }

as css code maintain in mind if want alter page size have alter container , wrap size.

js code:

var mousedown = false, right; var xi, xf, leftx = 0; var npages = $(".page").size(); var pagesize = $(".page").width(); var threshold = pagesize/2; var currentpage = 0; $(".container").on("mousedown", function (e) { mousedown = true; xi = e.pagex; }); $(".container").on("mouseup", function (e) { if (mousedown) { mousedown = false; xf = e.pagex; leftx = parseint($(".wrap").css("left").split("px")[0]); if ((e.pagex - xi) < -threshold || (e.pagex - xi) > threshold) { setfocusedpage(); } else { restore(); } } }); $(".container").on("mouseleave", function (e) { if (mousedown) { mousedown = false; xf = e.pagex; leftx = parseint($(".wrap").css("left").split("px")[0]); if ((e.pagex - xi) < -threshold || (e.pagex - xi) > threshold) { setfocusedpage(); } else { restore(); } } }); $(".container").on("mousemove", function (e) { if (mousedown) { $(".wrap").css({ "left": (leftx + (e.pagex - xi)) }); right = ((e.pagex - xi) < 0) ? true : false; } }); function restore() { $(".wrap").stop().animate({ "left": -(currentpage * pagesize) }, 200, function () { leftx = parseint($(".wrap").css("left").split("px")[0]); }); } function setfocusedpage() { if (leftx >= (-threshold)) { // first page currentpage = 0; } else if (leftx < (-threshold) && leftx >= (-(npages + 1) * threshold)) { // sec n-1 page (right) ? currentpage++ : currentpage--; } else if (leftx < -((npages + 1) * threshold)) { // 3rd page currentpage = npages - 1; } $(".wrap").stop().animate({ "left": -(currentpage * pagesize) }, 200, function () { leftx = parseint($(".wrap").css("left").split("px")[0]); }); }

remember here if want different threshold have create changes in setfocusedpage() function.

here lastly demo

jquery touch move movement mousemove