framework7

Open full view…

Change navbar title on slide change

dancormier
Thu, 29 May 2014 21:09:14 GMT

Like the photo browser changes the photo number in the navbar title, I'd like the ability to change the navbar title on slide change.

dancormier
Thu, 29 May 2014 21:14:22 GMT

Like the twitter app changes the navbar title: [Twitter](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s1/v1401398020/:framework7:Lfnp:twitter.gif.jpg)

Vladimir Kharlampidi
Fri, 30 May 2014 08:18:46 GMT

You need to use callbacks for this. But to use callbacks you need to initialize slider manually (remove slider-init) class and in js: --- var slider = myApp.slider('.slider-container', { //Here comes options if you want to rewrite default ones, for example speed: 300, //callbacks onSlideChangeStart: function() { //function will be executed in the beginning of transition, probably you need to }, onSlideChangeEnd: function() { //callback after transition } }) --- List of all avail callbacks: onTouchStart, onTouchMove, onTouchEnd, onSliderMove, onClick, onDoubleTap, onSlideChangeStart, onSlideChangeEnd More docs about slider will be released today/tomorrow

dancormier
Fri, 30 May 2014 17:07:23 GMT

Thanks for your quick reply, Vladimir.

АлександрМаслаков
Mon, 30 Jun 2014 11:11:22 GMT

Hey, I have the same question, but I need to know how to change title when I working with dynamic navbar. I need to get navbar .center element only for current page, but when I trying to find .center element - $$ return all elements that I have in DOM. Can I change navbar title of current page through framework API, not through searching DOM element?

Vladimir Kharlampidi
Mon, 30 Jun 2014 20:59:11 GMT

If you need on page load you can use 'navbarInit' event: --- $$(document).on('navbarInit', function(e){ var navbarCenter = $$(e.detail.navbar.innerContainer).find('.center'); // and replace it navbarCenter.text('hello world'); }) --- If somewhere else you can use DOM search, it is not so hard. For example, if it is in main View: --- $('.view-main').find('.navbar-on-center .center').text('hello world'); --- Note, that after you change its center element you will probably need to recalculate positions: --- myApp.sizeNavbars('.view-main');