There are two Pages A and B. On a small device, A should be displayed by default and B should be available with a swipe event. On a larger device, both pages should be displayed next to each other.
I really have no clue how to approach this. I tried using another library (iDangero.us swiper) for the swipe, but I am also using knockout.js with a lot of dynamic controls and using swiper in this scenario was quiet a mess (it is tough enough to sync knockout.js and jQuery Mobile). So I plan to fall back to using jQuery Mobile pages and transitions.
You can Use Iframes if you are familiar with them.
Iframe touch page scrolling may be an issue. But There are various easy solutions.
Pages structure
main-page.htm
tablet-page.html
page1.html
page2.html
.
Jquery to detect screen viewport width and redirect to the tablet-view if needed.
in main-page.html file add
$(window).onload(function() {
var wi = $(window).width();
if (wi => 900){
window.location.href = 'tablet-page.html';
};
});
tablet-view.html has 2 Iframes with page1 and Page2 html links.
use some css to auto resize the iframes to 50% 50% view. A container may be need.
result
if its tablet size then
excuse the bad graphics
How to make a one page website with parallax scrolling working both desktop and mobile devices (also iOS)?
This is my code for now... it speeds up 1 div when a scroll is triggered, but on iphone, it only moves when you let your finger off the screen and i'd like it to scroll smoother with a nice slide :)
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
$('#speedup').css('margin-top', (top/10)*-5);
});
});
Firstly, you have to use css2 media query, or using em instead of px for you css styles to ensure your browser supports both mobile/desktop web versions.
then, of course you need javascript to help you do the parallax scrolling for you web game/application
I'm trying to figure out how to enforce a minimum height (for fullscreen effect) on a jquery-mobile dialog box, essentially I'm trying to cover over the backdrop entirely with the dialog box itself.
I'm using a header but no footer if that makes a difference.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps
I have a page that is straight from the jQueryMobile site. I'm including a table of names, but on the iPad, it doesn't allow the user to pinch the screen size.
Please refer to this answer:
http://forum.jquery.com/topic/problem-with-the-zoom-on-ipad
In short, jQuery Mobile injects a fixed viewport size into the page.