According to Tinyscroll's website, mobile scrolling is supposed to work. Under options you see:
invertscroll: false -- Enable mobile invert style scrolling.
Has anybody actually gotten this to work? Help would be much appreciated. Thanks.
My code is the standard HTML set up with my options configured as:
$.tiny.scrollbar = {
options: {
axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
, wheel : 40 // how many pixels must the mouswheel scroll at a time.
, scroll : true // enable or disable the mousewheel.
, lockscroll : true // return scrollwheel to browser if there is no more content.
, size : 'auto' // set the size of the scrollbar to auto or a fixed number.
, sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
, invertscroll : true // enable scrolling for mobiles
}
};
It is scrollInvert not Invertscroll. If you don't believe me open up the jquery.tinyscrollbar.js and it will be in the second function.
Related
At work I have a 3 monitor setup. I would like to move the current application to a second or a third monitor with a key binding. How to do that?
I use the following script to cycle the focused window through the screens.
-- bind hotkey
hs.hotkey.bind({'alt', 'ctrl', 'cmd'}, 'n', function()
-- get the focused window
local win = hs.window.focusedWindow()
-- get the screen where the focused window is displayed, a.k.a. current screen
local screen = win:screen()
-- compute the unitRect of the focused window relative to the current screen
-- and move the window to the next screen setting the same unitRect
win:move(win:frame():toUnitRect(screen:frame()), screen:next(), true, 0)
end)
The screen library helps finding the right "display". allScreens lists the displays in the same order as they are defined by the system. The hs.window:moveToScreen function moves to a given screen, where it's possible to set the UUID.
The following code works for me.
Hitting CTRL+ALT+CMD+ 3 moves the currently focused window to display 3, same as if you would choose "Display 3" in the Dock's Option menu.
function moveWindowToDisplay(d)
return function()
local displays = hs.screen.allScreens()
local win = hs.window.focusedWindow()
win:moveToScreen(displays[d], false, true)
end
end
hs.hotkey.bind({"ctrl", "alt", "cmd"}, "1", moveWindowToDisplay(1))
hs.hotkey.bind({"ctrl", "alt", "cmd"}, "2", moveWindowToDisplay(2))
hs.hotkey.bind({"ctrl", "alt", "cmd"}, "3", moveWindowToDisplay(3))
I've answered this in Reddit post here, but in case anyone comes across this question here's the answer:
The Hammerspoon API doesn't provide an explicit function for doing this, so you gotta roll out with a custom implementation to achieve this:
-- Get the focused window, its window frame dimensions, its screen frame dimensions,
-- and the next screen's frame dimensions.
local focusedWindow = hs.window.focusedWindow()
local focusedScreenFrame = focusedWindow:screen():frame()
local nextScreenFrame = focusedWindow:screen():next():frame()
local windowFrame = focusedWindow:frame()
-- Calculate the coordinates of the window frame in the next screen and retain aspect ratio
windowFrame.x = ((((windowFrame.x - focusedScreenFrame.x) / focusedScreenFrame.w) * nextScreenFrame.w) + nextScreenFrame.x)
windowFrame.y = ((((windowFrame.y - focusedScreenFrame.y) / focusedScreenFrame.h) * nextScreenFrame.h) + nextScreenFrame.y)
windowFrame.h = ((windowFrame.h / focusedScreenFrame.h) * nextScreenFrame.h)
windowFrame.w = ((windowFrame.w / focusedScreenFrame.w) * nextScreenFrame.w)
-- Set the focused window's new frame dimensions
focusedWindow:setFrame(windowFrame)
Wrapping the snippet above in a function and binding it to a hotkey should cycle the currently focused application across your different monitors.
Not exactly the answer to OP but leaving this here for others who also want to cycle through monitors and maximize on each screen:
local app = hs.window.focusedWindow()
app:moveToScreen(app:screen():next())
app:maximize()
You can put this in a function and bind it to Ctrl + Alt + n like so:
function moveToNextScreen()
local app = hs.window.focusedWindow()
app:moveToScreen(app:screen():next())
app:maximize()
end
hs.hotkey.bind({"ctrl", "alt"}, "n", moveToNextScreen)
In ios 11 navigation bar is overlapping status bar. If any body faced the same issue kindly help.
Not sure if this is the same issue, but we ran into this as well when upgrading to iOS 11.
See ios 11 custom navbar goes under status bar
We were manually setting nav bar height to 64 and pinning to the superview edges. Conforming to the UINavigationBarDelegate protocol and implementing the UIBarPositioningDelegate delegate method solved it for us.
We replaced
navigationBar.autoPinEdgesToSuperviewEdgesExcludingEdge(.bottom)
navigationBar.autoSetDimension(.height, toSize: 64)
with
...
if #available(iOS 11.0, *) {
navigationBar.topAnchor.constraint(
equalTo: self.view.safeAreaLayoutGuide.topAnchor
).isActive = true
} else {
navigationBar.topAnchor.constraint(
equalTo: topLayoutGuide.bottomAnchor
).isActive = true
}
navigationBar.autoPinEdge(toSuperviewEdge: .left)
navigationBar.autoPinEdge(toSuperviewEdge: .right)
navigationBar.delegate = self
...
public func position(for bar: UIBarPositioning) -> UIBarPosition
return .topAttached
}
This is using the purelayout DSL for some of the autolayout calls (https://github.com/PureLayout/PureLayout)
Credit goes to https://stackoverflow.com/users/341994/matt for the answer
Had similar problem. In my case it turned out that previous view controller had custom nav bar and therefore it was hiding both - nav bar and status bar. There was
UIApplication.shared.setStatusBarHidden(true, with: UIStatusBarAnimation.none)
UIApplication.shared.setStatusBarStyle(.default, animated: false)
And in the problematic view controller I had this:
UIApplication.shared.setStatusBarStyle(.default, animated: false)
UIApplication.shared.setStatusBarHidden(false, with: UIStatusBarAnimation.none)
The issue was fixed simply by putting the two lines in the correct order:
UIApplication.shared.setStatusBarHidden(false, with: UIStatusBarAnimation.none)
UIApplication.shared.setStatusBarStyle(.default, animated: false)
All things above are deprecations, so another possible fix would probably be changing this to the recommended way of hiding status bar (which is not yet ideal as discussed here: setStatusBarHidden deprecated, but only thing that works).
Set child view to top constraint of superview... Click for edit constraint If you see "Align Top to : Safe Area " change it to superview so that it will overlap
I'm using AngularJS 1.5.0 and Microsoft Edge browser screen doesn't reflect the DOM.
I would like some suggestion how this can be fixed.
I can't really apply a fix for each element as the application is somewhat big with dynamic user content including Angular equations.
Also the app include a lot of dynamic bindings linked to input boxes.
Selecting the text with the mouse turn the 0 into a 2 which is the right value in the example below.
Also changing the position style back and forth seem to force Edge to redraw the element but it's somewhat an ugly fix that I don't like very much and it need to be trigger at so many places (Ajax request, input changes and so on...)
The page start with a value of 0. Then an Ajax call is made and it go fetch the real data. After some experimentation the bug only appears if the new data is 1 character (ex: 2 or 9). And it happens every time. If it's a 2 digit number (ex: 26) then the good number appears.
Any help on this matter would be gladly appreciated.
We were facing the same problem and it stopped occurring after removing the text-transform: uppercase style from the elements that are not updating.
#Sampson, it looks like this is a bug in Edge.
I was able to make a temporary fix with the use of Mutation Observer.
Little script that I made that works for AngularJS elements created server side.
Currently those are the only one causing trouble in my app.
<script>
$(document).ready(function(){
var ua = navigator.userAgent;
var re = new RegExp("Edge/");
if (re.exec(ua) != null){
console.log('edgeMutationObserver ON!!')
var edgeMutationConfig = { characterData: true, subtree: true };
var edgeMutationObserver = new MutationObserver(function(mutations) {
var rgb_p = /rgb\((\d+), (\d+), (\d+)\)/g;
var rgba_p = /rgba\((\d+), (\d+), (\d+), (\d.?\d*)\)/g;
mutations.forEach(function(mutation){
if(mutation.target.nodeType == 3){
var that = mutation.target.parentNode;
// Save the background color
var bgc = that.style.backgroundColor;
// Get applied style from style or css
var bgc_css = bgc || $(that).css('backgroundColor');
var bgc_temp,match;
if(match = rgb_p.exec(bgc_css)){
// rgb transformed in rgba triggers update
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+',1)';
}else if(match = rgba_p.exec(bgc_css)){
// Slightly modify transparency
var alpha = match[4] == 0 ? 0.01 : match[4] - 0.01 ;
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+','+alpha+')';
}else{
// If either inline style or css is already equal to transparent the redraw is not made so i choose an alternate color with 0 opacity
bgc_temp = bgc_css != 'transparent' ? 'transparent' : 'rgba(0,0,0,0)';
}
// Change background color to force redraw
that.style.backgroundColor = bgc_temp;
setTimeout(function(){
// Apply back previous style
// Doesn't redraw without a timeout in Edge
that.style.backgroundColor = bgc;
},0);
}
});
});
$('.ng-binding').each(function(){
edgeMutationObserver.observe(this, edgeMutationConfig);
});
}
});
</script>
I have been trying to get the scroll position of a tree grid in and ext.js application using sencha architect. Originally I wanted to keep the scroll position after a reload so when a user deletes a post it will scroll back to that same spot after reload. I have attempted to use various methods I have searched for but nothing is working. I'm currently testing by having a java script timeout function give me the scroll position after a few seconds, long enough for me to scroll down and console.log the position but it gives me nothing and I'm not showing anything but zero when I go into the dom and look at the tree view object. I have already tried the following
1st: var newcompheight = comboboxeample.getHeight();
2nd: getScroll: function() {
var me = this,
dom = me.dom,
doc = document,
body = doc.body,
docElement = doc.documentElement,
left, top;
if (dom === doc || dom === body) {
// the scrollLeft/scrollTop may be either on the body or documentElement,
// depending on browser. It is possible to use window.pageXOffset/pageYOffset
// in most modern browsers but this complicates things when in rtl mode because
// pageXOffset does not always behave the same as scrollLeft when direction is
// rtl. (e.g. pageXOffset can be an offset from the right, while scrollLeft
// is offset from the left, one can be positive and the other negative, etc.)
// To avoid adding an extra layer of feature detection in rtl mode to deal with
// these differences, it's best just to always use scrollLeft/scrollTop
left = docElement.scrollLeft || (body ? body.scrollLeft : 0);
top = docElement.scrollTop || (body ? body.scrollTop : 0);
} else {
left = dom.scrollLeft;
top = dom.scrollTop;
}
return {
left: left,
top: top
};
3rd: var test = window.pageYOffset;
I have also attempted to setting the keepscroll position property in Sencha architect to true and other things I have googled but nothing is working. Any help would be appreciated.
Use this:
treeGrid.getEl().getScrollTop()
image-size(path)
Returns the width and height of the image found at path. Lookups are performed in the same manner as #import, altered by the paths setting.
Example:
width(img)
return image-size(img)[0]
height(img)
return image-size(img)[1]
image-size('tux.png')
// => 405px 250px
How to get the height and insert it into the css property?
For example:
.qwert
width image-width(test.jpg)
.qwert
width image-size('test.jpg')[0]