I am using Jquery Draggable
My draggable is having four handles on all four sides viz (top, bottom, left and right) using which draggable can be dragged in respective direction
$('.draggable').draggable({
handle: '.top, .bottom, .left, .right'
});
Well I can get the direction of drag and set the axis once the drag starts, but what if bottom handle is being used to drag to left direction.
So is there any way to know which handle is being used to drag a draggable?
Well I got an answer to my question, and I am posting it here so as to help others in future
$('. draggable').draggable({
handle: '.top, .bottom, .left, .right'
start : function(event, ui)
{
console.log(event.originalEvent.target);
//OR
console.log(event.originalEvent.originalEvent.explicitOriginalTarget);
}
});
Related
hi everyone here is my test page so you can see what help that i need,
http://jjvirgin.24techstuddev.com/testpage/
i want to continues slide left or right when hover, cause at the moment its only sliding left or right once. i want to make it continue sliding to left when you hover on the left button, or continue sliding to the right when you hover to the right button.
here is the code that i used to make it slide once.
<script>
jQuery(document).ready(function() {
jQuery('.slick-prev').mouseover(function() {
jQuery('.swiper-wrapper').slick('slickPrev')
});
jQuery('.slick-next').mouseover(function() {
jQuery('.swiper-wrapper').slick('slickNext')
});
});
</script>
Instead ou using 'slickPrev' and 'slickNext' methods use slickPlay on mouseover() and slickPause on mouseout()
I'm using d3 behavior api to implement some drag and drop functionality on my chart. There're some circles on the chart, what I want to do is make the circles able to move around when user is dragging them.
But I don't know how to get the reference of the circle which is being dragged by user.
In below code, where and how to get the reference of the selection and the current mouse position?
var drag = d3.behavior.drag()
.on("dragstart", function(){
//do some drag start stuff...
console.log('drag start');
})
.on("drag", function(){
//hey we're dragging, let's update some stuff
})
.on("dragend", function(){
//we're done, end some stuff
console.log('drag end');
});
Somebody please help!
You get the current selection from
d3.selection(this)
If you want to get the current mouse position, use this code
d3.mouse(this)
That returns an array, where [0] returns the x position of the mouse, and [1] returns the y position.
I am making photo collage application for which I need better object selection method. The current or default selecting technique is little bit confused when there are lot's of objects. User are confused on which object is selected. So I want to highlight over the object before selecting it so that use know prior which object is going to be selected.
I have looked at hovering which is what I want but it is only for shapes and don't work for images. How to apply this to images, text and cliparts.
Here is the code :
canvas.on('object:over', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('object:out', function(e) {
//I want to remove the border on mouseout on non-selected object
});
The border and corner is only applicable for selected objects but I want to enable border for non-selected object on mouse hovering.
Here is my app : Edit Photos For Free
For now I think the solution for this is -
canvas.on('mouseover', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('mouseout', function(e) {
//I want to remove the border on mouseout on non-selected object
});
One thing I don't understand is how did Minima.pl (http://minima.pl/pl) implement that feature within Isotope library where clicking on a thumbnail opens up a bigger gallery of images (a single clickable image, clicking on it makes it cycle through the rest of the images in a gallery) while resorting the Isotope items?
Here is how far I got -> http://tinyurl.com/cr5kzml
Anyone have any ideas on what I'm missing, how do I get this working?
Well, I am author of minima.pl website ;).
The part which takes care of repositioning of tiles after enlarging clicked one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
It also takes care of scrolling browser window to top of clicked tile.
I am triggering the above action after loading clicked tile content (by AJAX). The trick is to trigger it simultaneously with enlarging the clicked tile.
I will be glad to answer any additional questions.
Actually, this is simple to achieve. Normally, a click on an Isotope .item can, for example, maximise it, another click minimises it. If you want interactivity inside a clicked-on Isotope .item, you simply don't attach the minimisation function to it. Instead, clicking on another Isotope .item minimises the previously selected = maximised item. By keeping track of the previously selected .item, clicks inside the maximised .item won't close it. Basic logic for an example that allows maximising and minimising only by clicking on a "header" zone inside each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponding to .item divs width relationships
}
});
// $container.isotope('shuffle'); // randomise for every new visitor
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks
var $previousSelected = $('.selected'); // necessary for switching
if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected
}
$container.isotope('reLayout'); // comment out to mimick old masonry behaviour
});
});
The actual interactivity inside each Isotope .item can then be coded however you like; hardcoded or dynamic...
By click on a thumbnail a ajax function return the same gallery except a bigger replacement for the thumbnail. Then let isotope rearrange the gallery. You can find an example here: http://www.maxmedia.com or http://www.phpdevpad.de (my own site).
Does anyone know of a hack to allow for a left->right swipe on a tableviewrow. The default swipe action opens a delete button however I require additional buttons but want to maintain the same UX but the "swipe" event listener doesn't seem to fire on rows.
myTblRow.addEventListener('swipe', function(e){
Titanium.API.info("huzzah, a row was swiped");
});
The above == no dice.
It does require a bit of a hack.. remove the editable property on the tableView declaration.
The hack is to apply a view that covers the tableRow:
var row1 = Titanium.UI.createView({
width: Titanium.Platform.displayCaps.platformWidth,
height: 145,
zIndex: 100,
opacity: 0.1
});
row.add(row1);
Notice the zIndex, the opacity makes it exist but be totally transparent.
You now need to create a 'swipe' event listener:
tableView.addEventListener('swipe', function(e){
tableView.updateRow(e.index, createUpdateRow(e.source.myProperty), {
animationStyle: Titanium.UI.iPhone.RowAnimationStyle.LEFT
});
});
When the event fires, createUpdateRow() is called, which returns a tableRow. This tableRow you add all of your custom buttons to, you can change the height of the row, anything. The animation style property will mean if you swipe from the right > left, the new row will animate in from the left, which is an effect I like..
Hope this helps, anyone else.. The extra View (row1) is what got me for ages!