I built this so far with w3.css:
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
1a
1b
1c
1d
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
2a
2b
2c
2d
2e
2f
</div>
</div>
3
4
5
6
</div>
</div>
<div class="" id="content">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
</div>
</body>
But the problem is whenever I scroll down the content (eagle pictures) scolls, too, and hides behind the navbar...
I want the site to behave similar like this page when I scoll down.
Does anyone know what to do here? :)
sorry: ddddddd dddddddddddddddddd dddddddddddddddd ddddddddddddddddddddddddddd dddddd
It's hard to tell what you want, but I think this is it. You need to add background through CSS and use fixed property on it.
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body style='background: url(https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg) no-repeat center center fixed; background-size: cover; height: 200em;'>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
1a
1b
1c
1d
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
2a
2b
2c
2d
2e
2f
</div>
</div>
3
4
5
6
</div>
</div>
</body>
Related
I need to change the href of the a tag with id="cont".
The code I've got so far.(I was told to post the whole code here)
HTML:
<html>
<head>
<title>Adventure Game</title>
<link rel="stylesheet" href="../../styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="../../js/main.js"></script>
<script src="../../js/knightClass.js"></script>
<script src="../../js/choices.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<i class="fa fa-fw fa-home"></i>Home
How 2 Play
<div>
<button onclick="goBack()">Back</button>
</div>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()"><div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</span>
<div id="main">
<h1 class="header"><b>Stage 2 - Knight1</b></h1>
<div id="options" class="option hide">
<a id="cont" href="#">Continue</a>
<!--Hero
Paladin
Holy Knight
Assassin-->
</div>
</div>
</body>
</html>
JavaScript
window.onload=function(){
setTimeout(knight,1);
}
function knight(){
let rand=Math.floor(Math.random() * 10) + 1;
var cont=document.getElementById("cont");
if (rand==10){
cont.href("hero/hero1.html");
} else if (rand>=7){
cont.href("paladin/paladin1.html");
} else if (rand>=3){
cont.href("holyKnight/holyKnight1.html");
} else if (rand<3){
cont.href("assassin/assassin.html");
}
}
1.Change 2.Go
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>
Ref Link
I'm trying to put a canvas in a div so I can hide it and show it with a button and be able to resize it, but currently it isn't showing up... which is weird. Is my code correct?
<div id="blob"></div>
<script src="sketch.js"></script>
<script src="blob.js"></script>
</div>
^ it's this part of the code, the other parts are unrelated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div class="container2">
<img name="slide">
</div>
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
</div>
<div id="blob"></div>
<script src="sketch.js"></script>
<script src="blob.js"></script>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
<script src="slide.js"></script>
</body>
</html>
here's how the canvas is created... I think it's correct? It worked by itself but I'm not so sure with the other things. this is sketch.js
var blob;
var blobs = [];
var zoom = 1;
function setup() {
createCanvas(600, 600);
blob = new Blob(0, 0, 64);
for (var i = 0; i < 200; i++) {
var x = random(-width, width);
var y = random(-height, height);
blobs[i] = new Blob(x, y, 16);
}
}
function draw() {
background(0);
translate(width / 2, height / 2);
var newzoom = 64 / blob.r;
zoom = lerp(zoom, newzoom, 0.1);
scale(zoom);
translate(-blob.pos.x, -blob.pos.y);
for (var i = blobs.length - 1; i >= 0; i--) {
blobs[i].show();
if (blob.eats(blobs[i])) {
blobs.splice(i, 1);
}
}
blob.show();
blob.update();
}
<script src="sketch.js"></script>
this only imports a javascript file. Unless that javascript creates a canvas element and you run it then nothing will show up
To Summarize, I am trying to build a game that runs through questions with a timer, but not through a single timer, having each question go for 10 seconds and then reset when the 10 seconds are up. I'm very new to JavaScript so I am completely open to any advice. But I am trying to set these functions within an array and I keep getting an error saying that the function within the array doesn't exist, but it does and i've seen it work before. Am I applying the method wrong? and am I misusing the timer function?
$(document).ready(function(){
var arrayOfQuestions = [
intro(),
question1()
]
var time = 100;
function intro(){
$("#questions").html('<h6>Welcome, In this game, You will be presented with a small portion of a song and your goal is to guess the next couple of lyrics. Good Luck</h6>');
}
function question1(){
console.log("Question 1");
$("#questions").html('<h2>"Do You Remeber? The..."</h2>');
var ans1 = $("#pot-ans-1").html("<p>21st Night of September...</p>");
var ans2 = $("#pot-ans-2").html("<p>The Way...</p>");
var ans3 = $("#pot-ans-3").html("<p>How the stars stole the night away...</p>");
var ans4 = $("#pot-ans-4").html("<p>My thoughts are with you...</p>");
};
function timer() {
setTimeout(function() {
time--; //its a countdown so we are looking for decerements specifically
var secs = Math.floor(time/10);
var tenths = time % 10;
document.getElementById("timer").innerHTML = secs + ":" + tenths;
timer();
if(secs === -1) {
time = 100;
$("#timer").html("");
alert("Next Question");
};
},100);
}
$(document).ready(function(){
timer();
for (i = 0; i < arrayOfQuestions.length; i++) {
arrayOfQuestions[i]();
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Louis Pierre Questionaire</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>
<body>
<div id="container">
<div class="row">
<div class="col-md-12">
<center><ins>
<h1 class="Top">Welcome To Pernell's Trivia!</h1>
</ins></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center>
<h1 class="under">Complete the song phrase!</h1>
</center>
</div>
</div>
<!-- <p class="empty space"></p> -->
<div class="ratio-c-w">
<center>
<p class="Correct"></p>
<p class="Wrong"></p>
</center>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<center>
<p class="timer" id="timer"></p>
</center>
</div>
<div class="col-md-2">
</div>
</div>
<div class="qContainer"> <!--contains both the question and the buttons in an entire div-->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="questions-div">
<center>
<div id="questions" class="question"></div>
</center>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<center>
<div id="buttons">
<button id="pot-ans-1" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-2" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-3" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-4" type="button" class="btn btn-secondary"></button>
</div>
</center>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- Scripts -->
<div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="assets/javascript/app.js"></script>
</div>
</body>
</html>
I suggest you to:
remove the "()" statement at the end of the function call during the navigation loop of the array in order to have this arrayOfQuestions[i];, I think that the index element you are calling it's already a function and it doesn't need another "()" (I tested it here on JSFiddle and it seems to work)
modify the second argument of setTimeout() in 1000 instead of 100 since it expresses milliseconds and I grant you'll have a real 10 seconds timeout (;
Have a nice coding (;
Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Audio</title>
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 col-md-12">
<div class="s-it">Tap Here</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-4 col-md-4">
<div class="container">
<span style="display:none;" id="vX"></span>
<span style="display:none;" id="vY"></span>
<span style="display:none;" id="vZ"></span>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="sbell">
<img src="img/bell.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="s-text">Test</div>
</div>
<div class="col-md-12 col-xs-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="well">
<span class="sts">
<img src="img/shake-banner.png">
</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var myMedia1 = null;
var myMedia2 = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
var src1 = '';
var src2 = '';
if (device.platform == 'Android') {
src1 = '/android_asset/www/audiomp3/audio1.mp3';
src2 = '/android_asset/www/audiomp3/audio2.mp3';
}
myMedia1 = new Media(src1, onSuccess, onError);
myMedia2 = new Media(sec2, onSuccess, onError);
myMedia1.addEventListener('ended', function () {
setTimeout(function () {
$('#sbell').removeClass('animate-bell');
}, 2000);
setTimeout(function () {
$('.s-text').fadeOut(200);
}, 500);
}, false);
}
function onSuccess () {
alert("Audio Loaded");
}
function onError (e) {
alert(e.message);
}
window.ondevicemotion = function (event) {
var accX = event.accelerationIncludingGravity.x;
var accY = event.accelerationIncludingGravity.y;
var accZ = event.accelerationIncludingGravity.z;
if (accX >= 8 || accX <= -8) {
myMedia2.play();
}
document.getElementById('vX').innerHTML = accX;
document.getElementById('vY').innerHTML = accY;
document.getElementById('vZ').innerHTML = accZ;
};
$(document).ready(function () {
$('#sbell').click(function(event){
$(this).addClass('animate-bell');
$('.s-text').css('color', 'red').fadeIn(300);
myMedia1.play();
});
});
</script>
</body>
#ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue.
Phonegap Demo Apps (core)
The source is on github. It contains sound samples too. I have additional notes, if you need them.
Also, your app.initialize() should be called AFTER the deviceready event.
I'm very new with Intel-XDK.
Building a new App using the AppStarter framework.
I'm trying to make a very basic App that takes pictures on one "page", and then allows me to view the image(s) on another page, where I also want to capture details about each image.
I get the idea so far that you only really build one page with XDK, ie, everything is in index.html, and your "pages" are just div's.
I succesfully got the first page to envoke the camera, but I cannot get the image to "save" and be available for view on my "second page" yet.
On my iPhone, when testing this app, I can take a picture, but it isn't saved anywhere, on my Android device, it saves the image, but names it "test.jpg" and it saves to the root of the sdcard, and not to the usual DCIM folder.
I tried using the onclick events to kick-off the functions.
Any pointers welcome!
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<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, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(evt) {
if (evt.success == true)
{
// create image
var image = document.createElement('img');
image.src=intel.xdk.camera.getPictureURL(evt.filename);
image.id=evt.filename;
document.body.appendChild(image);
}
else
{
if (evt.message != undefined)
{
alert(evt.message);
}
else
{
alert("error capturing picture");
}
}
}
function showImages() {
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img2');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.setAttribute("style","width:100px;height:100px;");
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.body.appendChild(newImage);
}
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" style="">
<li>Take Picture
</li>
<li>View Pictures
</li>
<li>Help
</li>
</ul>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="capturePhoto();">Take Picture</a>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="showImages();">Show Pictures</a>
</div>
<div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style=""></div>
</div>
<div id="navbar">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</html>
OK, I managed to come right.
This code does what I need so far wrt taking the picture on one "page" and then displaying it on another.
Having issues with the use of the localStorage now - posted a new question.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<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, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(event)
{
if (event.success === true)
{
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
var pic1 = document.getElementById("pic1");
pic1.src = imagesrc;
localStorage.imagesrc = imagesrc;
}
else
{
if (event.message !== undefined)
{
alert(event.message);
}
else
{
alert("error capturing picture");
}
}
}
function showPicture()
{
var picture = document.getElementById("pic2");
var pic1src = localStorage.imagesrc;
picture.src = pic1src;
document.form2.locationview.value = localStorage.location;
document.form2.titleview.value = localStorage.title;
document.form2.metadataview.value = localStorage.metadata;
}
function saveForm()
{
localStorage.location = document.form1.location.value;
localStorage.title = document.form1.title.value;
localStorage.metadata = document.form1.metadata.value;
}
function updateForm()
{
localStorage.location = document.form2.locationview.value;
localStorage.title = document.form2.titleview.value;
localStorage.metadata = document.form2.metadataview.value;
}
function showStorage()
{
document.getElementById("page_3").innerHTML = localStorage.location;
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
style="background-image: url(images/splash.jpg);"
data-appbuilder-object="page" data-footer="footer_1">
<div class="centerbutton">
<a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
</div>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form1" name="form1">
<img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="location" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="title" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadata"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="saveForm();">Save</a>
</form>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form2" name="form2">
<img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
class="">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="locationview" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="titleview" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadataview"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="updateForm();">Update</a>
</form>
</div>
<div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
id="page_3" data-appbuilder-object="page" style=""></div>
</div>
<div id="navbar"> Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">PhotoTagger</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer">Home<a href="#page_1" class="icon camera"
onclick="capturePhoto();">Take Picture</a>
View Pictures
Local Storage
</footer>
</div>
</html>