Question

I have a jquerymobile code for changing the pages with swipe function. My mobile.changePage looks lik this:

$.mobile.changePage(“#page”+window.now, {transition:
“slide”}, false, true);

I am also using localStorage to store settings. I have loaded them to variable transitionSettings:

function loadSettings(){
var transitionSettings = window.localStorage.getItem(“transitionsSettings”);}

The transitionsSettings variable can be ‘slide’ or ‘none’.

I want to insert this string to my mobile.changePage so it would load settings and set the right transition.

I have tried {transition: transitionSettings} and also {transition: +transitionSettings} but it didn’t work. However, my loadSettings() function is in a .js file called settings.js and my mobile.changePage() is in slide.js and both of them are imported to index.html

I think slide.js should access settings.js variables with no problem. But this is not working and the whole swipe functionality is broken by this.

Any suggestions on how to import settings variable to transition?

Answer 1

You just need to store the transitionSettings variable in a global variable that can be accessed anywhere in your code, you can achieve a global var in javascript by attaching any var to the window object, so in your example, you could change loadSettings() function to this:

function loadSettings(){ var window.transitionSettings = window.localStorage.getItem("transitionsSettings");}

and use it in slide.js like so:

$.mobile.changePage("#page"+window.now, {transition: window.transitionSettings}, false, true);

that should work fine..

Also you could probably just get your setting right from slide.js, like so:

$.mobile.changePage("#page"+window.now, {transition: window.localStorage.getItem("transitionsSettings")}, false, true);

That should also work fine..