So I'm working with a few multipage Jquery Mobile documents that I want to be able to navigate between but not leave the WebView created by the mobile web app and still have the transitions. I've come across Todd Thomson's subpage widget and basically couldn't understand how to set everything up (visual learner and there are no template or demos on his github, no worries Todd if your out there).
So my question is, when you navigate from index.html to a multipage Jquery mobile document,page1.html via ajax is it possible to clear out what remains from the index.html and load the rest of the page1.html after the transition?
When you link from index.html to page1.html which is a mutli page document you need to add the attribute rel="external" to the link. This clears out the dom for you to allow linking between the multiple pages in the document via the # anchors.
Related
I'm trying to implement Swup.js into a site in Oxygen for Wordpress. For some reason, the correct version of the site is not loaded when I use Swup.
For some reason, the correct version of the site is not loaded when I click the links. It seems to load a responsive version of the site instead. Here is the link to the page: https://testswup.kastanjeskolan.nu/ If you go to Our Services, you get one version of the page. But if you update/reload, you get the correct version. Here is a video to show what I mean.
Does anyone have any idea why this is happening?
Thanks for any help.
Swup JS only loads what's in the Swup element/Swup body. It keeps the same header or of the page for all the pages.
Oxygen builder generates CSS files for each page created. If you check page source of the Proucts page on your site, you'll see the CSS file for products page generated by Oxygen. (pointed in the image below).
Now when you move from Products page to Services page, this CSS file remains as is because it is in the section of site. And the CSS file for Services page is also not loaded because the is not refreshed, because that's how Swup works.
Solutions
Solution for this is having a single CSS file which contains all the CSS for all the pages. But not sure if that would be output by Oxygen builder.
Use the Head Plugin provided by Swup. Although not sure if it will work correctly with Oxygen Builder.
I'm working on a simple Javascript-based windows "app" (not a website, just some HTML & JS files all in a single folder that will be used on a local PC).
The startup page is Page1.html. This page contains 2 buttons ("back" and "forward"), and an iframe which displays the content of Page2.html. And Page2.html also contains an iframe, which displays various other pages in the same folder (we'll call these the "color" pages --> Red.html, Green.html, Blue.html, etc).
So in other words, when Page1.html is started up, you're looking at the contents of an iframe inside of an iframe (which would be Red.html, etc.).
So here's what I need to accomplish...
I need to use the back/forward buttons on Page1.html to navigate between the various "color" pages (which are framed inside of Page2.html).
I've found that it's easy to navigate backwards/forwards an iframe that's on the same page as the JS that's controlling the iframe, by using something like...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.forward();
});
});
etc etc.
But that's not what I need. What I need (and can't figure out how to do) is to control an iframe that's on another page, like so...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.forward();
});
});
I've put the above JS in a single file (Main.js), and then called that file from both Page1.html and Page2.html (after I included the jQuery libary on each page, of course). But it doesn't work.
So... does anyone know how to accomplish this?
BTW- if it makes any difference, the solution only needs to work in Chrome.
Thanks!
Most of the example sites (like below) that JQM link to use a common navigation system, I'll use this site as an example:
http://www.takemefishing.org/mobile/
When linking to another page that isn't already in the DOM, they use the ajax navigation for example, on the homepage they link to 'Fish Species' with a href of
#/mobile/fish-species.
On click, this actually loads the page into the DOM via ajax from /mobile/fish-species which only contains the <div data-role="page" id="fish-species">... content here ...</div>
Then the address bar is updated to /mobile/#/mobile/fish-species.
If you go directly to /mobile/#/mobile/fish-species (e.g. by using the refresh button or a direct link), it loads the homepage with all the CSS, JS etc etc, and then via ajax loads /mobile/fish-species into the DOM seemlessly.
This structure/system seems to be the common method used on JQM sites, for example Walt Disney and Standford University.
My question is how are they making this magic happen? I suspect JQM is doing almost all of the work, and there is just some config option or flag that I am missing.
Here's what I've tried
I have a basic JQM homepage /mobile/index.html with the DOCTPYE, <head> section with CSS, JS etc etc included, and a link to another page page2.html:
<li>Page 2</li>
Page 2 is similar to the 'Fish Species' page whereby it just containts the:
<div data-role="page" id="page2.html">... content here ...</div>
Now, when I click the link on the homepage, page2.html is loaded into the DOM via ajax and shown. The problem is the addressbar shows:
/mobile/page2.html
If I then click the browsers refresh button, or navigate directly to /mobile/page2.html, of course the browser just loads page2.html containing only the page <div> and no head section or CSS/JS included.
What am I missing to get the link to show #/mobile/page2.html in the address bar when loaded, and then if refreshed I want to load the homepage then pull page2 in via ajax, just like the example sites do?
I am using the latest JQM at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Jquery Mobile will interpret navigation to the address #address as navigation to the page named address
This means that you can define in your single index.html two pages, for instance
<div data-role="page" id="index.html">link to JQM page2</div>
<div data-role="page" id="page2.html">... content here ...</div>
Clicking on the link in the first page will load the content of the second page and update the location displayed in your browser's address bar accordingly.
This is the standard JQM approach, used for instance in the stanford website you linked to.
The Disney and Fish websites look like they are doing things slightly differently as they apparently dynamically generate the target page by binding to the pagechange event, analyzing the target address and acting accordingly. You can see more details on dynamically generating pages in the jquery mobile docs.
This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Hope this helps.
I'm using JQuery Mobile for a simple mobile web application.
I'm using Single Page Anatomy.
When i'm performing $.mobile.changePage("sample.html",{transition : pop});
This seems to load the page without javascript.
Is there any work-around ? or Is there any new API to load external pages with page transitions also with DOM being loaded properly ?
If you inspect the DOM using firebug you'll see that the page is added to the DOM except that when you navigate away it is removed. If you want the page to stay in the DOM you can load the page first using the loadPage method
$.mobile.loadPage( "sample.html" );
And then navigate as you normally would using either a link or $.mobile.changePage
If you are talking about the javascript files not being loaded then this is intentional and it depends on how the page is loaded) and I don't believe this is new behavior specific to the JQM 1.1.1 release.