I need to find a way to know if a user has used mouse hover or touch click to show and hide different menu links. What I want to do is this.
if(a user used a mouseenter or mouseleave){
$("li.mobile-show > a").hide();
$("div.hover-over").hover(function(){
$(".hover-dropdown", this).children().slideToggle();
});
}
else if(a user used touch click){
$("li.mobile-show > a").show();
$("div.hover-over").click(function(){
$(".hover-dropdown", this).children().toggle();
});
}
I tried Modernizr.mq('only all and (min-width: 768px)') to see if I can separate the table & mobile device vs computer screen, but it didn't work for large tablet devices that show the desktop view but only can use the touch feature. Help~!
It's an old trouble. Unfortunately there is no way. Not with Modernizr, not with anything.
Desktop browsers (at least major ones) has ontouchstart ('ontouchstart' in window) and whole Touch Events API.
Mobile browsers emulates mouse events.
making conclusions based on device width/dimensions is also prone to errors: many tablets has 1280, 1300 and more pixels width
Related
Just wondering if there are specific libraries or standards that help developers manage the interactions for devices that are both mouse and touch enabled (e.g. netbooks, laptops). I have been doing some testing of websites on such devices and the user experience is not ideal because the browser seems to just make a choice about the device being a desktop machine that you use with a mouse or a touch device that doesn't have mouse input at certain points and it would be great to have better control over this without rewriting a lot of code.
For my code, I add events for mouse and touch, and in the event handler pass on the coords to a custom function that they both share.
For example:
window.addEventListener('mousedown', mouseStart, false);
window.addEventListener('touchstart', touchStart, false);
function mouseStart(e) {
handleStart(e.clientX, e.clientY);
}
function touchStart(e) {
handleStart(e.touches[0].clientX, e.touches[0].clientY);
}
function handleStart(x, y) {
// Both touch and mouse events end up here and provide their coords
}
That way, one piece of code handles mobile and desktop equally.
In general, I try to leave comments or write a note down somewhere whenever I implement something that is not compatible with all devices so I can come back to it later.
In my game you can control the character by moving left and right, jumping and attacking. (This is a mobile game) I have a button that I use to jump and attack, which is easy because I just make a button and jump or attack with OnClick(). But for moving, I don't know how to find out if the user is pressing the button, I only know when it is clicked. How can I find this out? thanks.
If you dont understand what Im trying to say, basically here is my web game: http://dugelstudios.weebly.com/weapon-plus-plus.html
(Does not work on chrome, using safari or internet exploror)
and i am porting it to mobile, and i dont know how to make the player move left and right with touch controls.
You can use other MonoBehaviour methods such as OnMouseOver to check if a button is pressed, OnMouseEnter when a user begins to press a button, and OnMouseExit to check if a user has released the button.
You can also use OnMouseUpAsButton to mimic the behaviour of Button.onClick
For draggings movements, (like movement. For example, if you have a thumbstick, or something similar for movement), you can use OnMouseDrag.
Also, completely unrelated to your question, but something you have mentioned, you can enable NPAPI to enable WebPlayer builds in Chrome.
Just paste chrome://flags/#enable-npapi in a new tab in Chrome, and click the "Enable" button to get it running
I believe there is a thumb stick asset the standard Unity asset pack that's available on the store.
Working with maps i have an activity which is launched when no connection is available and uses offline maps (MapQuest). The activity runs fine, map is shown, and all overlays, markers and so on. When the user clicks on one of the markers info window another activity is launched and at this moment i get a bunch of red error messages in the log, though the app does not crash. These messages (the init is in the title) seem to talk about the ZoomButtons and touch events. As for ZoomButtons or touch events (multitouch) in the code, there are only 2 lines :
map.setBuiltInZoomControls(true);
map.setMultiTouchControls(true);
and not any dialog…
if i write:
map.setBuiltInZoomControls(false);
map.setMultiTouchControls(false);
the red error messages disappear but of course the user cannot zoom in or out in any way…
As the error (with the "true" parameter) occurs only when launching another activity i thought that i have to add something in on pause() ie:
onPause(){
map.setBuiltInZoomControls(false);
map.setMultiTouchControls(false);
super.OnPause();
}
---- but doing so does not change anything…
Any hint??? - Thanks in advance!
Add this to your activity:
#Override
public void finish() {
ViewGroup view = (ViewGroup) getWindow().getDecorView();
view.removeAllViews();
super.finish();
}
I was having the exact same problem... thanks to you pointing out that it is caused by (likely) when the zoom controls are still visible. I tested it, and that was correct. When I pressed the back button with the zoom controls showing, it would show that leak error, if I waited until the controls faded away (they do after you stop scrolling), then there was no leak error.
A little research in WebSettings provided a method that doesn't show the zoom controls, which means it doesn't leak at anytime you want to press the back button. It does still zoom with the pinch effect though. The only disadvantage to using this method is that your controls won't show. But to me, that's worth it, since most users know about pinch zoom for all apps.
Here is what I used:
// make sure your pinch zoom is enabled
webView.getSettings().setBuiltInZoomControls(true);
// don't show the zoom controls
webView.getSettings().setDisplayZoomControls(false);
The problem with this leak window does not appear in the following version of Android 3.0 , so,you can try to do :
// enabled zoom support
getSettings().setSupportZoom(true);
getSettings().setBuiltInZoomControls(true);
// but,We should hide this button, otherwise in the version
// of Android 3 and above, there is a window leak.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
// call requies API Level 11 ( Android 3.0 + )
getSettings().setDisplayZoomControls(false);
}
I have a fundamental question that I would like to get addressed. I'm almost done with my universal app and I was told that I need to specifically customize the UI controls for iPad screens (e.g) labels, buttons. So, for example, I have the following code in viewDidLoad event in one of my xibs.
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:100]];
}
else
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:250]];
}
Here _lblRandomDisplay is UILabel IBOutlet property and I increase the font for iPad and reduce it for iPhone. Is this the way to approach the iPad screens or does iOS automatically scale the screen when viewed on iPad?. As a side note, I have named the xib filenames as filename~iphone.xib and filename~ipad.xib and it loads correctly based on the device selected in the simulator.
In those lines, I have a Settings screen (not using the Settings bundle) using UITableViews that I have designed for iPhone and programmatically load data from NSArray. When loaded on iPad using the settings~ipad.xib (copied the controls from settings~iphone.xib), I haven't adjusted the row height specifically for iPad to make it look bigger. The screen shows OK on the iPad but it looks smaller. Is this the right approach or what is the best way to approach this?
Please advise.
The advice that you have been given, to customise UIControls for screen size, seems wrong. UIControl sizes, and text sizes in general, should remain the same on all devices. These items are designed in sizes appropriate for readability and touchability, neither of which has any relationship to screen size.
iOS is designed with this in mind. If you make a universal project with iPad and iPhone xibs or storyboards, you will find that user interface widgets are the same pixel/point size regardless of the device (I am ignoring Retina/non-retina distinctions here for simplicity). For example, the default size of a standard button is 73 x 43 with a font size of 15pt in both cases. A Navigation Bar is 44 px/points high on both devices. This is as it should be. If we assume that reading distance on an iPhone, or an iPad mini, or an iPad is approximately the same, then there is no reason to adjust text size. The idea of redesigning for the iPad is really that you can get more information on one screen, not a bigger version of the same information.
There are two circumstances in which iOS "scales the screen":
is if you create an iPhone-only app and run it on an iPad. Then there is a user option to run it at double size. In this case everything including font sizes are scaled up, but this is done by pixel-doubling, so the effect is a big blur. Take a look at it - and you will understand that this is precisely the reason why you should not design in this way.
if you use a single xib/storyboard for both iPhone and iPad, and rely on autolayout (ios6+) or autoresizing masks (ios5-) to auto-adjust the layout for different screen sizes. This method can -depending on your settings - proportionally resize image content of views, but will not dynamically resize text content, if you wanted to do that you would have to adjust in code. This is not a good way of designing an app anyway, it is better to make a dedicated design for iPhone and for iPad in separate xib/storyboards as you have done.
I expect when you say the iPad "looks smaller" you mean, the UI appears smaller as it gets lost on the larger screen... but the answer is not to just enlarge the size of your data, it is to reconsider your layout to fit more data on each screen. That is why with the iPad Apple provided the SplitViewController and introduced the pattern of the Container ViewController.
I wonder if you are also raising a related, but separate issue of proportional sizing of views for graphic design purposes (you mention font sizes of 100 and 250pt, not usual sizes for UI controls labels). You may want the look of your app to scale with the screen, a bit like the so-called fluid web design approach to variable window sizes. So for example you may have a graphic device based on a huge letter 'A' that fills your iphone screen, and want that letter to similarly fill you ipad screen. In this case you may need to set font sizes as in your code example.
You are certainly doing the right thing by not altering the row height of your table cells for the different devices, but for the larger screen you can of course make your table height larger, and accomodate more table cells in your view.
All of these comments are a bit general, as you haven't posted enough detail of your problem. It often helps to post a picture or two...
I'm using the JavaScript event onorientationchange and the parameter window.orientation to detect orientation changes and orientation values on my website. This works well with an iPhone and an Android. But a Windows Phone doesn't fire the onorientationchange event and window.orientation is undefined.
How I detect orientation changes of Windows Phones?
Thanks, Konrad
IE9Mobile doesn't support these events.
If your page is being displayed inside a WebBrowser control within a (silverlight) app then you can detect the orientation change at app level and then invoke scripts on the page to pass this information.
If you're just running in the browser then there is no way to detect orientation changes.
In CSS3 (works well with Mango, I don't know if in classic IE9 Mobile, but probably):
#media screen and (max-width: 480px)
{
/* CSS for Orientation Vertical */
}
#media screen and (min-width: 481px)
{
/* CSS for Orientation Horizontal */
}
Let me know if it worked!
The CSS change is perhaps the best way to detect orientation changes but, if you're like me, and just need a quick and dirty way to find out the current orientation then this'll do the job.
var isLandscape = $(window).width() > $(window).height();
For what it's worth, it seems like the implementation of window.orientation differs on certain platforms so you may need to check what device is being used.