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
Related
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
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
I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
I´m using jquery mobile for an iPad app, and I wanted to have the typical splitview layout so I used the splitview plugin which is working fine until now, but I would still have some minor questions:
Can my first page be a normal page, meaning non-split and then when for example I click on a button go to the second page which would be split?
How do I do to enlarge the left panel if I find it a bit narrow?
Thank you for your help.
I am having the same issue.
I am able to workaround this by providing rel="external" on the link in my navigation menu. This however reloads the entire page, and the ajax effect is gone.
<li>Some Text</li>
I will be spending some time on it this weekend to get it working through ajax, will let you know if I find a solution.