remove event only on landscape for mobile devices using enquire.js - iphone

I'm using enquire.js so I can use CSS media queries with javascript instead of event listener on resize, which is tough for web performance.
I created an event which triggers scrollWindow(), which needs to be applied ONLY if the mobile phone is on portrait mode. On landscape mode, no matter which device on landscape, this event needs to be removed. I really tried different formulas with the media query and I checked the internet and could not find one solution that helps me...
This is a responsive project but if it helps I have to target at least Samsung Galaxy S3 and iphone4. Here below I insert you the code I have as for this moment:
enquire.register('screen and (max-height: 640px) and (orientation: landscape)', {
match : function() {
window.removeEventListener('scroll',scrollWindow);
},
unmatch: function(){
window.addEventListener('scroll',scrollWindow);
}
});

I think I'm reading your question correctly, so let me try to explain...
The way enquire.js works is that unmatch is only called after match has fired at least once.
So in your instance, you just need to invert your problem - have your media query test for portrait orientation, and add the event listener on match, and remove it on unmatch.
enquire.register('(orientation: portrait)', {
match : function() {
window.addEventListener('scroll',scrollWindow);
},
unmatch: function(){
window.removeEventListener('scroll',scrollWindow);
}
});
Hope that helps

Related

Sencha Touch 2 textfield's focus issue in iOS 7

I'm having an issue with textfields in Sencha Touch 2, this is only occurring in iOS 7 and working fine in iOS 6 and Android.
The issue is when you tap a field the keypad opens but the cursor disappears, it should be focus on selected textfield but it does not. You have to tap the textfield again to focus.
I have checked this issue on iOS 6 and android (on devices as well as on simulators), working fine but not on iOS 7 only.
Is anybody having this issue...?
Is this a bug in sencha or should i missing something, please advice.
Thank you..
I have found this to be directly related to two things:
centered: true
pack: 'center'
When I removed those lines, my app started playing nice. The challenge is to find an alternative way to center your panels.
I spent days figuring this out. Actually there is a problem with Sencha understanding the ViewPort height. In your index.html add a script block with the following code
if (window.device && parseFloat(window.device.version) == 7.0) {
document.body.style.paddingTop = "20px";
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}
This does two things for you
It Provides enough space on Top to display the activity bar
It sets the Viewport height to be that of screen height, irrespective of the keyboard being present or not.
Also, If your app works in Portrait and Landscape mode, you will need to add these lines in your Viewport.js (or Main.js)
initialize: function(){
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 0 });
},
handleOrientationChange: function(){
try{
if (parseFloat(window.device.version) == 7.0) {
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}else{
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight());
}
}catch(e){
// do nothing
}
},
And Yes, Make sure they Keyboard Bounce is TRUE in true (if you are using cordova). This will make sure your field does not get hidden.
Hope this works for you.
add height="device-height" in viewport meta tag, fixes the issue.
ios7 issues with webview focus when using keyboard html

Different landing page and navigation for mobile

Hi there! I've been trying to redesign a mobile site, I want to have a different landing page and navigation design which can be toggled apart from the responsive design I have now.
I've tried to make a menu button that shows up only on the mobile site by using Mobile Site Detect plugin, so when the view clicks it, it will toggle the navigation.
This is the code I've been trying to structure below, but it is not working for some reason, I'm assuming something may be missing in there. If anyone can have a look at it and give me some help or tips, I'll be really grateful.
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
if(jQuery.browser.mobile)
{
"nav".hide();
"#navtoggle".show();
event.preventDefault();
}
else
{
"#navtoggle".hide();
"nav".show();
event.preventDefault();
}
$( '#navtoggle' ).click(function() {
$( 'nav' ).toggle( 'blind' );
});
Also, if anyone can give me a tip on how to redirect the landing page to other page of the website on mobile site? Once I make the mobile detect plugin work, then what code am I supposed to use? Can anyone let me know? I remember there was something I could use, but can't find it... :(
Any help will be much appreciated! Desperately looking for some expert advice! Thank you!
If you want a view responsive to the device you have the following options:
Hide and show UI elements depending on the used device using CSS
Render the intended UI on server side based on UserAgent string
Well, go with JavaScript
Solution with CSS
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#selector {
/* rules */
}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
#selector {
/* rules */
}
}
Solution with JavaScript:
Use that method to detect mobile browser
Detecting a mobile browser

Facebook Comments Plugin Displays Mobile Width on iPad

As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.

Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?

I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.
I've found this so far:
Using Drag and Drop From JavaScript
Safari, Dashboard, and WebKit-based
applications include support for
customizing the behavior of drag and
drop operations within your HTML
pages.
Note: This technology is supported
only on desktop versions of Safari.
For iPhone OS, use DOM Touch,
described in Handling Events (part of
Safari Web Content Guide) and Safari
DOM Additions Reference.
Here. But it's outdated (2009-06-08).
Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).
Thanks!
I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).
Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
I have found native html5 drag&drop now works in safari, with a few specific notes;
You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');
you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)
OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)
On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails
I thought you required
CSS -webkit-user-drag: Element; and `-webkit-user-drop: element;
or if you prefer
Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
but it seems just the usual draggable attribute is enough
Element.setAttribute('draggable',true);
This seems to be the bare minimum to drag & drop an element
Element.setAttribute('draggable',true);
function OnDragOver(Event)
{
Element.setAttribute('DragOver',true);
Event.stopPropagation(); // let child accept and don't pass up to parent element
Event.preventDefault(); // ios to accept drop
Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
}
function OnDragLeave(Event)
{
Element.removeAttribute('DragOver');
}
function OnDrop(Event)
{
Element.removeAttribute('DragOver');
Event.preventDefault(); // dont let page attempt to load our data
Event.stopPropagation();
}
function OnDragStart(Event)
{
Event.stopPropagation(); // let child take the drag
Event.dataTransfer.dropEffect = 'move';
Event.dataTransfer.setData('text/plain', 'hello');
}
Element.addEventListener('dragstart',OnDragStart);
Element.addEventListener('drop',OnDrop);
Element.addEventListener('dragover',OnDragOver);
Element.addEventListener('dragleave',OnDragLeave);
Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:
http://www.html5rocks.com/en/mobile/touch/

How to Bind Load event for Image in jQueryMobile

I have a mobile website running jQuery Mobile 1.0a2 and I'm currently testing in Mobile Safari for Firmware 4.1 via the iPhone Simulator.
I cannot seem to bind to the load event for an image.
I have a simple gallery of thumbnails and a large image. When you click on a thumbnail it changes the src attribute of the main img
The js for that uses the live('click' method to bind and it works just fine.
$('.gallery-navigation img').live('click',function() {
// change source of main image to new
$.mobile.pageLoading(); // show jquerymobile loading message
});
My problem is that I need feedback on this click, so I wanted to show a loading message (provided by jquerymobile) and then hide it once the image loads.
Where #gallery_image_large is the actual <img> where the src is changing, I tried the following:
$("#gallery_image_large").bind("load", function () {
$.mobile.pageLoading(true); // hide jquerymobile loading message
});
This works in Safari on my desktop but does not in the iPhone Simulator mentioned above.
For reference:
jQuery Mobile Loading Message Methods
UPDATE: I am experimenting with JQuery Image load fails on MobiOne iPhone simulator, which explains how to implement the .load manually by "checking .complete".
I changed the structure of my jquery and it's seemed to have fixed it!
$('#gallery_image_large').one('load',function() {
try { // a grade
$.mobile.pageLoading(true);
} catch(err) { // low grade
}
}).attr('src',full_src);
(as you can see, I opt'd for a try { .. } catch { .. } to verify jquerymobile is available.
Although I didn't use the solution (directly) from JQuery Image load fails on MobiOne iPhone simulator, the manual firing of load via .complete is probably a good solution for anyone else out there!