How to lock the screen width for any browser? - javascript

Just go to this test website : ltdcoapp.uphero.com , from you smart phone and then slide the screen to see what is on the right and the problem is : that yes the screen slides and shows what I am trying to hide on the right side .
my attempts so far was to use body{overflow-x: hidden;} which only works with desktop browsers though .
can you please tell me what to do to prevent this ?
PS: I'm really not trying to get traffic to the website , but it is the only way to show you the problem easily

Have you set a corresponding width with your overflow:hidden property?
Edit: Relative values like 100% for your width won't work (as they'll also contain the right part of the screen). Fix it to absolute pixel values (in this example: 1024px):
body {
overflow-x: hidden
width: 1024px
}
It might also help to add the corresponding viewport meta-tags in the header:
<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />
Also, would disabling scrolling altogether be a solution? Disable scrolling in all mobile devices

This one will prevent any touch response , which is kinda useless in my situation .
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
This one will be very uselful , but the problem is that it prevents both horizontal and vertical scrolling.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
This only works for desktop browsers .
body{overflow-x: hidden;}
Tried this a few times and all it do it to prevent user from scaling the page , which is useful at some point , but doesn't solve the problem of scrolling to the right .
<meta name="viewport" content="width=device-width; initial-scale = 1.0;user-scalable=no" />
Thx dominikus , you surely helped .

Related

iOS 7.1 input field positioned below virtual keyboard forces zoom on focus

I am writing a chat application using Cordova, and the chat view has an iMessage-like input field at the bottom of the page. In iOS 7.0, clicking on the field resized the window and brought the input field up above the keyboard. In iOS 7.1, clicking on the input field just pushed everything up from the bottom, and doesn't resize the window.
My viewport is set to:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />
When positioning the input relative to the top, the resize doesn't happen. However, positioning the input low enough to line up with the top of the keyboard does result in the no resize error. This can be replicated by building the Ionic frosted glass demo and changing the footer from
<footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>
to
<footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>
In www/index.html
This replicates the error in iOS7.1, and works as expected in iOS 7.0.x. I have followed the suggestions here, but they thread is dated and didn't end up working. Thank you in advance for any insight!
Have ou tried setting width explicitly? Like mentioned here?
<meta name="viewport" content="width=device-width">
Edit: Ionic has fixed this in beta 4, so these hacky fixes shouldn't be necessary :) Big up to the Ionic team for recognizing the issue and fixing it!
What I am going with for now is similar to #ajsnaps answer above. I do not consider it a good solution because it has bugs (similar to those pointed out in the other thread).
I will try to update this with something better when I figure it out, and I'll leave this open in case someone comes along with a better solution.
$("input").on('focus',function(){
//set brief timeout to let window catch up
setTimeout(function(){
//pull down the message area (scrollPane) and header (titleBar)
//works on both 3.5" and 4" screens
$("titleBar").css('top', '215px');
$("scrollPane").css('top', '273px');
},20);
});
$("input").on('blur',function(){
//set brief timeout to let window catch up
setTimeout(function(){
//push the top back up
$("titleBar").css('top', '0px');
$("scrollPane").css('top', '56px');
},20);
});
Additionally, I made sure that the header is reset after navigating back from the chat view.
Hope this helps!

Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).
Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.
When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.
Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).
Playing with the "fullscreen" preference won't solve the problem.
Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.
Viewport meta tag:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />
JavaScript run after load:
document.body.style.height = screen.availHeight + 'px';
And that's it. Works on iOS 7 and I have no idea why.
Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin
Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:
updateScroll: function(e){
var el = $(e.currentTarget);
var offset = -$(".scrollerWrap").height() + $(el).height();
$(".scrollerWrap").scrollTo(el,{offset: offset});
}
Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.
Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.
Tweaks were applied on the wrapper class/id which is containing the content of the app.
position: relative;
overflow: hidden;
height: 460px;
width: 320px;
Note - Height and width are judged dynamically depending on the device height and width
height = window.innerHeight
width = window.innerWidth
By using jQuery selectors height and width are appended to wrapping class/id.
Works for me.
document.body.style.height = (screen.availHeight - 100) + 'px';
I think the issue here originates from Framework7.
document.body.style.height = window.outerHeight + 'px';
The above code placed in my index.js file worked like charm.

Prevent horizontal scroll in iOS WebApp

I've encountered similar problems before and could never really understand the workarounds, and so I ended up relying on plugins like iScroll. This is such simple task that I refuse to include a plugin for it - what I want is to prevent horizontal scroll in iOS. This includes the rubber band effect for any content that might be on the page but that isn't visible.
From what I understand I need to disable the rubber band altogether first and then apply the touch scroll to a container element (which I've given the id "touch"). Not sure if this is the right approach?
$(document).bind('touchmove', function(e) {
if (!e.target == '#touch') {
e.preventDefault();
}
});
Style for #touch
-webkit-overflow-scrolling: touch;
overflow: hidden;
height: 100%;
#media only screen and (max-width: 768px) {
width: 768px;
}
This doesn't prevent the horizontal width from staying at 728px however, the user is still able to scroll and see the hidden content. Ideas?
Well, the above metas are useful as such:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
They prevent that bug in Safari that happens when the user rotates the screen. However, the most proper way to accomplish the desired functionality is:
Use a parent div with overflow hidden and make sure the height of this div is limited according to the viewport and a child div with overflow:auto or the css 3 overflow-y:scroll. So basically if the size of the content inside the child div exceeds the default size of the child, you can vertically/horizontally scroll through it. Because the parent has overflow:hidden, the content outside of the child will not be displayed, so you get a proper scroll effect. ** Also, if you use overflow: hidden and prevent default for all touchEvents, there will be no scrolling or weird browser behavior**
With the help of JavaScript, make sure that every element in the DOM is scaled according to the viewport, so avoid using static sizes for as many elements as possible.
Bind the touchStart, touchMove and touchEnd events. Safari doesn't always fire a touchEnd event unless a touchMove event is listened for as well. Even if it's just a placeholder, put it there to avoid the inconsistent behavior in Safari.
Horizontal sliding is possible in two ways: load new content in the same div after you detect the slide direction or populate that child div with all the elements and you are good to go and actually shifting the margins/position of the child inside it's parent to 'scroll'. Animation can be used for a slicker interface.
Bind your touch event listeners. I don't know what library or event management system you are using, but it doesn't matter. Just call the respective function for the respective task.
Get the slide direction(left/right):
var slideBeginX;
function touchStart(event){event.preventDefault();//always prevent default Safari actions
slideBeginX = event.targetTouches[0].pageX;
};
function touchMove(event) {
event.preventDefault();
// whatever you want to add here
};
function touchEnd(event) {
event.preventDefault();
var slideEndX = event.changedTouches[0].pageX;
// Now add a minimum slide distance so that the links on the page are still clickable
if (Math.abs(slideEndX - slideBeginX) > 200) {
if (slideEndX - slideBeginX > 0) {
// It means the user has scrolled from left to right
} else {
// It means the user has scrolled from right to left.
};
};
};
This work for me on Android, iPhone and iPad.
<!doctype html>
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
<title>Main</title>
</head>
<body>
...
</body>
</html>
Following link might be useful to you, here vertical is disabled and horizontal enabled, you just need to tweak the code a little for your purpose.
jquery-tools-touch-horizontal-only-disable-vertical-touch
In case you aren't concerned about vertical sliding, you can try the following code also -
document.ontouchmove = function(e){
e.preventDefault();
}
Hope it helps.
If you dont use the meta you will always get a rubber band effect.
<meta name="viewport" content="width=device-width" />
Even if the page fitted exactly the user would still be able to stretch the page wider than it should be able to go, you must use the view port to prevent this, there is no other way...

iScroll 4: Allow users to zoom out from page content as well as zoom in

I am trying to implement a mobile website with the following appearance:
a fixed header
scrollable, zoomable content
content zoomed out when page is first loaded
I have been experimenting with IScroll 4 and the results seem good but there is one problem that I can't find a way around. The contents of my pages are user-generated html tables which are often wider than the screen. I would like the full width of the table to be visible when the user lands on the page. They can then zoom in if they want to.
If you look at the IScroll zoom demo in a mobile browser it demonstrates the problem. The page content is wider than the screen and it's not possible to zoom out, only zoom in.
Changing the initial-scale in the viewport meta tag doesn't help as the whole page, including the header, gets zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=yes, minimum-scale=0.5, maximum-scale=1.0">
(the header will eventually be a JQueryMobile element which I don't want to mess with).
And modifying the zoomMin setting in iscroll.js (v4.2.2, line 119) from 1 to something smaller (e.g. 0.5) breaks things:
// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4,
You can zoom out further but the content then gets stuck and you can't resize it without reloading the page.
Does anyone know a way around this? I'm happy to try other frameworks if necessary.
To allow zooming out, you can use the zoomMin and zoomMax that you identified, but do it when you instantiate iscroll, rather than modifying iscroll.js:
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, onBeforeScrollStart: null,
zoomMin:0.5, zoomMax: 6 });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
I also found I needed to explicitly set the width of the 'scroller' div, like so:
$('#scroller').width(your_width);

iPhone - Hide Address Bar on Page Load

I have a web page that is intended to be loaded on a person's iPhone. When the page is loaded, I want to hide the status and address bar that is at the top. I have seen other sites do this. In an attempt to accomplish this, I have placed the following code in the section of my web page:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script type="text/javascript">
function page_Load() {
setTimeout(function() { window.scrollTo(0, 1); }, 100);
}
</script>
The "page_Load" function is triggered through the onload event of the page's body element. Oddly, when the page loads, the status/title bar is hidden, however, not the address bar.
How do I hide both the status/title bar and the address bar when a web page loads?
Thank you!
For those of you using jQuery here's an even simpler version:
$('body').scrollTop(1);
Figured it out. It turns out my page needed to be "longer". From a absolute perspective, the sizing was correct, but I need to add a couple of pixels at the bottom. This hid the address bar as desired.
Thank you.
A quick and dirty jQuery method...
$(function() {
function orientationChange(e) {
$("body").scrollTop(1);
}
$("body").css({ height: "+=300" }).scrollTop(1);
$(window).bind("orientationchange", orientationChange);
});
This also hides the bar when a person changes their orientation (because it does become visible again normally). Just add this somewhere on your page and it'll automatically (regardless of 100% height/width/whatever) do what you seek. I have not measured the exact height of the address bar but it appears to be around 70px. I put 300 there just to ensure it works.
This page explains more up-to-date status of 'fullscreen'.

Categories

Resources