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);
Related
My HTML pages are not getting routed via ui-view used in index.html. However
I defined all declarations in my controller. I used $stateProvider in my controller to get into a particular HTML. This is showing
"....index.html#/welcome" in browser URL location but nothing is displayed into the page. Please help me to get out of this situation.
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bower_components/font-awesome-
4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/angular-loading-bar/loading-
bar.css">
<link rel="stylesheet"
href="bower_components/chosen/chosen.css">
<!-- endbuild -->
<!-- build:css content/css/main.css -->
<link rel="stylesheet" href="content/css/bootstrap.min.css">
<link rel="stylesheet" href="content/css/bootstrap-
select.min.css">
<link rel="stylesheet" href="content/css/style.css">
<link rel="stylesheet" href="content/css/common.css">
</head >
<body >
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser. Please upgrade your browser to improve your
experience.</p>
<![endif]-->
<div>
<div class="body-overlay" style="z-index:1051;">
<div class="overlay-content" id="bodyOverlayContent">
<p></p>
</div>
</div>
<div class="main-section" ng-app="testApp">
<div ui-view="welcome" ng-cloak>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="mytest.controller.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
</body>
</html>
mytest.controller.js
var app = angular.module('testApp', ['ui.router']);
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url : '/welcome',
templateUrl : 'welcome.html',
controller : 'testController'
});
$urlRouterProvider.otherwise('/welcome');
console.log($stateProvider);
}]);
app.controller('testController', function($scope) {
$scope.showInfoMessages="Contact Information";
});
welcome.html
<div><p> Hi </p></div>
Remove the string assign to ui-view
change
<div ui-view="welcome" ng-cloak>
to this
<div ui-view ng-cloak=""></div>
also add the ng-app on html tag
Demo
<!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>
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
I want to do this Dojo transition to another html file in same project. Select a view from an other html page, the code available on the link is very similar to what I have in my project. While the solution is accepted, I'm unable to have success with it whereas I have tested it several times. Can someone check it, please ?
Thank you in advance
Here are two html files that allow you testing it, it's not my real code but that provides same result :
Index.html
<html>
<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,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Index</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
</body>
<html>
sample.html
<html>
<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,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Sample</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1" data-dojo-props="selected:false,scrollDir:'v'">
</div>
</body>
</html>
Put them in a same directory and test it
The Main Html File.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=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" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- dojo stylesheet will go here -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<title>Dojo Mobile Simple View</title>
<!-- dojo configuration options -->
<script>
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<script>
require([
"dojox/mobile/parser",
"dojo/ready",
"dojox/mobile/ScrollableView",
"dojox/mobile/Heading",
"dojox/mobile/ToolBarButton"
], function (parser, ready ) {
ready ( function() {
parser.parse();
});
});
</script>
</head>
<body style="visibility:hidden;">
<!-- the view or "page"; select it as the "home" screen -->
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
<div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'View1'">
<span id="rightbtn" data-dojo-type="dojox/mobile/ToolBarButton"
style="float:right;"
data-dojo-props="transition:'slide', transitionDir:'-1',url:'Sample.html' ">Sample
</span>
</div>
</div>
</body>
</html>
The Sample.html file is a HTML Fragment it should NOT contain head, body tags.
<!-- Sample View -->
<div id="sample" data-dojo-type="dojox/mobile/ScrollableView" >
<!-- heading -->
<h1 id="edit1" data-dojo-type="dojox/mobile/Heading"
data-dojo-props=" fixed:'top' ">Sample
</h1>
</div>
I'm on a phonegap project.
I was doing this project with Jquery Mobile Framework. But its results and performance arre so bad at many devices (f.e. my device android 2.3.3 - jquery mobile works nice on android 4.x.x devices i think)
After that, i found this nice and fast framework.
Now, i'm trying to carry my jquery mobile project to Jqmobi.
But there are some problems when i'm trying to carry. I am stucked with the function that i need to show current/active/chosen/opened panel when i click from the navigation.
Why do i need this. Because, "i want to work the functions when the user chooses that panel" that is what i want.
Here is what i have tried in jqmobi;
HTML SIDE ;
<!DOCTYPE html>
<html>
<head>
<title>Live Score</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
<link rel="stylesheet" type="text/css" href="css/add.css" />
<script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
</head>
<body>
<div id="jQUi">
<div id="content">
<div title="Home" id="index" class="panel" selected="true">
<img src="img/fanatik.jpg" width="320" height="120" alt="">
<ul class="index_list">
<li><span>Football </span>Live Scores</li>
<li><span>Football </span>League Tables</li>
<li><span>Football </span>League Fixtures</li>
<li><span>Program </span>Settings</li>
</ul>
</div>
<!---------------------------------------------------------------------------------------------------->
<div title="LiveScores" id="contents01" class="panel" scrolling="no">
</div><!-- livescores page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueTables" id="contents02" class="panel">
</div><!-- leaguetable page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueFixtures" id="contents03" class="panel">
</div><!-- leaguefixture page -->
<!---------------------------------------------------------------------------------------------------->
<div title="Settings" id="contents04" class="panel">
</div><!-- settings page -->
<!---------------------------------------------------------------------------------------------------->
</div>
<div id="navbar">
home
live
tables
fixtures
settings
</div>
<!---------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
Javascript Side (not working)
$(document).bind('pageshow', function () {
var id = $.ui.activeDiv[0].id;
if (id=="contents01"){
ctx="livescores";
$("#contents01 [class='panel']").text(ctx);
}
else
if (id=="contents02"){
ctx="leaguetables";
$("#contents02 [class='panel']").text(ctx);
}
else
if (id=="contents03"){
ctx="leaguefixtures";
$("#contents03 [class='panel']").text(ctx);
}
});
function getLiveMatches(){
$.getJSON("MY WEB API URL", function (data){
ctx='<ul>';
$.each(data, function (index, value) {
ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
});
ctx+='</ul>';
injectContext("contents01",ctx);
});
}
function injectContext(target, context){
$("#"+target+" [class='panel']").html(context);
}
How can i determine the active panel or page or div in Jqmobi / Appframework..
Please help about it.
Thanks.
You can run a function whenever a panel becomes active.
Add the attribute data-load="func_name" to the panel's div tag.
For Example
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
...
<script>
function onPanel1Activated() {
do task for panel1
}
function onPanel2Activated() {
do task for panel2
}
</script>
...
</head>
<body>
<div id="afui" class='ios'>
<!-- Header ------------------------------------------------------->
<div id="header"></div>
<!-- Content Start ------------------------------------------------>
<div id="content">
<!-- Panel 1 -------------------------------------------------->
<div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
...
</div>
<!-- Panel 2 -------------------------------------------------->
<div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
...
</div>
...
</div>
</div>
</body>
</html>