Windows 8 Javascript app dropdown acting like a spinner on slate? - javascript

I'm designing a windows 8 metro style app using javascript and I have a dropdown that populates with items.
On windows 8 it on my desktop it works like a normal dropdown.
On windows 8 on a slate if there's more than a couple of options it acts similar to a spinner - i.e. the options are in a loop and as you scroll down it starts from the beginning again.
This makes it a little confusing in my app.
Is there any way to disable this functionality and have it act like a regular dropdown?

Just as a note for anyone who might be wondering about this as well, it appears that the "spinner" feature is by microsoft design. There does not appear to be a way to prevent it.

Related

Unable to Change Button Selections on iOS Safari

On a webpage, I'm working on I have a series of buttons that are rendered on the page as repeating, generated <li> elements inside of <ul> tags. The selections are sequential, with a limit of one selection in the first list and the second list only being rendered after choosing from the first list. You can only choose one item in the first list and multiple items in the second one. When testing the webpage out on my iPhone I can't change my selection from the first section or deselect anything I've selected in the second list.
This issue is exclusive to pre-iOS 13 iPhones. Androids and iPhones with iOS 13 or later have no issues dealing with this page. This bug flew under the radar for me for a while because I was verifying my mobile changes by using the mobile view emulator on Chrome developer tools. The issue does not appear there.
I've looked everywhere for other people encountering this issue, but it doesn't seem that common. Should I tackle this via Javascript, CSS, or HTML?
So it turned out that this issue was due to jquery compatibility, and the fix was frustratingly simple. Just add onclick='' to the list elements and that restores normal intended functionality.

UWP Javascript App - how to use the touch-keyboard when multiple monitors

I'm developing a UWP javascript app using an Aures touch screen device with a second monitor, something like this:
https://images-nitrosell-com.akamaized.net/product_images/14/3282/alt2-aures-nino-epos-system.jpg
The second monitor is integral to the app
The issue is this: Windows 10 will not go into 'tablet' mode while two monitors are connected, and if it's not in tablet mode, I have no way of forcing the tablet-based onscreen keyboard to pop up when inside an input field. I found this:
https://answers.microsoft.com/en-us/windows/forum/all/message-tablet-mode-isnt-available-while-your/9d6c7525-658b-4cb9-95ae-ec69f854f218
But that gives no resolution to the problem.
I thought I could change the app manually to be touch-based, force it to use touch, with the following code:
const ViewManagement = Windows.UI.ViewManagement;
const currentView = ViewManagement.UIViewSettings.getForCurrentView();
currentView.userInteractionMode = ViewManagement.UserInteractionMode.touch;
But it turns out currentView.userInteractionMode is a read-only field. That code does nothing.
If I can't get this to work, my only recourse will be to build into the app my own custom keyboard -- that's a last-resort though as far as I'm concerned.
I can't find any resources on how to programatically force the keyboard open either. Really pulling a blank here.
I managed to find an answer
https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
These directions are for enabling the onscreen keyboard as if the computer is in tablet mode, when it's not in tablet mode (I think it only has an effect when (a) you've got a touchscreen monitory and (b) you have no keyboard attached).
OPTION ONE didn't work for me because I couldn't find that setting.
OPTION TWO required a restart but works perfectly after that. In case that website goes down, I'll post option two here:
OPTION TWO gives you a file called Turn_ON_show_touch_keyboard_.reg
Windows Registry Editor Version 5.00
; Created by: Shawn Brink
; Created on: May 1st 2017
; Tutorial: https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
[HKEY_CURRENT_USER\Software\Microsoft\TabletTip\1.7]
"EnableDesktopModeAutoInvoke"=dword:00000001
And to disable it: Turn_OFF_show_touch_keyboard_.reg
Windows Registry Editor Version 5.00
; Created by: Shawn Brink
; Created on: May 1st 2017
; Tutorial: https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
[HKEY_CURRENT_USER\Software\Microsoft\TabletTip\1.7]
"EnableDesktopModeAutoInvoke"=dword:00000000
Just create Turn_ON_show_touch_keyboard_.reg on your desktop and double click it, then restart. Might want to restart with keyboard already unattached, not sure if starting the computer with keyboard attached messes anything up.

Odd dropdown/select behavior in phonegap on iOS

We have a phonegap/ionic application targeting iOS. We have been testing with the ipad air simulator (xcode) and ipad air (10.3.3), ipad Pro (11.0.3).
The app is an ionic (v1) app that downloads and loads stand alone html files (the files contain css, html, js in one doc). The documents are typically long forms. In all test environments we are getting odd behavior with selects/drop downs.
When you click/tap on a select the options will appear correctly.
Then when you click/tap somewhere else, blank space or another input field you will usually get the select options bubble again but it will be empty.
In the above image I made my selection from the options and then clicked into the next field.
This was intermittent at first and now it seems to happen all the time. It seems like it has something to do with losing focus but I am unable to see why this is popping back up. I haven't found anything very useful from searching online in regards to this problem.
UPDATE 11/7/17
After more thorough searching this seems to be due to building the app with xcode 9 and/or the use of UIWebView vs WKWebview. I also looked through the code more to see we were already using WKWebView not UIWebView and the problem is still present. As someone mentioned in this thread.
Good thing is Cordova has support for WKWebView too. You have to install the plugin: cordova-plugin-wkwebview-engine

I want to direct users to webpages based on if they are on a desktop or mobile OS [duplicate]

This question already has answers here:
How to detect a mobile device using jQuery
(66 answers)
Closed 8 years ago.
I have a button that links to a third party website. This site has features that do not work with mobile devices. What I want to create is when the button is pressed it checks your OS version and then based on the result will pass you through to the site or redirect you to another site that says something like you are not supported.
I would assume that this code would have to be constantly updated to detect new mobile OS versions. Is there any easier way to accomplish this by detecting the browser version? Do mobile browsers have their own user agent tag like ($.browser.mobilemozilla )?
I have been trying to do some research but I have been coming up short. Any ideas or a point in the right direction would be very much appreciated.
Check this library JS-Redirection-Mobile

Is there a way to replicate the 'Wrench' menu in a Chrome Extension?

I'm pretty new to writing Chrome extensions. I've noticed that all of the extensions I've seen (both sample and useful) do not use the standard OS drop down menu when you click on them. Their popups tend to be pretty different and use stylesheets. Is there any way to have the extension popup be an actual OS menu (in the vein of the context menu API)?
If not, is there any place that has a stylesheet + javascript that replicates the look of a normal menu (I'm using OS X)? I know that the 'Wrench' menu that you use for changing settings has a normal looking menu. I tried looking through the source of Chromium to see whether it was implemented the same way as an extension and if it had such a stylesheet but I could not find anything.
I haven't really gotten the answer I wanted for this question so I tried to hack something together myself. The following stylesheet reasonably approximates the OS X menu. The only issues are that the font is a little too short when compared to the actual menu and the gradient is a little bit off (the OS X menu is not smooth and I don't know how to do that in CSS).
You can find my attempt here
Chrome wrench menu isn't rendered using javascript and css, it is a native GUI element of your OS, so you won't be able to find any css styles in sources.
If you want to replicate the menu look you can search for some javascript library that does that (like this), but I've never seen something that replicates GUI menu exactly even for one OS.

Categories