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
Related
I want to create a gallery of multiple images, from a single "preview". I'll explain better. Let's say I have 3 different images which are 3 different products. By clicking on each of these, I would like to open a gallery (different for each preview) of x images for each single product.
I tried to create it using LIGHTBOX by Lokesh Dhakar, but I can only have one image for each single preview and the gallery is only one.
I have tried several attempts, but I can't get any better
Here is my code, hope someone has some ideas
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js">
</script>
</head>
<body>
<h1> Image Gallery Design</h1>
<div class="gallery">
<img src="PREVIEW1.png">
<img src="PREVIEW2.png">
<img src="PREVIEW3.png">
</div>
</body>
</html>
body{
font-family: sans-serif;
}
h1{
text-align: ceter;
color: forestgreen;
margin: 30px 0 50px;
}
.gallery img{
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover{
filter: grayscale(0);
transform: scale(1.1);
}
Hide the other <a> elements of the same set using a CSS Utility class like u-none that does display: none;
Use <img> only for the first set thumbnail
lightbox.option({
resizeDuration: 200,
wrapAround: true
});
.u-none {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet" type="text/css" />
<a href="https://placehold.it/500x500/f0b&text=A1" data-lightbox="set_1">
<img src="https://placehold.it/100x100/f0b&text=A1">
</a>
<a href="https://placehold.it/500x500/f0b&text=B1" data-lightbox="set_2">
<img src="https://placehold.it/100x100/0bf&text=B1">
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
or wrap all the hidden set images inside a common parent <div> with that u-none class .
I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
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...
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>
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.