We Keep Coding

jQuery bind / unbind not working

I'm trying to create a simple slider. Here is a example but slider next and prev button not working properly.
// next
var next = $('.next').click(function() {
var storepos = $(".storepos").val();
$('.prev').bind('click');
$('.storepos').val($('.storepos').val() / 1 + 110);
$('.container').animate({
scrollLeft: $('.storepos').val()
}, 200);
});
//prev
$('.prev').click(function() {
var storepos = $(".storepos").val();
$('.next').bind('click');
$('.storepos').val($('.storepos').val() / 1 - 110);
$('.container').animate({
scrollLeft: $('.storepos').val()
}, 200);
});
//after scrollend right event
$('.container').bind('scroll', function() {
if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
$('.next').unbind('click');
}
});
//after scrollend left event
$('.container').bind('scroll', function() {
if ($('.container').scrollLeft() < 1) {
$('.prev').unbind('click');
}
});
.container {
overflow: hidden !important
}
.container::-webkit-scrollbar {
width: 0;
height: 0
}
.content {
width: 1600px
}
.items {
background: black;
color: white;
margin-left: 10px;
width: 100px;
height: 100px;
float: left;
text-align: center
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
</div>
</div>
Prev / Next
<input class="storeposx" value="" />
<input class="storepos" value="" />
fiddle

I see two errors. First, the previous button is active from the begging, enabling scrolling to negative values. Second, you do unbind the events when reaching the end both sides, but you're not bind them back after that.
I used two variables where I keep the buttons status. When I reach the start or end position I don't unbind them, instead I just return false on click.
// next
var next = $('.next').click(function() {
if (!nextIsActive || $('.container').is(':animated')) return false;
var storepos = $(".storepos").val();
$('.prev').bind('click');
$('.storepos').val($('.storepos').val() / 1 + 110);
$('.container').animate({
scrollLeft: $('.storepos').val()
}, 200);
});
//prev
$('.prev').click(function() {
if (!prevIsActive || $('.container').is(':animated')) return false;
var storepos = $(".storepos").val();
$('.next').bind('click');
$('.storepos').val($('.storepos').val() / 1 - 110);
$('.container').animate({
scrollLeft: $('.storepos').val()
}, 200);
});
var nextIsActive=true;
var prevIsActive=false;
//after scrollend right event
$('.container').bind('scroll', function() {
if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
nextIsActive=false;
}else{
nextIsActive=true;
}
});
//after scrollend left event
$('.container').bind('scroll', function() {
if ($('.container').scrollLeft() < 1) {
prevIsActive=false;
}else{
prevIsActive=true;
}
});
.container{overflow:hidden !important}
.container::-webkit-scrollbar {
width:0;
height:0
}
.content {width:1600px}
.items { background:black;
color:white;
margin-left:10px;
width:100px;
height:100px;
float:left;
text-align:center
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
</div>
</div>
Prev / Next
<input class="storeposx" value="" />
<input class="storepos" value="" />

jQuery Plugin Callback $this can't return element

I am learning to write a mini jQuery Plugin Tools.
My plugin is helping user to check if user mousewheel whether scroll up or scroll down to trigger the callback function.
I have a four divs, when my mouse pointer hover it and scroll up with mouse wheel, the plugin callback will change this div 's background color.
Unfortunately, my callback 's $this is not working to point this element.
I need some help.
Style
body {background: #2A2B30;}
.wrapper {margin-top: 100px;}
.wrapper div.content {border-radius: 7px; border: 1px solid #000; min-height: 300px; margin-top: 30px; background: #ededed; padding: 30px; font-size: 20px;}
Html
<div class="container">
<div class="wrapper clearfix">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class="blk content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class=" content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class="blk content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class=" content"> </div>
</div>
</div>
</div>
Call Plugin
$(function() {
$('.blk').scroll({
lastAnimation : 0,
quietPeriod : 500,
animationTime : 800,
ScrollUp : function() {
$(this).css('background', 'red');
},
ScrollDown : function() {
alert('Scroll Down');
}
});
});
My Plugin
(function($) {
$.fn.scroll = function( options ) {
var settings = $.extend({
// selector : $(this),
lastAnimation : null,
quietPeriod : null,
animationTime : null,
ScrollUp : null,
ScrollDown : null
}, options);
return this.each( function() {
var lastAnimation = settings.lastAnimation;
var quietPeriod = settings.quietPeriod;
var animationTime = settings.animationTime;
function init(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
if( timeNow - lastAnimation < quietPeriod + animationTime ) {
event.preventDefault();
return;
}
if ( deltaOfInterest < 0 ) {
// Call Back
if ( $.isFunction( settings.ScrollUp ) ) {
settings.ScrollUp.call(this);
}
} else {
// Call Back
if ( $.isFunction( settings.ScrollDown ) ) {
settings.ScrollDown.call(this);
}
}
lastAnimation = timeNow;
}
$(this).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init(event, delta);
});
});
}
}(jQuery));

This is because settings.ScrollUp.call(this); here this is not refer to div its inside function so this is becomes something else inside of the init inner function try this:-
return this.each( function() {
var $this=this; // create variable here
.....
.....
settings.ScrollUp.call($this); //use it here like this in init function
Demo

See if this helps.
I use jQuery .hover() to store which div the mouse is over.
Then just use that variable (var hoverDiv) instead of "this"
<style>
body {background: #2A2B30;}
.wrapper {margin-top: 100px;}
.wrapper div.content {border-radius: 7px; border: 1px solid #000; min-height: 120px; margin-top: 30px; background: #ededed; padding: 30px; font-size: 20px;}
</style>
<div class="container">
<div class="wrapper clearfix">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class="blk content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class=" content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class="blk content"> </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper">
<div class=" content"> </div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/*
#see http://stackoverflow.com/questions/31340479/jquery-plugin-callback-this-cant-return-element
*/
(function($) {
$.fn.scroll = function( options ) {
var settings = $.extend({
// selector : $(this),
lastAnimation : null,
quietPeriod : null,
animationTime : null,
ScrollUp : null,
ScrollDown : null
}, options);
return this.each(function() {
var lastAnimation = settings.lastAnimation;
var quietPeriod = settings.quietPeriod;
var animationTime = settings.animationTime;
function init(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
if( timeNow - lastAnimation < quietPeriod + animationTime ) {
event.preventDefault();
return;
}
if ( deltaOfInterest < 0 ) {
// Call Back
if ( $.isFunction( settings.ScrollUp ) ) {
settings.ScrollUp.call(this);
}
} else {
// Call Back
if ( $.isFunction( settings.ScrollDown ) ) {
settings.ScrollDown.call(this);
}
}
lastAnimation = timeNow;
}
$(this).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init(event, delta);
});
});
}
}(jQuery));
$(function() {
var hoverDiv = null;
$('.blk').hover(function(e) {
hoverDiv = $(this);
},
function(e) {
hoverDiv = null;
}
);
$('.blk').scroll({
lastAnimation : 0,
quietPeriod : 500,
animationTime : 800,
ScrollUp : function() {
if(hoverDiv) {
hoverDiv.css('background', 'red');
}
},
ScrollDown : function() {
if(hoverDiv) {
hoverDiv.css('background', 'blue');
}
}
});
});
</script>

Fixed position to show on some sections but hidden on home

I was wondering if someone could give me a solution.
I have a website that scrolls horizontally. I divided it in six sections being the first section the home page. This home page features a navigation system different to the rest of sections for which I used a standard horizontal nav bar.
My problem is that I need the nav bar to stay fixed on its position so when I scroll down, it's still there but I don't want this nav bar to show on the home screen. Is there anyway I can have the nav bar fixed on different sections of the site while is hidden on the homepage?
Any help will be much appreciated. I attach the fiddle: http://jsfiddle.net/zpeua/
Many thanks guys!
Gon
HTML
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div id="Header" class="effect2">
<div id="Logo"></div>
<div id="ContactDetails"></div>
</div>
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item1"></a>
<div class="content"></div>
</div>
<div id="item2" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item2"></a>
<div class="content"></div>
</div>
<div id="item3" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item3"></a>
<div class="content"></div>
</div>
<div id="item4" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item4"></a>
<div class="content"></div>
</div>
<div id="item5" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item5"></a>
<div class="content"></div>
</div>
<div id="item6" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item6"></a>
<div class="content"></div>
</div>
</div>
CSS
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:hidden;
text-align:center;
}
#wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
}
#Header {
position:fixed;
z-index:10;
width:100%;
text-align:center;
padding:33px 0;
background:#FFF;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
overflow:auto;
}
#nav {
width:100%;
position:absolute;
top:127px;
text-align:center;
background:#FFF;
z-index:999;
padding-top:7px;
}
#nav ul {
width:100%;
max-width:1015px;
margin:0 auto;
list-style:none;
display:inline-block;
}
#nav ul li {
float:left;
width:auto;
margin:0 60px 0 60px;
}
#nav li a {
color:#999;
}
#nav li a:hover {
color:#000;
}
#mask {
width:600%;
height:100%;
background-color:#fff;
}
.item {
width:16.6%;
height:100%;
overflow-y:scroll;
float:left;
background-color:#fff;
}
.content {
width:100%;
height:100%;
top:165px;
margin:0 auto;
background-color:#fff;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
JS
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
;(function( $ ){
var $scrollTo = $.scrollTo = function( target, duration, settings ){
$(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ){
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( !isWin )
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
if( typeof settings == 'function' )
settings = { onAfter:settings };
if( target == 'max' )
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.speed || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if( settings.queue )
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function(){
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof targ ){
// A number will pass the regex
case 'number':
case 'string':
if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
targ = both( targ );
// We are done
break;
}
// Relative selector, no break!
targ = $(targ,this);
case 'object':
// DOMElement / jQuery
if( targ.is || targ.style )
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(''), function( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if( toff ){// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if( settings.margin ){
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
if( settings.over[pos] )
// Scroll to a fraction of its width/height
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
}else{
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if( /^\d+$/.test(attr[key]) )
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if( !i && settings.queue ){
// Don't waste time animating, if there's no need.
if( old != attr[key] )
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ){
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if( !$(elem).is('html,body') )
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] )
- Math.min( html[size] , body[size] );
};
function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};
})( jQuery );

You can easily fix the header to the top of the page and use jQuery to detect what page you're on within $(document).ready() and hide the header when you are on the home page. So within your $('a.panel').click() you'll just need this:
if($(this).html() == 'Home' && !$('#HomeNavId').is(':visible'))
{
$('#HomeNavId').show();
} else {
$('#HomeNavId').hide();
}

drag drop div multiple select fail on combined demo

I am creating a div and place a new div inside that i can drag around using;
http://threedubmedia.com/code/event/drag#demos
I combined the following demo's:
contain
active
multi
live (dynamically add new divs)
resize2
I can dynamically add new divs to the contained space, this div is also re-sizable and movable.
The problem is that it behaves weird.
- after clicking add, you cannot instantly drag that new box.
- multiple select does not work for all items
- I've had a situation where multiple select 3 items, but i can't un-select them.
here the code:
http://jsfiddle.net/GVNv5/2/
scenario 1: dragging
the 3 boxes are stacked on top of each-other ( no problem here)
- try dragging the top box immediately (without clicking it first) you see it doesn't move. Let go of your mouse and try again, now it will move. (the second and third boxes will move also)
- click add a box button and try to move it immediately, it also doesn't move.(the second time it will)
- click a box to select it.(color red) You will see non of the boxes will get selected.
scenario 2: multiselect
Run the demo again
- click on a box to select it.(color red) It will not select on first click. (hold mouse still)
- click on box and drag mouse, now release mouse.. box is selected.
- select box 1 and 2
- create new box and select it
- now you cannot un-select box 1 and 2.
<html>
<head>
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
</head>
<body>
<style type="text/css">
.drag {
font-size:8px;
position: absolute;
border: 1px solid #89B;
/*background: #BCE;*/
background: rgba(212, 217, 240, .8);
height: 58px;
width: 58px;
cursor: move;
}
#map_container {
height: 299px;
width:50%;
border: 1px dashed #888;
}
.handle {
position: absolute;
height: 6px;
width: 6px;
border: 1px solid #89B;
background: #9AC;
}
.NW, .NN, .NE {
top: -4px;
}
.NE, .EE, .SE {
right: -4px;
}
.SW, .SS, .SE {
bottom: -4px;
}
.NW, .WW, .SW {
left: -4px;
}
.SE, .NW {
cursor: nw-resize;
}
.SW, .NE {
cursor: ne-resize;
}
.NN, .SS {
cursor: n-resize;
left: 50%;
margin-left: -4px;
}
.EE, .WW {
cursor: e-resize;
top: 50%;
margin-top: -4px;
}
.selected {
background-color: #ECB;
border-color: #B98;
}
.selected .handle {
background-color: #CA9;
border-color: #B98;
}
.active {
background-color: #BEE;
border-color: #8BB;
}
</style>
<script type="text/javascript">
jQuery(function($){
var $div = $('#map_container');
//----------------------------------------------------------
// adding new div to drag
//----------------------------------------------------------
var num = 1;
$('#add').click(function(){
num++;
$('<div class="drag">'+num+
'<div class="handle NE"></div>'+
'<div class="handle NN"></div>'+
'<div class="handle NW"></div>'+
'<div class="handle WW"></div>'+
'<div class="handle EE"></div>'+
'<div class="handle SW"></div>'+
'<div class="handle SS"></div>'+
'<div class="handle SE"></div>'+
'</div>')
.appendTo( $div )
});
//----------------------------------------------------------
//dragging and resizing //----------------------------------------------------------
$( document ).on("drag",function(){
$('.drag')
.click(function(){
$( this ).toggleClass("selected");
})
.drag("init",function(){
if ( $( this ).is('.selected') )
return $('.selected');
})
.drag("start",function( ev, dd ){
dd.attr = $( ev.target ).prop("className");
$( this ).addClass("active");
//console.log(dd.attr);//to log some stuff to the console (you could use firefox firebug to see)
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
dd.width = $(this).width();
dd.height = $(this).height();
})
.drag(function( ev, dd ){
var props = {};
if ( dd.attr.indexOf("E") > -1 ){
props.width = Math.max( 32, dd.width + dd.deltaX );
}
if ( dd.attr.indexOf("S") > -1 ){
props.height = Math.max( 32, dd.height + dd.deltaY );
}
if ( dd.attr.indexOf("W") > -1 ){
props.width = Math.max( 32, dd.width - dd.deltaX );
props.left = dd.originalX + dd.width - props.width;
}
if ( dd.attr.indexOf("N") > -1 ){
props.height = Math.max( 32, dd.height - dd.deltaY );
props.top = dd.originalY + dd.height - props.height;
}
var props2 = {};
if ( dd.attr.indexOf("drag") > -1 )
{
props2.top =Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) );
props2.left =Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) );
}
$( this ).css( props2 );
if(dd.attr == 'drag')
{
//you can do stuff here if needed
}
else if(dd.attr == 'handle NE' || dd.attr == 'handle NN' || dd.attr == 'handle NW' || dd.attr == 'handle WW' || dd.attr == 'handle EE' || dd.attr == 'handle SW' || dd.attr == 'handle SS' || dd.attr == 'handle SE')
{
$( this ).css( props );
}
})
.drag("end",function(){
$( this ).removeClass("active");
});
});
});
</script>
<input type="button" id="add" value="Add a Box" />
<div id="map_container">
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
<div class="drag">
<div class="handle NE"></div>
<div class="handle NN"></div>
<div class="handle NW"></div>
<div class="handle WW"></div>
<div class="handle EE"></div>
<div class="handle SW"></div>
<div class="handle SS"></div>
<div class="handle SE"></div>
</div>
</div>
</body>
</html>

i think you must use
$(document).on('click')
instead of using
$(document).on('drag')
because drag will not fire on 1st action..
check out here i have done it: http://jsfiddle.net/CD3fb/

Horizontal scroller edge detection

How would I modify my script so it will detect the edge and not scroll more than the container width?
Mark-up and JS included and also JSFiddle - http://jsfiddle.net/carlozdre/4HSLb/8/
<div id="content">
<div class="inner">
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
</div>
</div>
<div style="">
<a class="left" href="#">LEEEEFT</a>
<a class="right" href="#">RIGHHHT</a>
</div>
<style>
#content { float: left; width: 600px; overflow: scroll; white-space: nowrap; max-width: 3000px;}
.inner {width: 300px;}
</style>
$(function () {
$('.left').click(function (e) {
e.preventDefault();
$('.inner').animate({
marginLeft: "-=" + 20 + "px"
}, 'fast');
});
$('.right').click(function (e) {
e.preventDefault();
$('.inner').animate({
marginLeft: "+=" + 20 + "px"
}, 'fast');
});
});

You need to make a couple of changes to ensure the size of the inner container is fixed to the size of the images within, and then check the left and right position of the inner container.
You are also better to animate to a specific coordinate rather than adding or subtracting from the previous one, as it will handle fast clicks much better.
Working example: http://jsfiddle.net/4HSLb/13/
Markup:
<div id="content">
<div class="inner">
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
</div>
</div>
<div style=""> <a class="left" href="#">LEEEEFT</a>
<a class="right" href="#">RIGHHHT</a>
</div>
CSS:
#content {
float: left;
width: 610px;
overflow: hidden;
white-space: nowrap;
max-width: 3000px;
}
.inner {
background:#444;
height:300px;
}
.inner img {
float:left;
margin-right:10px;
}
Script:
var left = 0;
var contentWidth = 0;
var innerWidth = 0;
var imgCount = 0;
var imgWidth = 310;
$(function () {
contentWidth = parseInt($('#content').innerWidth());
left = parseInt($('.inner').css('margin-left'));
imgCount = $('.inner img').size()
innerWidth = parseInt(imgCount * imgWidth);
$('.inner').width(innerWidth + "px");
$('.left').click(function (e) {
e.preventDefault();
updatePos(imgWidth);
if (left <= 0) {
$('.inner').animate({
marginLeft: left + "px"
}, 'fast');
}
});
$('.right').click(function (e) {
e.preventDefault();
updatePos(0 - imgWidth);
if (left >= 0 - innerWidth + (imgWidth * 2)) {
$('.inner').animate({
marginLeft: left + "px"
}, 'fast');
}
});
});
function updatePos(distance) {
console.log("NewPos: " + (left + distance));
console.log(0 - innerWidth);
if (left + distance <= 0 && left + distance >= 0 - innerWidth + (imgWidth * 2)) {
left = left + distance;
}
//console.log(left);
}
Edit:
Updated to prevent over scrolling when fast clicking.
Edit 2:
Updated code to allow the number of images in view to be easily changed. Rather than editing the example code above, here is an example on jsFiddle: http://jsfiddle.net/4HSLb/14/