Using Reveal.js, I can't find any documentation of this feature. I'm positive I've seen this somewhere. And I would sure like to be able to reload the page and not have to navigate through the entire deck every time.
Does it exist as a hidden feature? Does anyone know of a "plugin" or patch?
The trick is to set history: true in the configuraton at the end of the index.html page:
Reveal.initialize({
history: true,
...
The update from 2022 relevant for Reveal.JS 4.3.1:
Trick with history no longer works, use hash instead:
new Reveal({
plugins: [Markdown, Highlight],
hash: true,
}).initialize();
Link to the documentation
Related
With the arrival of jQuery Mobile 1.3, the .navigate() function has been added. I've heard that is the recommended way to change pages, and it seems they addressed the issues of transferring data between pages.
The problem is, since it has been simplified, how do I access the other options that changePage offered? I would really like to use the {data} portion of the .navigate() but I would also like to set a few options that I do normally with changePage (such as transition, direction, etc).
I currently have a "router" that listens for all navigate events, then passes along any data that it receives on to the next page (doing some other simple logic as well, like setting up the views controller).
Is there some hidden properties in the [,options] that I would be able to set up simple things like direction and transition?
$.mobile.navigate is still a new function, according to code comments it is also a work in progress.
Transition is active among hidden options;
$.mobile.navigate( "#bar", { transition : "slide", info: "info about the #bar hash" });
Working example: http://jsfiddle.net/Gajotres/g5vAN/
On the other hand, change to direction reverse is still not implemented, default false value is applied.
The other way would be to use:
$.mobile.pageContainer.pagecontainer("change", "target",
{transition: "flow", changeHash: false, reload: true})
Link
Use the Pagecontainer widget added in v1.4.
$(":mobile-pagecontainer").pagecontainer("change", "jquerypageIdentifier",{ options in key value format } );
e.g
$(":mobile-pagecontainer").pagecontainer("change", "#nextpage",{ transition: "slide",role: "dialog" } );
I have an application which includes a series of forms, each on their own page.
I do not want some of these pages to be added to the history stack. So that when the user presses back, it skips them.
Jquery-mobile does this with dialogs. You can configure this to happen with ALL pages (or any other data-role) but not with just some pages.
Does anyone know how to do this? Alternatively, would it be possible to create a new data-role that extends "page". If that was possible, then I could disable history for all of those pages.
in this case, you can call $.mobile.changePage() by yourself:
$.mobile.changePage( "url", {
changeHash: false //do not track it in history
});
http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html
I was facing the same issue and I was going berserk!!! Finally, I was able to do it with the following code that does just that!
The code below automatically prevents storing the changed locations for all pages in the current document.
Please note that it has been tested with jqm 1.4.2
<script>
$(document).on("pagebeforetransition",function(event, ui){
ui.options.changeHash = false;
}) ;
</script>
Hope it helps
Checkout this question, pretty much the same as what you are trying to do.
How to modify jQuery mobile history Back Button behavior
Thanks,
Alex.
I've been searching for a way to remove the initial page container after jQuery mobile loaded the next page content via $.mobile.changePage(...)
What I'm experiencing is that this initial DIV element, created when the page is first shown will always remain on the page - and will only be hidden after calling $.mobile.changePage(...)
I need this initial page container to be removed instead, since some old data reside there that should be reset on first page change.
Anyone has a solution? Been searching the web for it but to no avail.
I have also tried to do $('#first-page').remove() after I called $.mobile.changePage(...), but that will remove the initial page and make the new loaded page hidden!
EDIT: solved by clearing up the initial DIV using .html("")
You could just make next page load without ajax, this should remove the initial page.
data-ajax="false"
Hope this helps!
I take it that you are dynamically creating these pages. There is a hidden method in the API, but you can apply it to any page and then upon that page's exit, it will be removed.
$.mobile._bindPageRemove
So, it might look like this
newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );
NOTE: Since this is a hidden method, it is part of the hidden API and could be subject to change without notice upon upgrade. Test carefully upon upgrade if you use this.
I did:
$.mobile.changePage('login.html', {changeHash:false});
changeHash (default: true) Type: Boolean Decides if the hash in the
location bar should be updated. This has the effect of creating a new
browser history entry. It also means that, if set to false, the
incoming page will replace the current page in the browser history, so
the page from which the user is navigating away will not be reachable
via the browser's "Back" button.
I want to be able to check if sIFR has activated after the page has loaded so that I can then make other adjustments - sort of like setting up () alternate behaviours
Since sIFR is already checking for the existence of flash, is there an easy global flag I can refer to, or should I just query the DOM to see if the sIFR-replaced class has been added ?
It would be more elgegant if you could just test on a flag ;-)
With sIFR 3, you can check for sIFR.isActive.
I added the following code to change the hash to the tab name:
$("#tabs > ul").tabs({
select: function(event, ui){
window.location.hash = ui.tab.hash;
}
} );
This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).
I tried changing it to:
$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})
This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.
I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.
Thanks.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.
To my knowledge, there are 3 possible workarounds
1) Change the browser hash to something else such as #thecars.
2) Change your existing markup in some similar manner.
3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.
You could try having a "return false;" after you set the window location but I can't be sure.
Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.
You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.
This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.
There is also the History Event plugin and the jHistory plugin to achieve what you want.
Would like to hear back how things turns out and what solution you went with.
What Chris suggested worked for me, had no clue even a div could link via the #. So my solution is quite simple, in the show: event handler, I do the following, it's not perfect in that back button won't be in history, but that's another job for BBQ history plugin. All my divs simply have id="tab-cars", id="tab-trucks"... strip out the 'tab-' part and put it into the url hash.
var name = ui.panel.id.substr(4);
location.hash = '#'+name;