javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -


i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled.

straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing.

jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle, hide or show event that.

how can detect when toolbar toggled, reposition banner?

.banner {    position: fixed;    background-color: darkseagreen;    top: 46px;    min-height: 48px;    width: 100%;    text-align: center;    line-height: 48px;  }
<!doctype html>  <html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>  </head>  <body>    <div data-role="page" id="page-one">      <div data-theme="a" data-role="header" data-position="fixed" data-fullscreen="true">        <h1>first page</h1>      </div>      <div data-role="content">        <div class="banner">call-to-action</div>      </div>      <div data-theme="a" data-role="footer" data-position="fixed" data-fullscreen="true">        <h3>footer</h3>      </div>    </div>  </body>  </html>

solution 1:

extend mobile.toolbar widget.

$.widget("mobile.toolbar", $.mobile.toolbar, {   toggle: function() {     this[this._visible ? "hide" : "show"]();     if (this._visible) {       /* visible */     } else {       /* hidden */     }   } }); 

solution 2:

listen animation end events.

$(document).on("pagecreate", function() {   $(".ui-header").on("webkitanimationend mozanimationend msanimationend oanimationend animationend", function(e) {     /* */   }); }); 

demo


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -