I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.
This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.
Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?
Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview
var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
});
It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.
See this issue on Github: https://github.com/bevacqua/dragula/issues/121
To implement this functionality with AngularJS:
1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js
2) Include it in your project folder
3) Enable autoscroll in your controller:
// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
document.querySelector('.list')
], {
margin: 30,
maxSpeed: 10,
scrollWhenOutside: true,
autoScroll: function () {
//Only scroll when the pointer is down
return this.down
}
});
Related
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"
I am developing an iOS app in Appcelerator and I want to switch between windows with the use of a swipe event listener. How can I do this? The below code does not work. The current window that I "start" from contains a table.
var window = Ti.UI.currentWindow;
window.addEventListener('swipe', function() {
// Create the new window
var win = Titanium.UI.createWindow({
title: 'Contacts',
url:'contacts_simple.js'
});
// Animate the page turn
Titanium.UI.currentTab.open(win, {animated:false});
});
I think the problem is with the Ti.UI.currentWindow. Depending on the context you're working in it may not be valid.
Google 'appcelerator currentWindow', but here's a related link:
http://developer.appcelerator.com/question/5391/currentwindow
This will not be optimal and dynamic, but to start with, try referencing the window implicitly. Meaning if you did something like
var window_x = Ti.UI.createWindow({});
try
window_x.addEventListener('swipe', function() {...});
In previous version when inline editing all looking good:
But in new version it is looking like that (i put read border over):
How to fix that?
I am using jQuery 1.6.1, jQueryUI 1.8.13
I also have using the latest jqGrid css file
The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:
onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');
see the source code of jquery.fmatter.js.
If I correct understand the problem the adding of 'ui-state-hover' class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.
So I suggest just remove the hover effects inside of loadComplete:
loadComplete: function() {
$("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
this.onmouseover = null;
this.onmouseout = null;
});
}
See the demo.
UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following
var iconHoverFixed = function(e) {
jQuery(this).addClass('ui-state-hover');
jQuery('span',this).removeClass('ui-state-hover');
},
iconNotHoverFixed = function(e) {
jQuery(this).removeClass('ui-state-hover');
};
and then we can fix the hovering problem so:
loadComplete: function() {
$("div.ui-inline-save, div.ui-inline-cancel").each(function() {
this.onmouseover = iconHoverFixed;
this.onmouseout = iconNotHoverFixed;
});
}
See the new demo here or here.
Looks like you need to update the jquerygrid css and the images folder the image is build from an offset inside an image (Sprite) http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png
and in you case it doesn't find the right place
I'm using a tableView with a headerPullView.
It works fine, but i want to show the headerPullView when i open the tab so the user can see that new data is loaded.
Can't find any information on google or appcelerator docs.
I only found this: http://developer.appcelerator.com/blog/2010/05/how-to-create-a-tweetie-like-pull-to-refresh-table.html
but this only shows how to update when the tab is already loaded. I'm looking for a way to show that loading headerPullView when i open that window.
You can't simulate a scroll with the headerPullView but you can fire an event of scroll.
Anyways what I would advise is to create a headerView and set the table height smaller and away from the top. Attache a listener to the open event.
var headerView = Ti.UI.createView({
top: 0,
height: 60
});
Ti.UI.currentWindow.addEventListener('open', function(e) {
tableView.top = 60;
tableView.height = 400;
Ti.UI.currentWindow.add(headerView);
Ti.UI.currentWindow.add(tableView);
});
Then just set it all back the way you need it when you scroll the table the first time.
var scrolled = 0;
tableView.addEventListener('scroll', function(e) {
if(!scrolled) {
tableView.top = 0;
tableView.height = 460;
Ti.UI.currentWindow.remove(headerView);
scrolled = 1;
}
// scroll code
});
I'm not so sure why you need to do this however. After facebook replaced "shake to refresh" with this method I've started seeing it in almost all table apps and have come to just expect it. I assume many other users feel the same way about this?
you can use listView instead of tableView, it supports pull view already
check this
http://docs.appcelerator.com/titanium/3.0/#!/guide/ListViews-section-37521650_ListViews-PulltoRefresh
or you can use this modules
https://github.com/jolicode/Alloy-PullToRefresh