Make navbar transparent and allow page content to start from top of screen

Questions
12

go to http://framework7.io/kitchen-sink/
open console:

app.views.current.routes.unshift({
  path: '/test/',
  url: './pages/about.html',
  setNavbar:function(page,color){
    var navContainer=page.$navbarEl.length?page.$navbarEl:page.$pageEl;
    var method=page.$navbarEl.length?'closest':'find';
    navContainer[method]('.navbar').css('background',color);
  },
  on:{
    pageMounted:function(e,page){
      page.route.route.setNavbar(page,'transparent'); 
    },
    pageBeforeOut:function(e,page){
      var color=app.theme==='md'?'#2196f3':'#f7f7f8';
      page.route.route.setNavbar(page,color); 
    }
  }
});

app.views.current.router.navigate('/test/');
13

Thanks. This doesn’t solve the problem of the previous page’s navbar being affected by the transparency. ( this problem is iOS only ).

14

just consider that in ios-theme
this :

<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>

is equivalent to this :

<template>
  <div class="navbar-inner">
  </div>
</template>

and everything will be clear to you

15

Why is this? So what you’re saying is that $$(’.navbar’) is not targeting what I think it is?

16

The reason it so obvious for me on the iOS theme is because my previous page is a list and when scrolled down there’s content behind the navbar. This content then flickers in sight before the page transitions on the page where I want the transparent navbar.

17

this page :

<div class="page my-page-class">
  <div class="navbar you-not-gonna-see-this-class">
    <div class="navbar-inner my-navbar-class">
    </div>
  </div>
  <div class="page-content"></div>
</div>

will be parsed like this :

<div class="navbar">
  <div class="navbar-inner my-navbar-class">
  </div>
</div>
<div class="page my-page-class">
  <div class="page-content"></div>
</div>

my example works ok on kitchen-sink

try this :

    pageAfterIn:function(e,page){
      page.route.route.setNavbar(page,'transparent'); 
    },
18

I’m essentially doing the same thing by doing this:

 // Script
pageBeforeIn: function (e, page) {
    page.$navbarEl.parent().addClass('navbar-transparent no-hairline');
  },
  pageBeforeOut: function (e, page) {
    page.$navbarEl.parent().removeClass('navbar-transparent no-hairline');
  },

// CSS
.navbar-transparent {
  background: transparent !important;
}

But the result is still that the previous navbar is changed before transitioning out. Nothing is working, maybe @nolimits4web can shed some light.

19

use (pageMounted || pageInit || pageBeforeIn || pageAfterIn) to addClass
and (pageBeforeOut || pageAfterOut || pageBeforeRemove) to removeClass

20

You likely need to set transition-duration: 400ms to navbar for iOS theme. So it is a same navbar for app pages, so it should change its background opacity for this duration to get more smooth behavior

21

Where should I set the style? Are you suggesting just adding the general css rule?

.ios .navbar {
  transition-duration: 400ms;
}

I don’t notice a difference, either way, it still makes the transitions feel really clunky. Is there no way to just have the page I’m transitioning to go over the previous page including the navbar.?

22

Can you please provide a JSFiddle with minimal setup to what you are trying to do?

23

Here you go:

https://jsfiddle.net/juliusbangert/q1evhxrt/5/

I had to fill out the list page to demonstrate the effect I’m describing… so if you scroll down the list before transitioning to the next page you’ll see what I mean about the glitchy nav bar transparency.

Sorry the jsFiddle is a bit convoluted, wanted to clean it up with handlebar syntax but couldn’t get that working.
The transitions are happening faster in my browser so the problem is more apparent when running on an iOS device.

24

Something like https://jsfiddle.net/cqqzp5zo/

25

Is it not possible to just have the new page content slide over the previous pages navbar?

26

Possible by setting iosDynamicNavbar: false in router settings, then it won’t use single navbar for pages

27

I was playing around with that on Friday. Is it possible to just disable it for one particular page transition but keep the iosDynamicNavbar everywhere else ?

28

No, it won’t work, because whole app structure depends on it. You can just disable navbar for single page by adding no-navbar class to the page and implement your own element on this page

29

I think that is probably the best option for now, feels a bit hacked but I think I’ll do this for now. Is there a recommended implementation of this if I have a pull-to-refresh on the page?

30

How do I use pull-to-refresh with .no-navbar class? I see in the css there is a class and styles for .ptr-no-navbar.

I want to have no navbar as I discussed above, but I also want the pull to refresh functionality.

31

I asked this as a separate question because I thought it was enough of a new topic.