Troubles with Landing View on one page index.html app

1

Hello Everyone,

First off, thanks for taking the time to read my request for help. I truley apprecaite the time and effort. Don’t want to loose anymore hair over this. Alright, i built a one page app with many different links within the app to multiple pages. Most of the other pages have the div class with “page cached” like so;

*div class="page cached" data-page="about"*

and i have many of those throughout the index.html.

The problem i am having is the app is A) not loading a splash screen and it is opening the very last page ( an image ) at the bottom of the source code which is this;

<div data-page="30_3M(2)" class="page">
 
            <!-- Top Navbar. In Material theme it should be inside of the page-->
			  <div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#bx303" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="center">30" 3M</div>
    </div>
</div>  
          
			  
			    <!-- Scrollable page content -->
           <div class="page-content">
		<div align="center"><img src="img/30  3M.jpg" class="responsive-shrink" alt=""/>
</div>
</div>	
</div>

and I would like it to open on the home page of the app. The beginning of the app source code which is the following;

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>Nexus Flange Slide Rule</title>
    <!-- Path to Framework7 Library CSS, Material Theme -->
    <link rel="stylesheet" href="css/framework7.material.min.css">
    <!-- Path to Framework7 color related styles, Material Theme -->
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">
	<!– Path to Framework7 icons –>
<link rel="stylesheet" href="css/framework7-icons.css">
<link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">
  </head>
  <body>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-fixed toolbar-fixed">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
 
            <!-- Top Navbar. In Material theme it should be inside of the page-->
            <div class="navbar">
              <div class="navbar-inner">
                <div class="center">Nexus Flange Slide Rule</div>
              </div>
            </div>
 
            <!-- Toolbar. In Material theme it should be inside of the page-->
            <div class="toolbar toolbar-bottom">
              <div class="toolbar-inner">
                <!-- Toolbar links -->
				<div class="toolbar-inner">
                <a href="#index" class="link"><i class="f7-icons size-22">home</i>&nbsp HOME</a>
                <a href="#about" class="link"><i class="f7-icons size-22">book</i>&nbsp ABOUT</a>
				<a href="#video" class="link"><i class="f7-icons size-22">play_round</i>&nbsp VIDEOS</a>
			    <a href="#contact" class="link"><i class="f7-icons size-22">world</i>&nbsp CONTACT</a>
              </div>
            </div>
			  </div>
 
            <!-- Scrollable page content -->
            <div class="page-content">
			   			<div align="center"><img src="img/Cover-page-for-Nexus-Flange-Slide-Rule.jpg" class="responsive-shrink" alt=""/></div>
				<div class="list-block">
<ul>
<li><p class="homebuttons"><a href="#FlangeSizes" class="button button-big button-fill button-raised color-blue">Flange Size</a></p></li> 
<li><p class="homebuttons"><a href="#standardringsize" class="button button-big button-fill button-raised color-blue">Standard Ring Size</a></p></li>

Wondering if i am simply missing a proper code with my div class main view but i can’t find out in the instructions what that may be. As for the splash screen, i’ have that in the config.xml but i’m not sure why it is not showing up.

2

I didn’t really get what is exactly the issue, but if you have multiple pages under same View you need:

  • enable domCache
  • add cached class to all pages that should be hidden. I see you have at least two pages without this class
  • and the very important point, any reason you still use v1 when there is a v4 already? You can’t get much help about v1 here
3

Hey Thanks Nolimits4web. I think I need to go through my app and add that cached to all pages like you said. As for the version i am using, I have no idea which one it is. It may very well be v1. I just downloaded a template off the framework7 website about a month ago. I’m thinking that it should be a newer version

4

All official templates are not v1 for couple of years :slight_smile: Use latest version and create it with Framework7 CLI

5

ok. For my purposes this app seems to work great. Made an .apk file and it works well enough on my android. Thanks again for the help. It totally worked!! Would you know of any reason that the splash screen may not be loading?