I want to set a header and footer in my presentation. I used the following issue as a starting point: https://github.com/hakimel/reveal.js/issues/806 and http://www.ciges.net/revealjs_demo/#/
My current implementation gives the following output:
Now as far as I have understand reveal.js uses fixed size for the presentation by default with a width of 960px and height of 700px. This size is completely fine to me. However, I want the headers and footer not to be fixed in this window. They need to adapt to the actual screen size. That is to say, I want the left header to be aligned to the top left corner of the screen. Likewise for the other header and footers, see also the image. How can I achieve this? Currently it seems that my headers and footers are fixed within the default window (960x700).
I use the following code (index.html) with reveal.js 3.2.0
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
.reveal div.header-left {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.header-right {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-left {
position: absolute;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-right {
position: absolute;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="hidden" style="display:none;">
<div id="header">
<div class="header-left">test header left</div>
<div class="header-right">test header right</div>
<div class="footer-left">test footer left</div>
<div class="footer-right">test footer right</div>
</div>
</div>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by $x^2$ Hakim El Hattab / #hakimel</small>
</p>
</section>
<section>
<h2>Hello There</h2>
<p>
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
</a>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: false,
progress: true,
slideNumber: true,
history: true,
center: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
math: {
mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/math/math.js', async: true }
]
});
</script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
$('.slides > section').prepend(header);
} else {
$('.slides').prepend(header);
}
</script>
</body>
</html>
Here is a slightly more complicated answer that also works with the pdf-export print version:
Add the elements to the slide-background <div> (instead of section, slides, or reveal). This <div> is dynamically generated, so we must wait for the Reveal.js ready event. When printing there is a slight delay followed by unnecessary animation of the headers and footers moving into place, but all the headers/footers are rendered in the PDF as desired.
Pseudo-code:
Style header/footer <div> so they are positioned as desired.
Create hidden header/footer <div>
On Reveal.js ready event, copy header/footer <div> into each .slide-background <div>
Code: this can be copy-pasted into the end of a reveal.js file (right before the end </body> tag):
<style type="text/css">
/* 1. Style header/footer <div> so they are positioned as desired. */
#header-left {
position: absolute;
top: 0%;
left: 0%;
}
#header-right {
position: absolute;
top: 0%;
right: 0%;
}
#footer-left {
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
<!-- 2. Create hidden header/footer <div> -->
<div id="hidden" style="display:none;">
<div id="header">
<div id="header-left">HEADER-LEFT</div>
<div id="header-right">HEADER-RIGHT</div>
<div id="footer-left">FOOTER-LEFT</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div>
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
Reveal.addEventListener( 'ready', function( event ) {
$('.slide-background').append(header);
});
}
else {
$('div.reveal').append(header);
}
</script>
Insert the header/footer elements into the div.reveal element instead of the .slides slides element.
The position within the DOM tree you where insert the header/footer elements affects which CSS is applied, which in turn affects their positioning.
$('.slides').prepend(header) adds the elements inside the slides <div>. The elements will be fixed to the default (960x700) window because that is how the slides <div> is sized.
$('div.reveal').append(header) adds the elements inside the reveal <div>. The elements will be fixed to the screen because the reveal <div> is sized to take up the entire browser view port.
Note this does not work for the print/pdf version... I'm still trying to figure that one out...
Related
I'm trying change the image placed inside the phone mock up frame. The problem is that images don't change in that specific location even tough I have the code for it. Can anyone help out?
<!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.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Mobile plugin</title>
<!-- Bootstrap -->
<script src="script.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- 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>
<div id="wrapper" class="container">
<div class="row-fluid">
<div class="nexus">
<div class="col-xs-3 col-sm-5 col-md-4">
<img src="images/nexus.png">
<div class="image">
<div id="im">
<img src="images/2a.png" id="image2">
<img src="images/3.png" id="image3">
<img src="images/4.png" id="image4">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="logofix">
<div class="clearfix">
<img class="logo" src="images/logo.png" width="160px">
<ul class="image-switch">
<li data-feature="feature-1">
<h4>Connect</h4>
<p>Connect the plugin using various methods.</p>
</li>
<li data-feature="feature-2">
<h4>Time spend connected</h4>
<p>This will allow you to monitor how long</p>
<p>have been connected each day and</p>
<p>how much data have you transferred.</p>
</li>
<li data-feature="feature-3">
<h4>Browsing Habits</h4>
<p>Shows you what percentage of your time</p>
<p> is spent on different tasks and the amount </p>
<p> of daily visits.</p>
</li>
<li data-feature="feature-4">
<h4>Dashboard</h4>
<p>The dashboard gives a nice and simple</p>
<p> preview of the product functionalities,</p>
<p> allowing you to navigate easily.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
</body>
</html>
Here is the CSS file which sets the location of both the phone frame and the actual images :
.logofix {
right: 60 % ;
position: static;
top: 30 % ;
display: block;
}
#
wrapper {
position: relative;
margin - right: auto;
margin - left: auto;
padding - top: 72 px;
}#
wrapper, .wrapper {
min - height: 100 % ;
height: auto!important;
box - sizing: border - box;
}
li: hover {
padding - left: 10 px;
transition: all 0.2 s ease - out 0 s;
}
/* Settings and properties of the list text block*/
li {
list - style - type: none;
font - family: Open Sans;
font - size: 16 px;
margin: 0 px;
float: left;
cursor: pointer;
display: block;
width: 100 % ;
padding: 5 px 0 px;
position: relative;
transition: all 0.2 s ease - out 0 s;
}
/*END of Settings and properties of the list text block*/
#
image2 {
height: 390 px;
width: 212 px;
position: absolute;
top: 42 px;
left: 23 px;
z - index: 1;
}
I am using this simple short javascript to change the images on hover but I'm not sure if the problem is not from it as well:
$(document).ready(function() {
$('ul.image-switch li').mouseover(function(e) {
if(e.target.nodeName.toLowerCase() == 'a') return;
var image_src = $('a', this).data('image');
var img = $('.image-container img');
if(img.attr('src') != image_src) { // only do the fade if other image is selected
img.fadeOut('slow', function() { // fadeout the current image
img.attr('src', image_src).fadeIn(); // load and fadein new image
});
}
});
});
This image show how the website looks and where should the images change when someone hovers with their mouse on the text on the right
I don't think you need Js in this specific case why not just doing something like :
.thingToHover ~ .imageToShow
{
display : block;
}
Of course you'll need your images to be previously set as display:none.
If you want the fade in / fade out effect just add transition : 0.5s to the class of your images.
Here is an exemple in a JsFiddle
I'm working on a website for a school project and I'm having trouble with using the javascript. I am not a fan of js because I always have issues with it and I can never seem to get them figured out without help, but it is one of the requirements for the project. I am trying to make the title in the page move in from off the left side of the page and into the center when the page loads. Here is my code:
JS:
function animate() {
function movetext() {
obj = document.getElementById('spacer');
obj.style.position ='relative';
obj.style.left = '-100px'; //still needs to be adjusted
}
function moveright() {
obj.style.alignContent="center";
obj.style.animation="move 2s";
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lockport, NY - Activities</title>
<link rel="stylesheet" href="project.css">
<link href='https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
</head>
<body onload="animate();">
<!-- Background -->
<div class="background">
<!-- Navigation -->
<?php
include 'includes/nav.php';
?>
<!-- Title -->
<div id="spacer"><p span class="titles">Activities...</p></div>
<div id="wrapper">
<div id="main">
//code removed for readability
</div>
<!-- Footer -->
<?php
include 'includes/footer.php';
?>
</div>
</div>
</body>
<script src="project1.js"></script>
</html>
I know I'm not the greatest when it comes to coding, and I know its probably a simple fix but I can't find it. Help is appreciated.
You can do this easily with CSS animations:
setTimeout(function() {
document.getElementById('spacer').classList.add('show');
}, 100);
#spacer {
position: absolute;
right: 100%;
transition: right 3s;
}
#spacer.show {
right: 50%;
}
<div id="spacer">
<p class="titles">
Hello
</p>
</div>
A more elegant solution for this would be to use two classes (e.g. .centerpos, .title) and just assign the class with the styling for centering the text via js.
So it would look something like that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lockport, NY - Activities</title>
<link href='https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
</head>
<style>
.title {
position: absolute;
left: -100px;
transition: left 2s;
}
.title.centerpos {
left: 50%;
transform: translate(-50%, 0);
}
</style>
<body onload="document.querySelector('.title').classList.add('centerpos');">
<div class="background">
<div id="spacer"><p span class="titles title">Activities...</p></div>
<div id="wrapper">
<div id="main">
//code removed for readability
</div>
</div>
</div>
</body>
</html>
Ok the deal is I have a page with a top banner 100% wide and 500px tall and below that a content area, say, 4000px tall. inside that content area there is a box (100 by 100) that I want to have act the way in a certain way. When I scroll down the page to the point were that box touches the top of the screen I want it to be fixed at the top until I scroll up and it becomes unfixed at the top of the parent container (so where it was to start). Anyone have any examples or simple fixes????
Edit:
I found this fix that I think will work but I don't know what I am doing wrong:
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(code is in the head of the html document)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
I know this code is meant to add a class to the #contentSideIner div, .sticky {position: fixed; top: 0; }. am I making a kind of brain dead mistake here?
this is the jfiddel that is basicly what i have http://jsfiddle.net/07xe5tLf/
more code i have in use:
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li>Home</li>
<li>Monthly Spotlight
<ul>
<li>Destiny</li>
<li>Diablo III</li>
<li>Shadow Of Mordor</li>
<li>The Last Of Us
<li>Bayonetta 2</li>
</ul>
</li>
<li>Older Reviews</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. :)
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don't make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn't make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I wanted to stick the 2nd div when we scroll down the page and when the 2nd div meets the top boundary. When it's fixed, it should scroll along with the other pages. How can I achieve this?
#settings{
width:100%;
background:#383838;
height:60px;
}
#menu{
width:100%;
position:relative;
height:100px;
background:#aaa;
}
#body-content{
height:900px;
position:relative;
}
and the HTML
<body>
<div id="top">
<div id="settings">
</div>
<div id="menu">
</div>
</div>
<div id="body-content">
</div>
</body>
Here in this example http://jsfiddle.net/WBur3/ , the 2nd div should be fixed when we scroll the page. When we scroll up, should turn into the previous state itself. Please help me.
You can get this effect with jquery
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
DEMO HERE
NOTE: Don't forget to include jquery library link in your page (assuming you as beginner)
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
I would add a comment here but I don't have enough reputation to do that. I was needing something similar in a project and I thought I'd share my changes to #Sowmya's answer. I cleaned the code up a bit and made the scroll effect a lot smoother. JSfiddle
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});
body {
font: 13px sans-serif;
}
#stickyheader {
width: 100%;
height: 40px;
background:black;
color:white;
margin-bottom: 10px;
}
#unstickyheader {
margin-bottom: 15px;
}
Assign an id to menu div:
<div id ="menuContainer">
Include jquery in the project and on the page:
<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
Below is the code to implement desired effect:
<script type="text/javascript">
$("document").ready(function ($) {
// On document load get the position of the div u want to stick on certain position
var offsets = document.getElementById('menuContainer').getBoundingClientRect();
// Get position from top of browser
var topoffsets = offsets.top;
// Binding fuction to windows scroll event
$(window).bind('scroll', function () {
if ($(window).scrollTop() > topoffsets) {
$("#menuContainer").css({ top: 0, position: 'fixed' });
} else {
$("#menuContainer").css({ top: '', position: '' });
}
});
});
Without `
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
`, we can do this by using the above code.
I am wondering if there is a compatibility problem between JQM and Flot.
I've looking for documentation about this, but there is not a lot...
Here is the issue: depending on the order in which I load the libraries, things work while others don't:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is not displayed: "Uncaught Invalid dimensions for plot, width = 671, height = 0"
Now if I remove JQM:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is displayed and the resize works, so I guess this problem comes from JQM but I have no idea what...
I've tried to load things in different orders, but nothing helps.
Does anybody know a workaround for this ?
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>
<script type="text/javascript">
$(function () {
var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];
var c1_data = [{ data: c1_values, label: "curve1"}];
$.plot($("#placeholder"), [
{
data: c1_values,
lines: { show: true, fill: false }
}
]);
});
</script>
</body>
</html>
I am currently trying this "no conflict" function, but no result for now.
jQuery Mobile automatically wraps all your content in a page if you don't include on yourself. Generally, that means you ought to do it yourself in your code! So, first step is to move your placeholder into a jQM template:
<div data-role="page">
<div data-role="header">
<h1>Flot test</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
/></div>
<!-- /content -->
</div>
<!-- /page -->
Now, it seems to be a common problem that the content div does not stretch to fill the whole available vertical space. I found two solutions, neither of which seem very ideal.
Use CSS to try and make the content div full height (note that data-role"content" becomes a CSS class of ui-content):
.ui-content {
height:100%;
width:100%;
position:absolute;
}
Use Javascript to fix the content height dynamically as you go along (do this before your flot call). Taken from here:
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".ui-header:visible");
var footer = $(".ui-footer:visible");
var content = $(".ui-content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(window).bind("orientationchange resize pageshow", fixgeometry);
Neither of those solutions seemed to work particularly well for me, although they both did "work" as far as showing the graph.
I've posted an example of the 2nd version here: http://alpha.jsfiddle.net/ryleyb/mz24P/
The CSS is there as well, commented out if you want to try that instead.