I am attending to passing the query string values when mobile page change event and retrieved the values as i expected. But When i Click the Back button go to the previous page at the time current page and previous page fired simultaneously. How to over come this issue
Here is my code:
page1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).bind('pageinit','div:jqmData(role="page")', function(){
$("#searchbutton").on('click',function(){
///alert("working");
var searchvalue = $("[name='clientsearch']").val();
var searchbyvalue = $("#select-choice-searchby").val();
var statusvalue = $("#select-choice-status").val();
if(searchvalue.length!=0){
$.mobile.changePage(
'accountlist.html',
{
//dataUrl : "accountlist.html?searchvalue="+searchvalue&"searchbyvalue="+searchbyvalue&"statusvalue="+statusvalue ,
data : { 'searchvalue' : searchvalue,'searchbyvalue':searchbyvalue,'statusvalue':statusvalue },
reloadPage : false,
changeHash : true,
});
}
else{
$( "#confirm" ).popup( "open" );
}
});
});
</script>
</head>
<body>
<div data-role="page" id="client" >
<script type="text/javascript">
$(document).on("pageshow", function(){
var prevSelection = "tab1";
$("#navbar ul li").on("click",function(){
var newSelection = $(this).children("a").attr("data-tab-class");
$("."+prevSelection).addClass("ui-screen-hidden");
$("."+newSelection).removeClass("ui-screen-hidden");
prevSelection = newSelection;
});
});
</script>
<div data-role="header" data-theme="b" data-position="fixed" data-id="persistantFooter">
Back
<h1>Client View</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchbox">
<input type="search" name="clientsearch" value="" data-inline="true" data-mini="true"/>
<a href="#" data-role="button" data-theme="b" data-inline="true" id="searchbutton" data-ajax="false" data-mini="true" >Search</a>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-searchby" class="select searchby" data-inline="true" style="text-align:right">Search By:</label>
<select name="select-choice-searchby" id="select-choice-searchby" data-mini="true" data-role="none" style="margin-left:30px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;
height: 28px;">
<option value="account">Account</option>
<option value="customhouseholds">Custom Households </option>
<option value="roahouseholds">ROA Households</option>
</select>
</div>
<div data-role="fieldcontain" >
<label for="select-choice-status" class="select status" data-inline="true" style="text-align:right!important" >Status:</label>
<select name="select-choice-status" id="select-choice-status" data-mini="true" data-role="none" style="margin-left:58px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;height: 28px;">
<option value="open">Open</option>
<option value="closed">Closed </option>
<option value="all">All</option>
</select>
</div>
<div data-role="navbar" id="navbar">
<ul>
<li>Favorites</li>
<li>Recents</li>
</ul>
</div>
<div class="tab-content">
<div class="tab1">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div><!--/demo-html -->
</div>
<div class="tab2 ui-screen-hidden">
<div data-demo-html="true" id="a" class="content_div">
<ul data-role="listview" data-inset="true">
<li >
<a href="#">
<h3 class="ui-li-heading">Client Name</h3>
<p class="ui-li-desc">Account</p></a></li>
<li>
<a href="#">
<h3 class="ui-li-heading">HouseHold Name</h3>
<p class="ui-li-desc">Custom HouseHold</p></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="confirm" data-role="popup" data-theme="none">
<p id="question">Please Give Some Value</p>
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data- transition="flip" data-theme="b" data-rel="back">Ok</a>
</div><!-- /popup -->
</div>
</body>
</html>
page2.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Account view</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="accountlist" data-prefetch>
<script src="js/sai.js"></script>
<div data-role="header" data-theme="b">
Back
<h3>Account View</h3>
</div>
<div data-role="content">
<ul id="list" data-role="listview" >
</ul>
</div> <!--content-->
</div><!--page-->
Change the jquery function to this and try
$("#navbar ul li").on("click","a",function(){
var newSelection = $(this).attr("data-tab-class");
$("."+prevSelection).addClass("ui-screen-hidden");
$("."+newSelection).removeClass("ui-screen-hidden");
prevSelection = newSelection;
});
Related
I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="images/icon.png" type="image/png">
<title>form example</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue darken-4" role="navigation">
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background blue darken-3">
<!--<img src="images/background3.jpg">-->
</div>
</div>
</li>
</ul>
<i class="material-icons">menu</i>
<div class="nav-wrapper">
<a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
<ul class="right hide-on-med-and-down">
<li><div class="right"><a class="waves-effect waves-light btn red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" >Login</a></div></li>
</ul>
</div>
</nav>
</div>
<form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data" >
<div class="form-container">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn waves-effect waves-light blue darken-3">
<span>browse</span>
<input type="file" id="image" name="image" accept="image/x-png,image/jpeg, image/jpg">
</div>
<div class="file-path-wrapper">
<input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text">
</div>
</div>
</div>
<center>
<input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" />
</center>
</div>
</form>
<div id="modal5" class="modal bottom-sheet">
<div class="modal-content">
<p align="center">You must provide all the requested details. Please try again</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?
I was able to fix the problem via help from #wackychocolatefactory from materializecss github page. The answer lies in the order of my JavaScript files. That is moving the script of jquery and materializecss above that of $(document).ready(function(){});
so I should put it in this order
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
When the save button is clicked I am trying to display values from a textbox and button in a grid. I have written the html part and I have tried out something by myself. When the save button is clicked the values are not displayed in the table grid.
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="clear">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
<div ng-app="myApp" ng-controller="headerCtrl">
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
Result: [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
});
</script>
</body>
</html>
There are few issues,
(i) Have only one ng-app and ng-controller common for both divs
(ii) There is no angular reference with your code
(iii) You need to push the values to the array on Save function,
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
DEMO
var app = angular.module('myApp', []);
app.controller('headerCtrl', function($scope) {
$scope.headerData = {};
$scope.headerData.Result = [];
$scope.clear = function(){
$scope.headerData.Result = [];
}
$scope.Save = function() {
$scope.headerData.Result.push({
"Header": $scope.header,
"Status": $scope.status
});
};
});
<!DOCTYPE html>
<html>
<head>
<title>Header Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
You have got a number of issues in your code.
No Angular file. Please add an angular file as per your version.
You have defined two controllers one of them, clear, is not defined.
You have declared ng-app="myApp" at two places, which is a very very bad practice.
You are using Results without quotes in your scope. It's a json object, good to use quotes for key values.
I have rectified all the errors and following is your final code. Before copying, go through the changes and understand them.
<div class="container" ng-app="myApp" ng-controller="headerCtrl">
<h2 style="text-align: center"><b>Header Details</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<div class="row">
<div class="input-group">
<h1> <b>Enter the Header:</b>
<input type="text" name="Header" ng-model="header"><br></h1>
</div>
</div>
<p>
</p>
<div class="row">
<div class="input-group">
<h1>
<b>Status:</b>
<select name="status" id="status" ng-model="status">
<option value="" selected="selected">(Select the status)</option>
<option value="001">0</option>
<option value="002">1</option>
</select>
</h1>
</div>
</div>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
<table class="table table-bordered" ;style="width:40%;margin-left:400px">
<tr>
<th>Header</th>
<th>Status</th>
</tr>
<tr ng-repeat="data in headerData.Result">
<td>{{data.Header}}</td>
<td>{{data.Status}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
$scope.Save = function () {
$scope.headerData = {
"Result": [{
"Header": $scope.header, "Status": $scope.status,
},
]
}
};
$scope.clear = function(){
$scope.headerData = {};
$scope.header = "";
$scope.status = "";
}
});
</script>
I am using AngularStrap accordion menu. Here I am trying to toggle the icon arrow up and down but its not working:
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//code.angularjs.org/1.3.8/angular.min.js" data-semver="1.3.8"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.2.1"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.2.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="CollapseDemoCtrl">
<div class="bs-example" append-source>
<!-- ngModel is optional -->
<div class="panel-group" ng-model="panels.activePanel" role="tablist" aria-multiselectable="true" bs-collapse>
<div class="panel panel-default" ng-repeat="panel in panels">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a bs-collapse-toggle>
{{ panel.title }}
</a>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
</h4>
</div>
<div class="panel-collapse" role="tabpanel" bs-collapse-target>
<div class="panel-body">
{{ panel.body }}
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this.
Markup
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': panels.activePanel === $index, 'glyphicon-chevron-right': panels.activePanel !== $index}">
</i>
Working Plnkr
I am trying to build an simple To-Do-List app using jQuery-Mobile with Local Storage support but i tried in manyways i am failing while storing the data in local storage and displaying them in a List here is the code which i have made any help to correct my code will be appreciated
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ToDoL</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
var tasks[];
$(document).on("pagecreate","#todoadderpage",function(){
var appendTaskToList=function(val){
$("#todolist").append("<li>"+val+"</li>");
}
var addTask=function(){
//alert("Hello");
var val=$("#todotitle").val();
tasks.push(val);
localStorage['tasks']=JSON.stringify(tasks);
appendTaskToList(val);
}
$("#todoadderokbtn").click(addTask);
});
</script>
</head>
<body>
<section id="landing" data-role="page">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>ToDoL Logo</h1>
</header>
<article data-role="main" class="ui-content">
<center>
Add To-Do
<input type="button" id="remover" value="Remove Completed Task" data-mini="true" data-inline="true"/>
</center>
<hr/>
<ul id="todolist" data-role="listview" data-inset="true">
<li data-role="list-divider">Your To-Do-List</li>
<li id="notodolist"><p>You Don't have any pending task</p></li>
</ul>
<br/><br/><br/>
</article>
<footer data-role="footer" data-position="fixed" data-theme="b">
<h1>© Reserved By Dinesh Raja</h1>
</footer>
</section>
<section id="todoadderpage" data-role="page" data-close-btn="none">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>New To-Do</h1>
</header>
<article data-role="main" class="ui-content">
<form id="todoadderform">
<div data-role="fieldcontain">
<label for="todotitle">Title</label>
<input type="text" id="todotitle" data-mini="true"/><br/><br/><br/>
<center>
Cancel
<input type="button" id="todoadderokbtn" value="Ok" data-mini="true" data-inline="true"/>
</center>
</div>
</form>
</article>
</section>
<section id="todoviewerpage" data-role="page" data-close-btn="none">
<header data-role="header">
<h1>To-Do-Viewer</h1>
</header>
<article data-role="main" class="ui-content">
<center>
<label for="tododata"></label>
</center>
<p id="tododata"></p>
<center>
Ok
</center>
</article>
</section>
</body>
</html>
This should work
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ToDoL</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
var tasks[];
$(document).on("pagecreate","#todoadderpage",function(){
var appendTaskToList=function(val){
$("#todolist").append("<li>"+val+"</li>");
}
var addTask=function(){
//alert("Hello");
var val=$("#todotitle").val();
tasks.push(val);
local-Storage['tasks']=JSON.stringify(tasks);
appendTaskToList(val);
}
$("#todoadderokbtn").click(addTask);
});
</script>
</head>
<body>
<section id="landing" data-role="page">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>ToDoL Logo</h1>
</header>
<article data-role="main" class="ui-content">
<center>
Add To-Do
<input type="button" id="remover" value="Remove Completed Task" data-mini="true" data-inline="true"/>
</center>
<hr/>
<ul id="todolist" data-role="listview" data-inset="true">
<li data-role="list-divider">Your To-Do-List</li>
<li id="notodolist"><p>You Don't have any pending task</p></li>
</ul>
<br/><br/><br/>
</article>
<footer data-role="footer" data-position="fixed" data-theme="b">
<h1>© Reserved By Dinesh Raja</h1>
</footer>
</section>
<section id="todoadderpage" data-role="page" data-close-btn="none">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>New To-Do</h1>
</header>
<article data-role="main" class="ui-content">
<form id="todoadderform">
<div data-role="fieldcontain">
<label for="todotitle">Title</label>
<input type="text" id="todotitle" data-mini="true"/><br/><br/><br/>
<center>
Cancel
<input type="button" id="todoadderokbtn" value="Ok" data-mini="true" data-inline="true"/>
</center>
</div>
</form>
</article>
</section>
<section id="todoviewerpage" data-role="page" data-close-btn="none">
<header data-role="header">
<h1>To-Do-Viewer</h1>
</header>
<article data-role="main" class="ui-content">
<center>
<label for="tododata"></label>
</center>
<p id="tododata"></p>
<center>
Ok
</center>
</article>
</section>
</body>
</html>
I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>