javascript - How To Add 'Back' Parameter on Slide Transition? -

i'm using intel's appframework , have code :

<div title="welcome" id="login" class="panel" selected="true"> <!-- code here --> <a href="#register" class="soc-btn gray-btn left" data-transition="slide">sign up</a> <!-- code here --> </div  <div title="register" id="register" class="panel"> <!-- code here --> <a href="#login" class="soc-btn gray-btn left" data-transition="slide">cancel</a> <!-- code here --> </div> 

the transition #login #register works charm, page loaded right-to-left. how apply 'slide-back' transition make 'cancel' button on #register load #login left-to-right?

i saw on ui/transition/all.js documentation :

initiate sliding transition. sample show how transitions implemented.  these registered in $ui.availabletransitions , take in 3 parameters.     @param {object} previous panel     @param {object} current panel     @param {boolean} go     @title $ui.slidetransition(previouspanel,currentpanel,goback); 

but how add 'goback' parameter code? thank you

here's complete code of slide transition :

(function ($ui) {      /**      * initiate sliding transition.  sample show how transitions implemented.  these registered in $ui.availabletransitions , take in 3 parameters.      * @param {object} previous panel      * @param {object} current panel      * @param {boolean} go      * @title $ui.slidetransition(previouspanel,currentpanel,goback);      */     function slidetransition(olddiv, currdiv, back) {          olddiv.style.display = "block";         currdiv.style.display = "block";         var = this;         if (back) {             that.css3animate(olddiv, {                 x: "0%",                 y: "0%",                 complete: function () {                     that.css3animate(olddiv, {                         x: "100%",                         time: $ui.transitiontime,                         complete: function () {                             that.finishtransition(olddiv, currdiv);                         }                     }).link(currdiv, {                         x: "0%",                         time: $ui.transitiontime                     });                 }             }).link(currdiv, {                 x: "-100%",                 y: "0%"             });         } else {             that.css3animate(olddiv, {                 x: "0%",                 y: "0%",                 complete: function () {                     that.css3animate(olddiv, {                         x: "-100%",                         time: $ui.transitiontime,                         complete: function () {                             that.finishtransition(olddiv, currdiv);                         }                     }).link(currdiv, {                         x: "0%",                         time: $ui.transitiontime                     });                 }             }).link(currdiv, {                 x: "100%",                 y: "0%"             });         }     }     $ui.availabletransitions.slide = slidetransition;     $ui.availabletransitions['default'] = slidetransition; })(af.ui); 

there no way this, because back parameter hardcoded on false (zero, in fact).

i edited appframework.ui.js, last lines of checkanchorclick().

where says:

//lookup clicked anchor recursively , fire ui own actions when applicable var checkanchorclick = function(e, thetarget) {         // ...         href = thetarget.hash.length > 0 ? thetarget.hash : href;         $.ui.loadcontent(href, resethistory, 0, mytransition, thetarget);         return;     } }; 

i've added new property hmtl called data-back, set on true if want reverse slide transition. i replace magic zero goback variable when calling $.ui.loadcontent().

//lookup clicked anchor recursively , fire ui own actions when applicable var checkanchorclick = function(e, thetarget) {         // ...         href = thetarget.hash.length > 0 ? thetarget.hash : href;         var goback = thetarget.getattribute("data-back") === "true" ? true : false;         $.ui.loadcontent(href, resethistory, goback, mytransition, thetarget);         return;     } }; 

and remeber add property link:

<a data-back="true" href="#login" class="soc-btn gray-btn left" data-transition="slide">cancel</a>