We Keep Coding

Disable x or y snap in jQuery UI draggable

I have app where i need only snap element to top and bottom edges of parent element. I try to find how to do it in stack but i can't find it!

el.draggable({
start: function(){
var snapped = $(this).data('draggable').snapElements;
snapped.forEach(function(el){
el.width = 1000000;
el.left = -50000;
});
}
})

One approach is doing the snapping manually instead of relying on the draggable's functionality. E.g. you can disable the snapping and in your drag handle implement it by changing the object's position whenever it's close enough to whatever location you like.
Here's a solution for the similar request: Getting jQuery draggable to snap to specific grid

Creating a drag select screen capture for Google Chrome

I have searched everywhere for this. I've even tried looking at other extensions to see how it's done. What is the simplest way to create an addition to my extension that enables me to drag;
Click Extension Icon -> Drag/select content area -> capture as screenshot/png for me to pass to an API
I've got my basic plugin down and it captures images and screenshots, but I want to create this feature, where I may drag and select a content area. I've never had to create something like this before and I've no idea how to do it in Javascript.
Edit: I don't want this done for me, I just need an idea of how it's done. I've never heard of Javascript doing this but I know the functionality exists because other extensions do this.
Edit 2: The only thing I've found that comes close to what I want is "html2canvas", but I'm not sure how I'd turn that into a drag/select element.
Cheers!

If you already have the part that captures the screenshot all you need is to crop it to the correct size right?
That size is just a set of start and end coordinates for dragging. We can make a simple script using jQuery and an element to keep track of this and give feedback to the user. The basic principles here are:
listen to the JS events (mousedown, mousemove, mouseup) so you know what your user is doing
Add an absolutely positioned <div> to the screen to be your selection.
Here is a proof of concept: http://jsfiddle.net/x2xmjrya/
And here is the important JS:
// Things we need to keep track of
var start = {};
var end = {};
var isSelecting = false;
$(window)
// Listen for selection
.on('mousedown', function($event) {
// Update our state
isSelecting = true;
$('#selection').removeClass('complete');
start.x = $event.pageX;
start.y = $event.pageY;
// Add selection to screen
$('#selection').css({
left: start.x,
top: start.y
});
})
// Listen for movement
.on('mousemove', function($event) {
// Ignore if we're not selecing
if (!isSelecting) { return; }
// Update our state
end.x = $event.pageX;
end.y = $event.pageY;
// Move & resize selection to reflect mouse position
$('#selection').css({
left: start.x < end.x ? start.x : end.x,
top: start.y < end.y ? start.y : end.y,
width: Math.abs(start.x - end.x),
height: Math.abs(start.y - end.y)
});
})
// listen for end
.on('mouseup', function($event) {
// Update our state
isSelecting = false;
$('#selection').addClass('complete');
});
You would use the mouseup callback to also kick off the screencap and crop

Dragging elements

Im just wondering whether its possible to drag images/elements (whether inside a div or not) where the image/element is dragged to the far left and comes in from the right side of the screen - therefore dragging the image/element left to get the same result, or vice versa.
Similar to the google maps (on zoom level 1) the user can continuously drag the image left or right, and those images are on a continuous loop.
If so, what languages would you recommend using? javascript?
I hope this makes sense.
Many thanks

This is certainly possible using Javascript. Just have two copies of the image, and as you slide the images left, move the second copy to the right side. (Or vice versa if sliding right).

You can add event handlers to any element, including your images, that execute code while dragging. I apologize for not providing a complete working solution, I am pressed for time, I hope this helps as a starting point
var myGlobals = {
state: {
dragging: false;
}
};
$('.carouselImg').on('mousedown', function(e){
myGlobals.state.dragging = true;
});
$(window).on('mouseup', function(e){
// stop movement even if mouseup happens somewhere outside the carousel
myGlobals.state.dragging = false;
});
$(window).on('mousemove', function(e){
// allow user to drag beyond confines of the carousel
if(myGlobals.state.dragging == true){
recalculateCarouselPosition(e);
}
});
function recalculateCarouselPosition(e){
// These fun bits are left as an exercise for the reader
// the event variable `e` gives you the pixel coordinates where the mouse is
// You will have to do some math to determine what you need to do after this drag.
// You may want to store the coordinates of the initial click in
// `myGlobals.dragStart.x, .y` or similar so you can easily compare them
// You will probably set a negative CSS margin-left property on some element
// of your carousel.
// The carousel will probably have overflow:hidden.
// You will also have to manipulate the DOM, by adding a duplicate image to the
// opposite end and deleting the duplicates once they have scrolled out of view
};

disable mousedown bind event on scrollbar

on the http://www.associationtsunami.org/ site if i make a mousedown on the document the cube rotates depending on the direction the user moves the mouse.
the code is:
key code ...
).bind('mousedown touchstart', function (evt) {
delete mouse.last;
if ($(evt.target).is('a, iframe')) {
return true;
}
evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
mouse.start.x = evt.pageX;
mouse.start.y = evt.pageY;
$(document).bind('mousemove touchmove', function (event) {
dragging = 1;
// Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
if (!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
event.preventDefault();
// Get touch co-ords
event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
$('.viewport').trigger('move-viewport', { x: event.pageX, y: event.pageY });
}
});
$(document).bind('mouseup touchend', function () {
dragging = 0;
$(document).unbind('mousemove touchmove');
});
});
full code https://github.com/AssociationTsunami/tsunami/blob/gh-pages/js/cube.js#L72
i would like to disable this event if a user makes the mousedown on a scrollbar - for example on the 'ONSONPARLA' page there is a TAB with ACCORDIONS, if you open any of the accordion content you get a scrollbar on the edge or within the accordion and if you try to move the scrollbar, this also moves the cube.
what is the correct way to overwrite this in the cube.js so that the cube does not turn if the event is on a scrollbar element?

It can't be done in such manner.
But there is an alternative solution. Use some custom scroll bar plugin to replace classic scroll bar. You will be able to prevent events on him. I understand this is not an excellent solution, but according to you web page you like to take a chance. :)
Here you can find few good plugins.
Good plugin example is here.

using scrollTo plugin and click and hold functionality to add navigation elements to page

You can view the site at www.highdwellercreative.com/colife. This site is based around the concept the the city will grow as the company grows and we wanted a different feeling then scrolling with the scroll bars provided. I have been working on a keypad style of navigation that consists of four directional arrows (up, down, left, right).
I am currently using setInterval() function to loop the scrollTo Plugin on mousedown() and the clearInterval() function to end the loop on mouseup().
I have also set the interval to repeat at 1 millisecond to achieve smooth scrolling. I have included the code that makes what I have accomplished so far work but it is still a bit rough, especially in Firefox 4. So far this does work in all browsers, including IE, but it could stand to be smoother and I am at a loss of how to accomplish this. Also if you click on one of the navigation buttons and immediately do a right click on it, the page gets stuck scrolling in that direction. Any help on how to improve this would be greatly appreciated.
var rightId;
$('span#right').mousedown(function() {
rightId = setInterval(function(){$.scrollTo('+=5px', {axis:'x'})}, 1);
}).mouseup(function() {
clearInterval(rightId);
});
var leftId;
$('span#left').mousedown(function() {
leftId = setInterval(function(){$.scrollTo('-=5px', {axis:'x'})}, 1);
}).mouseup(function() {
clearInterval(leftId);
});
var upId;
$('span#up').mousedown(function() {
upId = setInterval(function(){$.scrollTo('-=5px', {axis:'y'})}, 1);
}).mouseup(function() {
clearInterval(upId);
});
var downId;
$('span#down').mousedown(function() {
downId = setInterval(function(){$.scrollTo('+=5px', {axis:'y'})}, 1);
}).mouseup(function() {
clearInterval(downId);
});

You could certainly put these all into a single function:
function moveAround(elem,dir,moveAxis) {
var moving;
$(elem).mousedown(function() {
moving = setInterval(function(){$.scrollTo(dir+'=5px', {axis:moveAxis})}, 1);
}).mouseup(function() {
clearInterval(moving);
});
}
moveAround('span#left','-','x');
moveAround('span#right','+','x');
moveAround('span#up','-','y');
moveAround('span#down','+','y');
Just in terms of functionality, you may want to make a double click move you 500px or something. Just so people can get around the city faster. :)
An alternative way to do this would be to use .animate, with a callback function that called the same function (as long as the mousedown was still active).