iPad bottom:0px issue - javascript

I am making a testing webapp using jQuery mobile on iPad, and something just don't go as what I expected.
.ui-footer-fixed {
bottom: 0;
}
This should makes the footer to stay at the bottom at all time, but Safari decided to not to agree with it. When you get to the bottom of the page, then you can pull up the whole webpage, which is what I don't want. Is it possible to fix it or is it a limitation of a webapp?
Also, other than that, is it possible to make the header top: 0px without making the whole page going up? Thanks.

To fix the header or the footer, you should use the attribute data-position="fixed".
Check the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
I think the problem you're encountering is linked to the integrated webview of the iPad. This "webview bounce" cannot be avoided if you're developing a simple webapp.
However, you may have a look at these workaround: Disable vertical bounce effect in an ipad web app

Related

Fixed header and footer doesn't stay fixed on my webview app, even though it works fine on the phones regular browser

I've made a simple webview app on android studio. The site loads fine and everythings works but not my fixed header and footer.
In order the give the whole app a sense of "App" like feeling, I designed a header and footer that should stay fixed while the center of the site can be scrolled. This works fine on my phones regular browser but doesn't seem to work in the app. I cannot figure out why?
Can someone please help me?

How to ensure for mobile devices gigya does not add gigya-mobile-modal-model?

I am trying to implement Gigya for our sites. However, when mobile site loads (registration page), it adds the following class to the html gigya-mobile-modal-model that causes the page showing white page rather than the page.
When the html has no such class gigya-mobile-modal-model, then the page shows the form.
How to ensure for mobile devices gigya does not add gigya-mobile-modal-model?
I added the following in gigya console/css. However, I really will like one of the core Gigya developer to look into this.
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body,
body.gigya-mobile-modal-mode {
overflow: inherit;
height: auto;
}
And that seemed to fix the bug for me
It would be interesting to know if there is an elegant solution for that.
I had implemented a workaround:
- added some styles for this white overlay
- added some restrictions to the height and position of the popup content
- added some JS to prevent page from 'jumping' after the registration screen has been closed.
I had this exact problem, and this CSS worked for me:
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body {
overflow: visible !important;
}
Not very elegant, but... it did the trick. YMMV.

How can I use JavaScript/JQuery to resize the HTML of my page responsively?

Click here to view my example.
I am attempting to use this code in my simple website to responsively resize the HTML of the page, even as you resize your window.
Is this not possible or am I just making a simple error? The website was designed for 1360x768 (my resolution), however this code makes it look extremely wonky, and no scroll-bar is shown (unsure why).
The code to resize/scale:
function scalePage(){
document.getElementsByTagName("*").each(function(){
var width = ($(this).width() ) / 1360;
var height = ($(this).height()) / 768;
$(this).css("transform", "scale("+width+","+height+")");
$(this).css("-moz-transform", "scale("+width+","+height+")");
$(this).css("-webkit-transform", "scale("+width+","+height+")");
$(this).css("-o-transform", "scale("+width+","+height+")");
});
}
$(document).ready(function() {
scalePage();
});
$(window).resize(function() {
scalePage();
});
Resizing your page using JS is a bad idea from the get go.
Here's why:
What if your user has JS disabled?
What if your user has an older browser that can't render the JS quick enough?
Each time you resize your browser the content must be re-rendered.
Javascript should be used to add features to the site, not create them.
Secondly,
This approach is not 'responsive'. To achieve a responsive layout on your site you should use CSS to control it, As it is much faster than Javascipt/ jQuery.
A good starting point for creating responsive web pages would be this article: 2014 Guide to Responsive Web Design. Any seasoned front-end web developer will tell you that the key to a good responsive website is to develop mobile first. This will ensure that your site will 'scale' nicely.
Thirdly,
I am going to re-iterate my point about javascript being used to add functionality, More and more do i see sites failing when i have javascript disabled or i browse on an older laptop with IE8 installed. (Although there are arguments against supporting IE8 nowadays.)

AppGyver - phonegap remove loading transition screen

Hello I'm creating a simple mobile app using Appgyver - steroids.
I'm new with this framework I'm trying to find a way to hide the loading screen between different pages in both Android and iOS. I have read their documentation but I can't make it work.
Based on this: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.layers_layers.push.md.html#steroids.layers.push
I 've set keepLoading: false on a view push which didnt work
also after the view push I called:
steroids.view.removeLoading();
as mentioned here: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.view_view.removeLoading.md.html#steroids.view.removeLoading
Nothing removed the black loading transition screen between pages.
Could someone please tell me what I'm doing wrong?
It could be documented better, but if you remove/rename the www/loading.html (for iOS) and www/loading.png (for Android) files in your project, then steroids.layers.push() will not show the loading screen (also means that the push animation will not start until after the WebView has loaded, which can take some time and lead to unresponsive feeling).

Touch navigation with Infinite Scroll and WP

I'm using Infinite Scroll on a WordPress based site to load in more posts, and I just realized that the script won't run on Touch based devices (since it is initiated by scrolling). Are there any known, common workarounds for this?
This might be solved replacing your Infite Scroll with LazyLoading.
Here is an example: http://www.appelsiini.net/projects/lazyload/enabled_container.html
It is also supposed to work for posts (not just images) so you can have the selector for your posts.
Optimized for mobile: http://www.metaltoad.com/blog/improved-lazy-loading-mobile-devices-iphone-android-lazy-load-17
So you can set that it can load hundreds of posts, but when scrolling down, or sliding down on a mobile, it then will load more posts.
other popular sites using lazy loading or a form of this are: facebook, 9gag
Use jQuery UI Touch Punch, Default jQuery Not allow the Touch Event
If you use Modernizr it'll give touch class on the html element. Maybe you can use that to do something else on touch devices.
Use wordpress plugin for your post to display:
Infinite-Scroll
after installtion set your setting like this images:
see the screenshort
set your no of post to display:
setting -> reading
Blog pages show at most: "no of post":
More details and demo to go..http://www.infinite-scroll.com/
Want to see infinite scroll in action using this plugins?
http://aurgasm.us/

Categories

Resources