I have some jquery mouseover effects on my website that I need to disable for touch screens, however, how do I know what width of screen to disable the JQuery? At the moment I have it at less than 800px. This works on an ipad portrait but then when I turn it landscape the JQuery is activated again. I have read that Ipad landscape width is 1024px but this could also be the size of a small none touch screen. Is there a way I can specify effects for certain devices instead of screen widths ?
To achieve this you should look at working the other way and instead of disabling mouse over events for touch devices ADD the events for non-touch devices.
Add Modernizr to the project your working on (you've probably already got it in there). Once added you can include a test for "touch" by adding it as a class to the HTML element
<html class="touch">
If the device has touch capabilities then everything will remain as is, however if the device does not have touch then moderizr will covert that from touch to to no-touch
<html class="no-touch">
You can then bind your mouse events off the html element having the class of .no-touch
I've put an example of this in the code pen - http://rwd.is/VyRl37
This assumes that you're still loading the jQuery library for all devices and deciding whether to load the mouse over functions based on touch devices. If you're looking at conditionally loading jQuery itself then you should look at enquire.js to load in jQuery at a specified width.
If you want to keep jQuery for other functions on smaller devices but want to improve performance you could look at using using Zepto.js as a lightweight alternative.
Finally Response.js will also allow you to call functions at particular breakpoints but you still run into the issue of not knowing if it's touch enabled or not.
Related
In searching around, I have not been able to find information about generic support in Codename One for gestures generally, and swipe in particular.
I see I can easily set up swipe on a form to return to a prior form, and there is a way to create swipeable containers that work a specific way to rework the display of that container, but what if I just generally want to capture a swipe event - ideally on a container but if not that then on a form - and then take some specific action when that event occurs?
We don't support a high level gesture API. Most of those are inconsistent across platforms and pretty hard to work with so we never built one.
APIs such as tabs include the ability to swipe between containers, and image viewer allows swiping images. Those come up to about 90% of the use cases for swiping.
In other cases people just use a drag motion listener to detect the right level of drag and determine a swipe/pull.
Notice that drag and drop isn't swipe and we do support that with a special API.
Hello it's possible to block, landscape view just for Smartphones, but not for Tab's or bigger devices?
It all depends on the container holding your webview.
In android you can block orientationchanges, even changes under certain conditions, on your activity. The overridable method "onConfigurationChanged(Configuration newConfig)" is responsible for this.
On iOS you can do this on the ViewController. This post describes how to do it: iOS 6 - How to run custom code when orientation changes.
It is also possible to do this from the configuration files of the project. For iOS you can block certain views for certain device types. With Android this is only possible to block landscape mode entirely.
If you are feeling adventurous, there is also the option to CSS-transform your view, though this is more of a hack than a real solution: Prevent orientation change in iOS Safari
I have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
http://54.200.76.33:8080/
I've got this working on desktop browsers.If you scroll down, you'll see a search bar shows up at the bottom of the screen and becomes fixed to the bottom.
If you look at this on a mobile phone, when you scroll down, the bar doesn't immediately stick to the bottom. It'll wait until the user stops scrolling, and then it becomes fixed to the bottom.
Is there any way to fix this? Thanks.
Different mobile browsers have all kinds of issues with firing scroll events. Seems like you're using a scroll listener to update the CSS for pinning the scrollbar to the bottom. It's a generally good approach, so I wouldn't change it.
If you like, you can use a tool like Modernizr to treat the mobile platform differently. Other than that, the state of technology today is that you kind of have to deal with quirks like this on mobile.
http://modernizr.com/
I have a Silverlight 4 application that benefits greatly from having native mouse wheel support for a number of controls. The page that hosts the application has a HTML driven drop-down menu that would normally overlay the Silverlight control.
In IE, I have to enable windowless mode to allow the overlay menu to work correctly (Firefox 3.6 works normally without it). However, enabling windowless mode prevents Firefox from supporting mouse wheel events without additional coding around the HTML DOM bridge.
Is there any way I can tell which browsers will require windowless and which will work without it? Ideally, I'd like to use the HttpBrowserCapabilities information to decide whether or not to set the property to true, rather than hardcoding a list of 'supported' browsers.
Silverlight 4 has support for mouse wheel events, but there are a number of rules to be aware of:
IE is never an issue
Mousewheel events never work on OS X out of browser, and only via the HTML DOM in-browser.
Windowsless in all other browsers is a no-go because they rely on NPAPI to handle events.
You can get the Mousewheel with browser interoperability features to get to the mousewheel from the DOM as you noted.
HTML DOM will never work when full screen
For a complete breakdown see http://msdn.microsoft.com/en-us/library/dd759034(v=vs.95).aspx.
Maybe you could use your own MouseWehhenManager singleton class that internally considers both DOM and MouseWheelAPI events and provides them in a common way, so your code can use this single interface which works either way?