Detecting Android Menu Icons based on Android Version - javascript

I'm currently adding a popup (Add To Home Screen Feature) to an existing mobile web app using jQuery mobile. I would like to place the exact same icon the user has on their phone (based on Android version) inside the popup instructions rather than show 6 different icons the user may have.
Is there any specific jquery/javascript doing this or can anyone provide or direct me to an icon set (specifically just the menu icon) with android version numbers that I can pull from to create some logic to determine exactly the menu icon they need (based on version) to press to bookmark the site? I can't find this anywhere.
Edit:
Looking specifically for hardware specific menu icons for Android devices. They use many different kinds and would like to know if I can detect the device hardware being used and use the appropriate icon? Is this even possible?

You can figure out the android version using this code from another answer.
There used to be no standard for android menu buttons. Hardware manufacturers tended to make the menu icon whatever they wanted. I would heavily suggest using the modern, unified icon with three dots like this one from the android developers site.

Related

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

How to improve Windows 10 UI specifically the toolbar?

There are some third party themes on DeviantArt which change the way the toolbar works.
I would like to mod the toolbar in a way similar to this. Specifically I want this behavior: I want the start menu icon to be right-justified, the program icons to be center justified (with the option of having pinned icons forced to be listed before unpinned icons), and then other icons for background services and time are left justified.
In my previous question I give an example that illustrates my specifications.
Now that React Native is supported by Visual Studio, it would be cool if I could use React Native to mod the Windows UI. Is there some kind of wrapper that allows me to manipulate UI elements like icons, system font, toolbar background, windows appearance, etc... in a similar way someone working in a front-end Javascript framework would be comfortable in?
Also there is this program for Windows 7 called DualMonitor which creates another toolbar on the second monitor. It would also assign the program icon to the toolbar on the same screen.
https://sourceforge.net/projects/dualmonitortb/
https://www.deviantart.com/browse/all/customization/skins/windows/win10/

Making select control friendly on touch screens including Windows 8

I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)
The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/

Sliding panel for mobile page

I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.

How to hide blackberry cursor in browser?

Is it possible to hide the blackberry cursor in the browser? Using Javascript or CSS?
I am trying to rebuild the technique used on native apps where you browse through the items with your poke. I think this works nice on their native apps and I like to use that technique on my website where visitors can browse through various of items using their blackberry poke.
PS. CSS
* {
cursor: url(cursor.png), none !important;
}
Does not work.
This BlackBerry page seems to confirm the cursor style can be changed.
What is the cursor.png file that you are using? Have you tried changing the PNG to be a completely transparent file instead of specifying "none" in the CSS? This website seems to suggest that will work.
As per the comment you should consider what happens for non touch screen devices, but you can always choose to target only touch screen devices by specifying the device models in App World when you deploy your app.

Categories