MBP.hideUrlBar(); Boilerplate Mobile - html

Im using The HTML Mobile Bolierplate and im trying to get the URL Address bar to hide using:
<script src="/static/js/helper.js"></script>
<script>
MBP.hideUrlBar();
</script>
But it's not working, the helper.js loads okay. Anyone know where I'm going wrong?
Thanks

Waiting until the DOM's load event is fired is always a good practice before running UI manipulating code.
For novice users:
jQuery:
jQuery(function() {
MBP.hideUrlBar();
});
Zepto:
Zepto(function() {
MBP.hideUrlBar();
});

For guys coming from Google, I think the MBP.hideUrlBar() function needs a little bit explanation on how to use it. I took time to make it works on Android (native browser only, Chrome can't hide his address bar) and iOS :
First, your page NEEDS to have a scrollbar (it means that your website must NOT be html,body height:100%)
If you want your website to be 100% (which was my case) you will need to calculate manually the height to add to html,body to be sufficient to hide entirely the scrollbar (this mean that we need to know the height of the address bar...)
If you want the MBP function to works on load event, use MBP.hideUrlBarOnLoad(). Beware, it will only works on load event, not on every resize (orientation changes). You will have something like that in your resize function :
function resize(){
firstLoadOfThePage ? MBP.hideUrlBarOnLoad() : MBP.hideUrlBar()
}
(assuming that firstLoadOfThePage is a tag to know when it is the first load of the page (first call of resize function)
Hope it will help.

You can try:
window.scrollTo(0, 1);
to hide the address bar.

Related

Weird looking page after refreshing

I often encounter this issue when refreshing and browsing my asp.net website.
(I covered some of the information that was visible in the pictures below.)
Before Refreshing:
After refreshing:
This also happens when I navigate to a new page, but just like I mentioned before, it doesn't happen all the time but it does happen regularly.
I've added some Jquery to try and fix this but the problem remains.
$(window).bind("resize", function () {
$("#content").width($(window).width() - 16);
});
Also tried this code just to make sure the DOM is ready.
$(document).ready(function() {
$(window).bind("resize", function () {
$("#content").width($(window).width() - 16);
});
});
UPDATE:
I've fixed the content div by setting it's max-width to 980 pixels, the navigation menu is still leaving it's intended position. If anyone can provide an answer as to why this happened it would be appreciated, this max-width thing seems like a bit of a lazy hack because although it fixes the div's width it's a solution for a problem which shouldn't be happening in the first place.
These two pictures show the current problem.
Before refreshing:
After refreshing:

Is there any way to position the scroll bar using css?

I am using jquerymobile 1.4.2.
I tried with all the functions which are specified using jquery(scrollTop).But it snot working in my page.
Is it possible to scroll to a specific position using css when we reload a page or when submit a button.
Your problem is that you have the script at the top of the page. I see you wrapped it in a $(document).ready() but that alone isn't always guaranteed to work, like in your case. $(document).ready fires when the dom is loaded, the dom tells the browser that somewhere in the page there is an image, but the browser won't know the size (in pixels) of that image until it's completely loaded. This causes your issue:
1) dom starts loading
2) dom is done, $(document).ready() fires
3) the script tries to animate the scrollTop but it won't work because the page has not yet reached its complete height (because the images are not loaded), so there is no scrollbar.
4) the images load but the script has already done its job
Solutions:
1) add height and width attributes to your images
2) use $(window).load() instead of $(document).ready()
A hint for the future: if the problem is "sometimes it works, sometimes it doesn't" it's a timing problem 90% (or even more) of the times. So try to figure out what happens and when.
No, there's no way to do that in CSS. Sorry!
Maybe, you should try for this one : jQuery.mobile.silentScroll()

Tapping text input field on iPhone brings up keyboard, but typing will not put in any text

I'm working on making a page more responsive. To that end, I'm trying to make sure a web page looks and functions as intended on mobile devices.
On the desktop, it works as expected.
On the iPhone, it looks as expected, but doesn't work as expected. If you select the input field, it'll focus and bring up the keyboard. It however won't let you type anything. If you select the text input field once again, it'll finally allow you to type.
Here's the link: ASLChoice
Make sure you view it using an iOS device to reproduce the issue. Any ideas? I've googled this issue, and it seems no results are showing on Google that are similar to my issue. I've also searched StackOverflow.
Feedback is certainly appreciated. Thanks in advance!
I know what it is.
I noticed that -webkit-user-select: text; was overwritten, so make sure this property is working fine, well if the browser does not find that property you cannot input anything in your fields.
Cheers
Thanks Fabry for a hint on the solution.
I have implemented a small code (google helped!) to override the CSS -webkit-user-select . Possibly on IPad/IPhone when we launch our application , this particular CSS Property is set to webkit-user-select : none which disables the input fields. To override it with webkit-user-select : text here is the small part of code I preferred to write in Init method of my Controller (whenever the controller is loaded the events would be defined)
jQuery('body').on('touchstart', function(e){
jQuery("input").focusin(function() {
jQuery("body").css("-webkit-overflow-scrolling", "auto");
jQuery("input").css("-webkit-user-select", "text");
});
jQuery("input").select(function() {
jQuery("body").css("-webkit-overflow-scrolling", "auto");
jQuery("input").css("-webkit-user-select", "text");
});
jQuery("input").blur(function() {
jQuery("body").css("-webkit-overflow-scrolling", "touch");
jQuery("input").css("-webkit-user-select", "none");
});
});
The code is for input tags and specific touch events. You can use it for any type of tag like textarea too..Depends on coder!
I hope it helps.

How to completely hide the navigation bar in iPhone / HTML5

I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.
I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)
I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?
The menu is also really well done. Is there any framework to build apps like this one?
Try the following:
Add this meta tag in the head of your HTML file:
<meta name="apple-mobile-web-app-capable" content="yes" />
Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.
Go back to home screen and open the bookmarked site. The URL and status bar will be gone.
As long as you only need to work with the iPhone, you should be fine with this solution.
In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google it for more information or check out their demos.
Remy Sharp has a good description of the process in his article "Doing it right: skipping the iPhone url bar":
Making the iPhone hide the url bar is fairly simple, you need run the
following JavaScript: window.scrollTo(0, 1);
However there's the question of when? You have to do this once the
height is correct so that the iPhone can scroll to the first pixel of
the document, otherwise it will try, then the height will load forcing
the url bar back in to view.
You could wait until the images have loaded and the window.onload
event fires, but this doesn't always work, if everything is cached,
the event fires too early and the scrollTo never has a chance to jump.
Here's an example using window.onload: http://jsbin.com/edifu4/4/
I personally use a timer for 1 second - which is enough time on a
mobile device while you wait to render, but long enough that it
doesn't fire too early:
setTimeout(function () { window.scrollTo(0, 1); }, 1000);
However, you only want this to setup if it's an iPhone (or just
mobile) browser, so a sneaky sniff (I don't generally encourage this,
but I'm comfortable with this to prevent "normal" desktop browsers
from jumping one pixel):
/mobile/i.test(navigator.userAgent) && setTimeout(function
() { window.scrollTo(0, 1); }, 1000);
The very last part of this, and this is the part that seems to be
missing from some examples I've seen around the web is this: if the
user specifically linked to a url fragment, i.e. the url has a hash on
it, you don't want to jump. So if I navigate to
http://full-frontal.org/tickets#dayconf - I want the browser to scroll
naturally to the element whose id is dayconf, and not jump to the top
using scrollTo(0, 1):
/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () { window.scrollTo(0, 1); }, 1000);​
Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10
and you'll see it will only scroll when you've landed on the page
without a url fragment.
The problem with all of the answers given so far is that on the something borrowed site, the Mac bar remains totally hidden when scrolling up, and the provided answers don't accomplish that.
If you just use scrollTo and then the user later scrolls up, the nav bar is revealed again, so it seems you have to put the whole site inside of a div and force scrolling to happen inside of that div rather than on the body which keeps the nav bar hidden during scrolling in any direction.
You can, however, still reveal the nav bar by touching near the top of the screen on apple devices.
Simple javascript document navigation to "#" will do it.
window.onload = function()
{
document.location.href = "#";
}
This will force the navigation bar to remove itself on load.

Why do page anchors sometimes miss?

On an HTML page, a link like this:
Location on Page
...should navigate to this spot on the page:
<a name="pagelocation">
But in my experience, it sometimes misses - especially when linking from another page (like <a href="somepage.html#pagelocation">). By "misses," I mean it scrolls to the wrong spot on the page - maybe close, maybe not.
Normally, the target location ends up at the top of the screen. I know this can fail if there's not enough room below the anchor to scroll it to the top of the screen.
Why else would it fail? Does it depend on layout at all? How can I fix it?
(I'm keeping this general because I'd like a catch-all reference answer.)
Update 1
Thanks for the pointers so far about non-explicit image sizes. But what about on a page where all the elements have explicit size? (I'm dealing with one now.)
Quite often the scrolling can occur before the page has finished loading. If you have images without widths and heights, the page will jump, then load the image and re-layout itself, making the place you previously jumped to seem wrong.
Edit: Anything else that can change page layout should also be considered with suspicion... this include javascript and CSS that's not loaded in the <head> (never mind that all CSS should be loaded in the head; it isn't always).
If the page is bounced through a redirect, I believe IE will scroll the end page but Firefox won't.
JS Solution
Run this function on document ready.
function goToAnchor() {
hash = document.location.hash;
if (hash !="") {
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
window.location.href = hash;
}
}, 1);
}
else {
return false;
}
}
I believe the behavior you are seeing is the result of the browser locating to that spot on the page before all images have finished loading. Once the images finish loading, then the layout of the page has changed (the page is likely longer vertically, for example), causing the location of where the anchor should be to have changed - but the browser still thinks it has already navigated to that anchor.
As mentioned above, this is probably due to images being rendered late and 'adjusting' the layout as they load.
If you can specify the size of the images then that much room can be allocated before they render, which should prevent the problem.
As a side note I've had this problem before in the form of using forward/back between enough pages that the images needed reloading, causing me to end up in the wrong place after they had rendered.
I have also seen this happen when JavaScript creates a drop-down menu at the top of a page. Then, once the menu has been finished, it is hidden, scrolling up the content below.
In the meantime, the browser has already set the target location at the top of the window. Hiding the menu a the very top of the page moves the target location up off the top of the window.
Note that you can add id="pagelocation" to just about any HTML element, for the same result, which saves you adding the additional anchors for link destinations.
OK. I think this is new. Using HTML5's autofocus will cause a misfire, as will jQuery's focus() method. Took 90 minutes of trial and error to discover this because I thought the issue was image related :)