When i scroll up or down on a page, some items take a while to render even tho the page is already loaded. i can’t figure out what is causing the delay, if it’s something with template7. I have attached a short video showing this. Any thoughts or ideas?
can you share some code? it would be useful to anybody how wants to help you to read what you are doing.
I put the code for that page here:
https://jsfiddle.net/t053fgan/1/
Thanks!
edit:
<!-- Page, data-name contains page name which can be used in page callbacks -->
<div class="page" data-name="transactions" id="transactions-page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner margin-top padding-top">
<div class="left" style="margin-top:130px">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="f7-icons menu-icon zero-white ios-only size-75">menu</i>
<i class="icon menu-icon zero-white material-icons md-only size-40">menu</i>
</a>
</div>
<div class="title right" style="margin-right:40px;margin-top:130px">
<img
class="zero-white-img"
width="65"
src="img/Zeroheaderwhite.zero-student-loan-debt-01.svg"
/>
<img
class="display-none zero-grey-img"
width="65"
src="img/ZeroTM.zero-student-loan-debt-01.svg"
/>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content top-page">
<div class="text-align-center century-gothic-font no-margin">
<div id="transheader-wrap"></div>
<script id="transheader-template" type="text/template7">
{{#js_if "this.user_status_code == 'paused' "}}
<div class="bg-zero-grey-gradient2 padding header-img">
<br><br>
<div class="zero-white margin-top margin-bottom" style="margin-top:25px">
<h1 class="heading-font no-bold" style="margin-top:25px">{{full_name}}</h1>
<hr style="width:75%"> <br>
<div class="sub-heading-font">Your account is paused and you are not contributing to your student loan.
<br>
<div class="row justify-content-center margin-top">
<div class="col-90">
<button class="button button-raised button-large button-fill color-orange size-20" style="height: 40px" onclick="pauseAccount();">Un-Pause Account</button>
</div>
</div>
<br>
</div>
</div>
</div>
{{else}}
<div class="bg-zero-blue-green-gradient padding header-img">
<br><br>
<div class="zero-white margin-top margin-bottom">
<h1 class="heading-font no-bold" style="margin-top:45px">Round-Up Progress</h1>
<hr style="width:75%;color:white">
<div class="misc-wrap">
<div class="progChart -type-donut -label-centered">
<canvas id="roudup_progress" width="150" height="150"></canvas>
<div class="progChart__summary">
<div class="progChart__summary__number text-white size-20">
<br>
{{total_current_roundups_no_batch_display}}
</div>
</div>
</div>
</div>
<p class="no-margin-top">{{remaining_roundup_display}} <span class="zero-darker-grey">until your Round-Ups are withdrawn</span></p>
</div>
</div>
{{/js_if}}
<div class="block no-margin-top">
<div class="row">
<div class="col-50">
<div class="margin-top text-align-center">
<h3 class="no-bold size-16">Next Payment</h3><hr style="width:75%">
<img width="50" class="" src="img/CurrentLoan.svg" alt="Card image cap">
<div>
<span class="zero-green size-20">{{total_in_fbo_display}}</span><br>
{{#js_if "this.next_payment_date == '' || this.next_payment_date == null || this.next_payment_date_display == '12/31/1969' "}}
In {{remaining_roundup_display}}
{{else}}
On {{next_payment_date_display}}
{{/js_if}}
</div>
</div>
</div>
<div class="col-50">
<div class="margin-top text-align-center">
<h3 class="no-bold size-16">Last Payment</h3><hr style="width:75%">
<img width="50" class="" src="img/LastPayment.svg" alt="Card image cap">
<div>
<span class="zero-green size-20">{{last_payment_amount_display}}</span><br>
{{#js_if "this.last_payment_date == '' || this.last_payment_date == null || this.last_payment_date_display == '12/31/1969' "}}
{{else}}
On {{last_payment_date_display}}
{{/js_if}}
</div>
</div>
</div>
</div>
</div>
<div class="block">
<h3 class="size-16 no-bold">Current Round-Ups</h3>
<div class="border no-padding-top">
<div class="data-table text-align-center scroll">
<table>
<thead>
<tr>
<th class="label-cell text-align-center size-13">Date</th>
<th class="text-align-center size-13">Memo</th>
<th class="text-align-center size-13">Round-Up</th>
</tr>
</thead>
<tbody>
{{#each user_roundups}}
<tr>
<td class="label-cell text-align-center size-12">{{transaction_date}}</td>
<td class="text-align-center size-12">{{memo}}</td>
<td class="text-align-center zero-green size-12">{{total_roundup}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
<div class="block">
<h3 class="no-bold size-16">Pending Transactions</h3>
<div class="border no-padding-top">
<div class="data-table text-align-center scroll">
<table>
<thead>
<tr>
<th class="label-cell text-align-center size-13">Date</th>
<th class="text-align-center size-13">Account</th>
<th class="text-align-center size-13">Amount</th>
</tr>
</thead>
<tbody>
{{#each user_batches}}
<tr>
<td class="label-cell text-align-center size-12">{{display_date}}</td>
<td class="text-align-center size-12">{{source_account}}</td>
<td class="text-align-center size-12">{{amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
<div class="block">
<h3 class="no-bold size-16">Posted Transactions</h3>
<div class="border no-padding-top">
<div class="data-table text-align-center scroll">
<table>
<thead>
<tr>
<th class="label-cell text-align-center size-13">Date</th>
<th class="text-align-center size-13">Account</th>
<th class="text-align-center size-13">Amount</th>
</tr>
</thead>
<tbody>
{{#each user_transactions}}
<tr>
<td class="label-cell text-align-center size-12">{{display_date}}</td>
<td class="text-align-center size-12">{{source_account}}</td>
<td class="text-align-center size-12">{{amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
<div class="block" style="margin-bottom:250px">
<h3 class="no-bold size-16">Email your Statement</h3>
<div class="row justify-content-center margin-bottom margin-top">
<div class="border text-align-center col-50 text-align-center margin-right input-dropdown-wrap">
<select style="width:100%" name="statement_year" id="statement_year" class="text-align-center justify-content-center">
<option class="text-align-center justify-content-center" value="" selected disabled>Year</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</div>
<div class="border text-align-center col-50 text-align-center input-dropdown-wrap">
<select style="width:100%" name="statement_month" id="statement_month" class="text-align-center justify-content-center">
<option class="text-align-center justify-content-center" selected disabled value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<button class="button-raised button button-fill button-large color-orange tab-link size-20" onclick="emailStatement();">Email Statement</button>
</div>
</script>
</div>
</div>
<!-- Scrollable page content-->
</div>
function loadTransactions() {
user_details.user_roundups = user_roundups;
user_details.user_batches = user_batches;
user_details.user_transactions = user_transactions;
//Show Transactions Header
var template = $$('#transheader-template').html();
var compiledTemplate = Template7.compile(template);
$$('#transheader-wrap').html(compiledTemplate(user_details));
showRoundupGraph();
changeNav();
}
i edited your post and pasted your code so its easy to read.
are yo calling a backend? does Email your Statement depends on some async call? i dont work with template7, but your code seems fine to me. can you replicate the error in the jsfiddle. instead of pasting just the code there.
I am calling a backend but I don’t load that page until I have all the data. So when I scroll the page up and down I already have the data. The email your statement doesn’t depend on any async call - it doesn’t have any dependency it’s just plain html.
I can see if I can get it going in jsfiddle.
I figured out what’s causing the issue… on the pages this happens, I am loading a chart using chart.js - is there a preferred chart library to use or a proper way to load and use chart.js with f7/Cordova?
Chart.js should work totally fine with F7. If it is a cordova app, make sure you are using WKWebView plugin. Also you can set CSS transform: translate3d(0,0,0)
property on chat parent element, can help
I added the WKWebView plugin (cordova plugin add cordova-plugin-wkwebview-engine) and now I am unable to login to my app: “Origin Null is not allowed by Access-Control-Allow-Origin”.
I did some research and it looks like this plugin enforces CORs. I tried to find a solution but none seem to work. Is there something specific I can add to my META or config.xml?
Here is my current meta tags:
<meta http-equiv="Content-Security-Policy" content="
default-src * data: blob: ws: wss: gap://* file://*;
style-src * 'unsafe-inline' 'self' 'unsafe-eval';
script-src * 'unsafe-inline' 'unsafe-eval';
connect-src * ws: wss:;">
i added ionic wkwebview, it works fine for me.
I am not using ionic
i dont use it also, you dont need to use ionic to use the plugin
Now I get, "Origin ionic://localhost is not allowed by Access-Control-Allow-Origin
You need to specify correct CORS headers on server where you send login data
Yep that was it! This resolved my overall issue as well. Thank a lot for the help guys!