In my game app I use :
<div id="player_screen_page" data-role="page" data-dom-cache="true" class="background">...</div>
construction to keep previously-visited page. But after use cache I need to delete it. I didn't find answer how to do this on the Internet.
Related
In jQuery Mobile, we can use the "data-title" attribute to specify a page title for each individual page within a multi-page HTML document, like...
<section id="home" data-role="page" data-title="Home Page Title">
Which of course makes a lot of sense, because there may be several individual mobile pages contained within a single HTML document, so it's good to be able to specify a unique page title for each one, from an SEO perspective.
But what if we also want to specify a META description for each individual mobile page (in a multi-page document). Is this possible? Or are we stuck using the single META description in the head section of the document? (which would obviously be less than ideal from a SEO perspective).
I've been researching this topic online for the past hour, but surprisingly have yet to find any info on it.
Anyone have the scoop on this?
Based on the jQuery Mobile docs, the <script> tags to load jQuery and jQuery mobile should go inside the <head> element.
I've always been told to load <script> tags at the bottom of the page for better performance. For example: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
Is there a reason to prefer one location over the other for jQuery Mobile scripts?
Putting the <script> at the bottom is to facilitate faster loading of external elements before code executes, but in jQM nothing will really show until the pageinit/pageshow events fire, which is basically jQM's version of document.ready (everything is loaded and the DOM is there etc)
I can imagine in larger sites where you want content to be displayed ASAP this would come in handy, kind of like attaching passive on listeners even before the document.ready is another trick people use.
But all these speed optimizations don't mean much when you're waiting for a document.ready to display anything.
I am looking for a somewhat slick solution to have an "in-page" dialog box on one of my JQM pages. I am trying to avoid leaving the page, because the dialog popup is a "lookup" that helps a user populate a form field. I don't want to leave the actual page, so to not lose any other information the user has already entered.
My first attempt was using the simpledialog2 plugin, which I use on other parts of the site for popup menus. While it works great for basic links, it gets really clunky on longer lists. It feels very limited when it comes to sizing and especially scrolling.
I somewhat like the built-in JQM implementation of the dialog popup for long multiselects. To give you an idea, take a look at this jsfiddle
Does anyone know how this dialog popup is implemented and if I can call the same method in some way? If not, does anyone know of alternatives to pro due such an "in-page" dialog?
Any help is appreciated.
PS: I can't use the multi-page template in JQM, because the site is built as a web app and I am relying on the AJAX loading of individual pages, which the multi-page template doesn't support.
The dialog you illustrated in your jsfiddle can easily be called in its own page. You can either put data-rel="dialog" in an anchor tag dialogor you can add data-role="dialog" to your page container. Here is an example
dialog.html
<div data-role="dialog">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Also note that they are planning on producing the in page dialogs I believe your looking for in JQM v 1.2 . Here is a preview of that http://filamentgroup.com/tests/popup/docs/pages/popup/index.html. So I guess if your really patient you'll get exactly what your looking for.
Here you need an undismissible popup rather than a dialog.
<div data-dismissible="false" data-role="popup" id="myPopup">
<span>Content...</span>
</div>
Now in javascript call,
$('#myPopup').popup().popup('open');
From the index page of the site, I am loading another page which has 3 divs with the data-role of page.
However, jquery mobile only appends one of the pages to the dom.
I presume the changePage function is grabbing the first div with a data-role of page and inserting it. I wonder if there is a way to get it to insert all the divs with a data-role of page or dialog.
Any help more than appreciated.
thanks
What you are trying to do is currently not possible with JQM, as only the first page from a multipage gets loaded into the DOM.
I would point point you to a link in the JQM docs that would explain this behavior, but there isn't one... I already filed this as issue on Github, so that the Docs at least make clear what you can do and what does not work with multipages.
As I'm stuck with the same issue I started writing a plugin to be able to load multipages (among other things). I still have a few things to sort out, but when it's working I can send you the link.
You can use a "subpage" plugin to get the behavior you desire. Basically one page contains a bunch of subpages, which all get loaded into DOM. The pattern would be:
<div data-role="page">
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
</div>
The project is available here: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget.
I've personally been having problems with this plugin, but I think for simple scenarios, it works fine.
Also, there is no documentation for it. For example, I still don't know the proper way to call $.mobile.changePage() with this plugin. :)
According to JQM at this page:
"jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"
You can also add rel="external" attribute to the href pointing to Page B.
rel="external" and data-ajax="false" will force JQM to load the entire page as new. Unfortunately, it appears this removes the ability to use a page transition from PageA to PageB.
Example: Page B
I'm now looking to load Page B with JQM methods instead of relying on the automagic mechanisms. It appears you must use single page templating throughout (as recommended) or pagecontainer load method (essentially the same as single page) if you want hashtag transitions within a "single page", after the DOM is initially loaded. For example, link to a single page, listen to "pageinit" of that page, then use pagecontainer("load"). Make sure the subsequent page (the page your're injecting) is not needed as a direct incoming page.
I have to create a bunch of these "Share this on" Technorati, Digg, Facebook, Reddit, del.icio.us, StumbleUpon, MySpace and so on. It is very easy to find online icons for this task, but it is a little more difficult to find what URLs I should link.
Is there any updated list of all these services? Of course I could copy them from other sites having this, but I am not sure they are updated, and moreover maybe there is some GET parameter I want to set differently.
EDIT: I do not really care for services doing this for me, I just need the addresses. Among the reasons I do not like the external services is the fact that I can't customize the buttons.
Try AddThis - it is a free service that allows you to embed a ton of these things pretty easily.
You should not reinvent the wheel. There are plenty of tools that already do this, as well as keeping the information up-to-date for you.
http://sharethis.com/ is the first one I found on Google.
AddThis and ShareThis have +350 ways of sharing links to your site.
If you don't want to depend on them, I'm afraid you do have to reinvent the wheel.
Check out the API:s of FaceBook and Twitter to start with.
Then continue with the rest, or surrender to AddThis.
On Facebook's developer pages (link above), it's very easy to find this example (which I assume is what you want, but for all social networks):
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
</body>
</html>
Have you inspected the javascripts from AddThis and ShareThis yet?
Good luck!