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
Related
I have made 3 different html pages and I set anchor as [data-ajax="false"] to move another page.
Is there any way to change the page when swipe left or right ?
Also How do I set page change transition ?
page1
page2
page3
Why not use SlideMe (http://slideme.luigiferraresi.it/) ?
There are many jQuery slideshow plugins and it is usually hard to decide which one is better.
SlideMe is a responsive jQuery slider. It is done using CSS3 and works smoothly even in IE7. It is easy to install and has full screen option.
I use this plugin (which I modified a little) and I'm satisfied.
Nicolas
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
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 am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem
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