<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="../css/normalize.min.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery.fancybox.css">
<link rel="stylesheet" href="../css/flexslider.css">
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/queries.css">
<link rel="stylesheet" href="../css/etline-font.css">
<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/Main.css">
<script src="../js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li>Home</li>
<li>IF-Charts</li>
<li>Learn More</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>Sydney arrivals</h1>
</div>
</div>
</div>
</div>
</section>
<!--
<style>
.left {
float: left;
}
</style>
<section class="left"> -->
<div id="nav_buttons">
<button id="prev">Previous</button>
<button id="next">Next</button>
<button id="zoomin">Zoom In</button>
<button id="zoomout">Zoom Out</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
<span> Zoom Level: <span id="zoom_lvl"></span></span>
</div>
<div id="chart_window">
<canvas height="1024" width="800" id="the-canvas" style="border:1px solid black"></canvas>
</div>
<!-- for legacy browsers add compatibility.js -->
<!--<script src="../compatibility.js"></script>-->
<script src="../pdfjs/pdf.js"></script>
<script id="script">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var url = '../pdf/YSSY_arr.pdf';
//
// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
//
// PDFJS.disableWorker = true;
//
// In cases when the pdf.worker.js is located at the different folder than the
// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
// shall be specified.
//
// PDFJS.workerSrc = '../../build/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5,
maxzoom = 1.8,
minzoom = 0.5,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* #param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
document.getElementById('zoom_lvl').textContent = +scale.toFixed(1);;
//Math.round(scale * 10)/10;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Zooms the page in by changing the scale variable
**/
function zoomIn(){
if (scale <= maxzoom) {
scale = scale + 0.1;
}
queueRenderPage(pageNum);
}
document.getElementById('zoomin').addEventListener('click', zoomIn);
/**
* Zooms the page out by changing the scale variable
**/
function zoomOut(){
if (scale >= minzoom) {
scale = scale - 0.1;
}
queueRenderPage(pageNum);
}
document.getElementById('zoomout').addEventListener('click', zoomOut);
/**
* Asynchronously downloads PDF.
*/
PDFJS.getDocument(url).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
</script>
</body>
</html>
</section>
<section class="features section-padding" id="features">
<!--<div class="container">
<div class="row">
<div class="feature-list">
<h3>Canberra</h3>
<p>All procedures</p>
<div class="scroll-wrapper">
<iframe src="https://uk.flightaware.com/resources/airport/KLAX/ALL/all/pdf"></iframe>
</div>
</div>
</div>
</div> -->
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
Licence | By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/58333b43fccdfa3ec83b78d6/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
Hi there
I am trying to make this code move the pdf to the left. However, when I apply the css, the pdf disappears completely.
<style>
.left {
float: left;
}
</style>
<section class="left">
That is what I am trying to apply. I have closed the section tags as can be seen in the entire code above. You can see the page here: https://if-charts.000webhostapp.com/YSSY/YSSY_arr.html
As you will be able to see, the pdf is in the centre, and there is a large amount of space between it and the left border. As the pdf can be zoomed, I would like to take advantage of the whole space. I need to move it to the left, but I have no idea how to.
If it helps, the entire repo can be found here: https://github.com/IF-Apps/IF-Charts
And you can find the entire file here: https://github.com/IF-Apps/IF-Charts/blob/Blurfix/YSSY/YSSY_arr.html
Thanks in advance.
Try adding this to the css:
canvas #the-canvas {
transform: translateX(-20vw);
}
Hope that helps!
EDIT:
Add it into the canvas element, with the id of "the-canvas" in your html
<canvas height="892" width="629" id="the-canvas" style="border:1px solid black; transform: translateX(-20vw);"></canvas>
Related
How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You can use the file input element as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<div id="editor"></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/html",
placeholder: "choose file to edit"
});
function openCode(files) {
var file = files[0]
if (!file) return;
var modelist = ace.require("ace/ext/modelist")
var modeName = modelist.getModeForPath(file.name).mode
editor.session.setMode(modeName)
reader = new FileReader();
reader.onload = function() {
editor.session.setValue(reader.result)
}
reader.readAsText(file)
}
</script>
</body>
</html>
I'm having a lot of trouble stopping my header from going transparent whilst scrolling down the page. I'm not sure what is causing it (I used a template), but you can view the code here:
https://github.com/IF-Apps/IF-Charts
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li>Home</li>
<li>IF-Charts</li>
<li>Learn More</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the tutorial. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>
<div align="center">
<h2>Please choose:</h2>
<br />
<span>
<img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;">
<img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;">
</span>
<p>View all charts here.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
Licence | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
I think it has to do with the CSS, but I am not sure.
The problem is that when at the top, the menu items cannot be seen. I just want the header to stay black. You can see the problem here:
https://if-charts.000webhostapp.com/
In your scripts.js file there is a function that adds or removes several things on scroll.
/***************** Header BG Scroll ******************/
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$('section.navigation').addClass('fixed');
$('header').css({
"border-bottom": "none",
"padding": "35px 0"
});
$('header .member-actions').css({
"top": "26px",
});
$('header .navicon').css({
"top": "34px",
});
} else {
$('section.navigation').removeClass('fixed');
$('header').css({
"border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
"padding": "50px 0"
});
$('header .member-actions').css({
"top": "41px",
});
$('header .navicon').css({
"top": "48px",
});
}
});
});
Remove this function entirely.
Change
<section class="navigation">
To
<section class="navigation fixed">
If you want to use the other properties as well add them to the following classes in the CSS file.
header {
border-bottom: none;
padding: 35px 0;
}
header .member-actions {
top: 26px;
}
header .navicon {
top: 34px;
}
You need to add a background color to the navigation.
.navigation {
background: #232731;
}
This is the code for the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ian Kenji Part 2 Web Development</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" lang="en" content="Ian Kenji Part 2 Web Development">
<meta name="author" content="Ian Kenji">
<meta name="robots" content="index, follow">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + " o'clock";
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<script>
function greetings(){
var now = new Date();
if (now.getHours() < 5) {
document.getElementById('greeting').innerHTML =
"What are you doing up so late?";
}
else if (now.getHours() < 9) {
document.getElementById('greeting').innerHTML =
"Good Morning!";
}
else if (now.getHours() < 17) {
document.getElementById('greeting').innerHTML =
"No surfing during working hours!";
}
else {
document.getElementById('greeting').innerHTML =
"Good Evening!";
}
}
</script>
<!-- icons -->
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico">
<!-- Override CSS file - add your own CSS rules -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header-heading">James Bond Spectre</h1>
</div>
<div class="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Images</li>
<li>Video</li>
<li>Audio</li>
<li>Text</li>
<li>Documentation</li>
<li>Validation</li>
<li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>
</ul>
</div>
<div class="content">
<div class="main">
<h1>Images</h1>
<hr>
<hr>
<h4>Bond, James Bond</h4>
<center><img src="assets/img/Spectre1.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic5.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic2.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic3.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<center><img src="assets/img/pic4.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
<p><br><p>
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/7GqClqvlObY" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
<div class="footer">
© Copyright 2015 Ian Kenji
</div>
</div>
</body>
</html>
It is really sloppy I know but I am a little new to this. This is my question, when running it through a validator I get this error
start tag body seen but an element of the same type was already open.
From line 72, column 28; to line 72, column 67
<li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>
In addition I am told that the use of <center> to center the pictures is obsolete and that I should use the CSS. However, I have a problem with that as I need some of the pictures to be centered, and some of them not to be. How can I make it so that some are, and some aren't?
And what can I do to fix that error?
You have 2 body tags. Replace the 1st with the 2nd and remove the 2nd.
Add class center to your css
something like this
img.center {
display: block;
margin-left: auto;
margin-right: auto
}
and put that class on image tag that you want to center then remove the center tag.
<img src="assets/img/Spectre1.jpg" class="center" />
Read more about css here: http://www.w3.org/Style/Examples/007/center.en.html
I am trying to add revealjs inside twitter bootstrap, it seems to be appearing but not properly. Please note it is only the appearance that is not right, it seems to jump from slide to slide just fine.
There are two problems with it
The size of revealjs slides is really small, i have not changed anything in css that could have caused this but I did find out that the slides seem to be appearing fine if i dont integrate them with bootstrap.
The background of revealjs fills the whole screen instead of the div where slides/sections are being placed.
This is what my screen looks like
This is what my page html looks like with twitter bootstrap and revealjs slide sections inside class col-lg-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Multi Form</title>
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/design.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="assets/reveal.js-2.6.2/css/reveal.min.css">
<link rel="stylesheet" href="assets/reveal.js-2.6.2/css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="assets/reveal.js-2.6.2/lib/css/zenburn.css">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
<script src="assets/bootstrap-3.1.1/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if (window.location.search.match(/print-pdf/gi)) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<!--[if lt IE 9]>
<!--<script src="assets/reveal.js-2.6.2/lib/js/html5shiv.js"></script>-->
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Form Generator</li>
<li>Support</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container main-wrapper">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<h3>This is a test and test is something that should be taken seriusly</h3>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
<p>
<small>Created by Hakim El Hattab / #hakimel</small>
</p>
</section>
<section>
<h2>Slides</h2>
<p>
Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it
out at http://slid.es.
</p>
</section>
</div>
</div>
</div>
<div class="col-lg-2">
</div>
</div>
</div>
<!-- /.container -->
<script src="assets/bootstrap-3.1.1/js/bootstrap.min.js"></script>
<script src="assets/reveal.js-2.6.2/lib/js/head.min.js"></script>
<script src="assets/reveal.js-2.6.2/js/reveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
//parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
//parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'assets/reveal.js-2.6.2/lib/js/classList.js', condition: function () {
return !document.body.classList;
} },
{ src: 'assets/reveal.js-2.6.2/plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
} },
{ src: 'assets/reveal.js-2.6.2/plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
} },
{ src: 'assets/reveal.js-2.6.2/plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
} },
{ src: 'assets/reveal.js-2.6.2/plugin/zoom-js/zoom.js', async: true, condition: function () {
return !!document.body.classList;
} },
{ src: 'assets/reveal.js-2.6.2/plugin/notes/notes.js', async: true, condition: function () {
return !!document.body.classList;
} }
]
});
</script>
</body>
</html>
I will really appreciate any assistance in this
I had a similar problem.
It turned out to be a problem when reveal calculates the wrapper height.
Try to change the availableHeight variable in the function layout() in reveal.js.
Replace availableHeight = dom.wrapper.offsetHeight;
With availableHeight = Math.max(dom.wrapper.clientHeight, window.innerHeight || 0);
I am not able to get contacts list.
HTML Code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:green; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<script>
document.addEventListener('intel.xdk.contacts.get', contactsReceived, true);
function contactsReceived() {
alert("contacts recieved");
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
alert("Contacts length: "+myContacts.length);
}
</script>
</body>
</html>
intel.xdk.contacts.get event is not fired. Is it a bug ?
I was not calling intel.xdk.contacts.getContacts() inside onDeviceReady. Found this from the post here.
Hi i am getting same problem. But I am able to get contacts in Phone after deploying (Sony xperia ion).
This is my code.
I set the permission for contacts.
<!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 src="intelxdk.js"></script>
<!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>
<!-- phantom library, needed for XDK CORS -->
<script type="text/javascript" language="javascript">
var onDeviceReady = function () { // called when Cordova is ready
if (window.Cordova && navigator.splashscreen) { // Cordova API detected
navigator.splashscreen.hide(); // hide splash screen
}
setTimeout(function () {
$.ui.launch();
}, 50);
intel.xdk.contacts.getContacts();
};
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if (isIntel)
$.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 || $.os.ios7))
$("#afui").removeClass("ios");
});
document.addEventListener('intel.xdk.contacts.get', contactsReceived, false);
function contactsReceived() {
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
if(myContacts.length==0)
{
alert("No contact found");
}
for(var i=0;i<myContacts.length;i++) {
//add row to table
var contactInfo = intel.xdk.contacts.getContactData(myContacts[i]);
var tr = document.createElement("tr");
tr.setAttribute('id', 'pnid'+contactInfo.id);
tr.setAttribute('onClick', 'document.getElementById("iden").value = '+contactInfo.id+';');
tr.setAttribute('style', 'background-color:#B8BFD8');
var id = document.createElement("td");
id.innerHTML = contactInfo.id;
tr.appendChild(id);
var msg = document.createElement("td");
msg.innerHTML = contactInfo.name;
tr.appendChild(msg);
table.appendChild(tr);
}
}
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" onclick="contactsReceived();">Hello World</a>
<table id="contacts">
</table>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button backButton" 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>
</body>
</html>