I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active".
Anyone seeing the problem? Thanks in advance.
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<i class="f7-icons ios-only">bars</i>
</div>
<div class="center sliding">App Title</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar tabbar-labels tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="f7-icons ios-only">home</i>
<span class="tabbar-label">Home</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="f7-icons ios-only">bell</i>
<span class="tabbar-label">Alerts</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="f7-icons ios-only">today</i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-4" class="tab-link">
<i class="f7-icons ios-only">paper_plane</i>
<span class="tabbar-label">News</span>
</a>
</div>
</div>
<div class="pages navbar-fixed">
<div data-name="home" class="page">
<div class="tabs">
<div class="page-content tab tab-active" id="tab-1">
<div class="block">
<span><b>Home</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-2">
<div class="block">
<span><b>Alerts</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-3">
<div class="block">
<span><b>Calendar</b></span>
<p>...</p>
</div>
</div>
<div class="page-content tab" id="tab-4">
<div class="block">
<span><b>News</b></span>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.
Related
When I open the modal the content of website above and below the modal button also scrolls over the modal.
I tried increasing the z-index and applying overflow property but it didn't work.
<a class=" read-more low-padding raised modal-trigger " data-modal="card-modal">Learn More<i class="im im-icon-Right"></i></a>
<div style="z-index: 99999999999999999999;">
<div id="card-modal" class="modal modal-sm b1" style="overflow-y: hidden">
<div class="modal-background"></div>
<div class="modal-card modal-content">
<header class="modal-card-head">
<p class="modal-card-title">Tracks</p>
<button class="delete is-medium modal-dismiss" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/ml.png">
</div>
<div class="card-name">
<div class="name">Machine Learning</div>
<!--<div class="position">Software Engineer</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/appdev.png">
</div>
<div class="card-name">
<div class="name">Mobile App Development</div>
<!--<div class="position">Sales Representative</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/coding.png">
</div>
<div class="card-name">
<div class="name">Generic Coding</div>
<!--<div class="position">Accountant</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/webdev.png">
</div>
<div class="card-name">
<div class="name">Web Development</div>
<!--<div class="position">Software Engineer</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/cyber.png">
</div>
<div class="card-name">
<div class="name">Cyber Security</div>
<!-- <div class="position">CTO</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
</section>
<footer class="modal-card-foot">
<button class="button is-link modal-dismiss">Close</button>
<!--<button class="button btn-align raised accent-btn no-lh modal-dismiss save-btn is-disabled">Save</button> -->
</footer>
</div>
</div>
</div>
<!-- Featured image -->
<div class="column is-6 is-offset-1 has-text-centered is-hidden-mobile">
<img class="featured-drawing" src="assets/images/illustrations/drawings/gauge.png" alt="">
</div>
When the modal is opened only content of modal should be displayed. No content of the webpage should be scrolling above the modal.
I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>
According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});
Hey guys having a problem with masonry plugin.
I'm trying to load the simple layout using percentPosition: true; and the problem is when everything loads, layout loads without the gutter and adds it later which causes all images to shift and it looks quiet annoying.
cant seem to figure out the solution to load it the way that nothing would shift. Bellow is the code:
and here is the link: dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>
I recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});
I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->
I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->