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>  HOME</a>
<a href="#about" class="link"><i class="f7-icons size-22">book</i>  ABOUT</a>
<a href="#video" class="link"><i class="f7-icons size-22">play_round</i>  VIDEOS</a>
<a href="#contact" class="link"><i class="f7-icons size-22">world</i>  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.