framework7

Open full view…

How to load page1.html in mainview?

manmade
Mon, 22 Sep 2014 09:48:19 GMT

Hi I´m totally new to Framework7 and I´m trying to load a separate page (page1.html) in a view when the app loads. It´s going to be a tabbar app with 4 views, where it should have loaded the content in the view-main view at startup. I have this in my index file: <div class="views tabs toolbar-through"> <div id="view-1" class="view view-main tab active"> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">First View</div> </div> </div> content...load page1.html here??? </div> </div> and my my-app.js file looks like this: // Initialize your app var myApp = new Framework7(); // Export selectors engine var $$ = Dom7; // Add views var mainView = myApp.addView('.view-main', { //dynamicNavbar: true //url: 'page1.html' }); mainView.loadPage({url: 'page1.html', animatePages: false}); Why isn´t url: 'page1.html' in "var mainView.." load the page? And do I really need the "mainView.loadPage..." at all? What am I doing wrong? Any input really appreciated, thanks!

Vladimir Kharlampidi
Mon, 22 Sep 2014 14:17:39 GMT

So you can do it like: --- mainView.loadPage({url:'....', animatePages:false, reload: true});

manmade
Mon, 22 Sep 2014 14:20:01 GMT

So I tried with this and it´s not working, I feel like I miss something else, or? var mainView = myApp.addView('.view-main', { url: 'page1.html' }); mainView.reloadPage({url: 'page1.html', animatePages: false}); I

manmade
Mon, 22 Sep 2014 14:20:26 GMT

ok I will try, thanks

manmade
Mon, 22 Sep 2014 14:22:55 GMT

so I tested with this and it is not loading it var mainView = myApp.addView('.view-main', { //url: 'page1.html' }); mainView.loadPage({url:'page1.html', animatePages:false, reload: true}); and my index: <!-- Your first view, it is also a .tab and should have "active" class to make it visible by default--> <div id="view-1" class="view view-main tab active"> </div>

Vladimir Kharlampidi
Mon, 22 Sep 2014 14:24:18 GMT

Your View HTML layout is not full, it also should contain .pages and .page containers, refer to docs http://www.idangero.us/framework7/docs/app-layout.html#.VCAxWJN_tyo

manmade
Mon, 22 Sep 2014 14:39:04 GMT

ok, thanks, but it is still not loading the page1.html page? It is displaying the text from the index page? I thought that since you have .pages and .page in the page1.html it was not needed in the index page.

manmade
Mon, 22 Sep 2014 14:48:43 GMT

I don't know if you have the time, but if you look at the bottom of the text here http://www.manmade.se/iphone/matappen/tabbar/ it is from the index file.

manmade
Mon, 22 Sep 2014 14:49:23 GMT

I have to leave now, will have to look at this tomorrow. thanks again

Vladimir Kharlampidi
Mon, 22 Sep 2014 14:53:30 GMT

Ok, i see, you need to upgrade F7 to latest 0.9.6 version where this methods are available

manmade
Mon, 22 Sep 2014 15:15:13 GMT

ok, thanks I didn't realize that I had an old version, will test tomorrow, thanks a lot!

manmade
Tue, 23 Sep 2014 14:05:13 GMT

Hi, ok, so now I got it working :-) Have a look and see what you think!? It works great, you have done a really good job and I really appreciate it! Just one more question? I would like to hide the toolbar at the bottom when I start to scroll up and make it visible when I scroll down again. Do you have any suggestions about that? I will check in the docs and see if I find anything, but a pointer is always appreciated, thanks again! Claes

Vladimir Kharlampidi
Tue, 23 Sep 2014 14:16:14 GMT

There is no such feature to hide navbar/toolbar on scroll, but you can try to implement it by your self. Here some kind of solution http://www.idangero.us/framework7/forum/#!/feature-requests:hiding-navbar

manmade
Tue, 23 Sep 2014 14:39:24 GMT

ok, thanks will look at the link. But can I detect the scroll up and scroll down in a page?

Vladimir Kharlampidi
Tue, 23 Sep 2014 14:50:37 GMT

It is done in provided example

manmade
Wed, 24 Sep 2014 07:49:43 GMT

Hi, thanks it works to hide the navbar in the mainView, but I don´t know how to hide the the toolbar since it is not inside the mainView? It´s inside the .views div. Any thoughts? With the var mainView = myApp.addView('.view-main'); you control the mainView, but how do I get control over the main wrapper the .views div? var wrapperView = myApp.View('.views'); Well it´s not working, but some thing like it? I hope you understand what I mean :-) Thanks!!

manmade
Wed, 24 Sep 2014 07:58:18 GMT

Does the toolbar has to be inside the mainview for mainView.hideToolbar(); to work? I guess it has, but is there a global one instead, something like - Views.hide.Toolbar(); I don´t think it is, but just wanted to ask. I just simple want to hide the toolbar when scrolling up, regardless of what view is loaded(I have 4), thanks again.

manmade
Wed, 24 Sep 2014 09:33:44 GMT

Ok I have tested all I can think of but no luck! I also tried to hide the navbar(as a test) in the second view - view2 - but I can´t get this working! I put it in a function that I call when I display the view2 by clicking on the toolbar icon onclick="laodView2();". loadView2(); $(document).load('pageInit', function(e){ loadView2(); }) function loadView2() { //alert("this is view2"); var previousScrollPosition = 0; view2.showNavbar(); $$('.page-content').on('scroll', function (e) { var pageContent = this; var pageScroll = pageContent.scrollTop; if (pageScroll > 44) { if (pageScroll > previousScrollPosition) { view2.hideNavbar(); } else { view2.showNavbar(); } // Comment out if we do not need to show them on the end of scroll if (pageScroll >= pageContent.scrollHeight - pageContent.offsetHeight - 44) { view2.showNavbar(); } } else { view2.showNavbar(); } var scrollDiff = Math.abs(previousScrollPosition - pageScroll); if (previousScrollPosition > pageScroll) previousScrollPosition = pageScroll; else { if (scrollDiff > 20) previousScrollPosition = pageScroll; } }); } It displays the alert but the code is not working!? When I use it for the mainView it works.

Vladimir Kharlampidi
Wed, 24 Sep 2014 19:25:42 GMT

So to hide tabbar that is not inside of View you may just use: --- $('.views').addClass('hidden-toolbar')

Vladimir Kharlampidi
Wed, 24 Sep 2014 19:26:54 GMT

About hide/show it on scroll can't say much now, as no currently much time to hook into this part of custom code

manmade
Thu, 25 Sep 2014 15:27:34 GMT

Great, your the man :-) I´ll test and see. Thanks!

next