I have two jquery mobil HTML5 files, each has a navigation bar and a canvas. If I load page one first, the canvas is drawn ok. If I load page 2 first, the canvas is drawn ok. But if I use the navigation bar to switch from one to page two, nothing is drawn. If I refresh page two, it is now drawn but if I navigate back to page one, the canvas fails to be drawn. What am I doing wrong?
The code below is for page1.html Save it and copy it to page2.html and change the color of the circle.
<!DOCTYPE html>
<html>
<head>
<title>Compass</title>
<style type="text/css">
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
}
</style>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.1.css"></link>
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script language="JavaSCript" type="text/javascript" src="jquery/jquery.mobile-1.3.1.js"></script>
</style>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('myDrawing').getContext('2d');
var scale = 1.2;
var size = 300;
var halfSize = size / 2;
var center = size * scale * 1.1;
var ring = size;
// setup
ctx.clearRect(0, 0, 800, 800);
ctx.translate(center, center);
ctx.scale(scale, scale);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// fill in the back color
ctx.fillStyle = '#ffe8c0';
ctx.arc(0, 0, ring, 0, Math.PI * 2, true);
ctx.fill();
}
</script>
</head>
<body style="z-index:1.5;">
<div data-role="page" id="dial" class="unselectable" align="center" >
<!--HEADER DIV-->
<div data-role="header" align="center" data-nobackbtn="true" >
<h1 id="Title" value="">COMPASS </h1>
<div data-role="page" id="Menu" class="unselectable" >
<div
style="top: 1;
left: 1;
position: absolute;
z-index: 1;
visibility: show;">
</div>
</div><!-- /page -->
</div><!-- /header -->
<canvas id="myDrawing" width="800" height="800" >
<p>Your browser doesn't support canvas.</p>
</canvas>
<div class="ui-bar-a unselectable" data-role = "footer" data-id="foo" data-position="fixed">
<div class="" data-inline="true" >
<div data-role="controlgroup" data-type="horizontal" align="center" >
<a href="page1.html" data-role="button" id="dial" >Compass</a>
Wind
</div>
</div>
</div><!-- /footer -->
</div> <!-- /Div1 -->
</body>
</html>
Related
I have created a contenteditable div that has a sticky menu toolbar (sticks at top of browser if scrolling reaches top of page) and a content area with text and an image. Clicking the image brings up a pop-up toolbox to allow for image manipulation.
The pop-up toolbox is supposed to appear next to the cursor pointer, hower:
With the CSS sticky configuration it does NOT work - it is offset by over 100 pixels in both X and Y and gets more/less offset when at different page zoom factors.
When I remove the sticky configuration (position:sticky, top:0), it works and pops up right at the cursor pointer
Why does this happen? How can I keep the sticky menu toolbar and have it work as intended?
Code below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
/* EDITOR */
.qr_editor {
max-width: 100%;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
z-index:10;
/*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
position: sticky;
top: 0;
}
</style>
<div id="position"></div>
<br>
<div class="container">
<div class="qr_editor">
<div class="toolbar sticky">
<div class="line">
<span class="box">
<span>Example Sticky Tool Bar Goes Here</span>
</span>
<div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
Sample Image Tools Popup Box
</div>
</div>
</div>
<div class="content-area">
<div contenteditable="true">
<div>Sample Text</div>
<img class="qr_editor_img" src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//to display coordinates
$( document ).on( "mousemove", function( event ) {
$( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
//pops up toolbar for image manipulation
var img_src = '';
$(document).on("click", "img", function(e) {
console.log(e.pageX);
console.log(e.pageY);
//position the popup toolbar where the mouse click is
e.preventDefault();
$('#popup_toolbar').css( 'position', 'absolute' );
$('#popup_toolbar').css( 'top', e.pageY );
$('#popup_toolbar').css( 'left', e.pageX );
$('#popup_toolbar').show();
});
});
</script>
</body>
try this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
/* EDITOR */
.qr_editor {
max-width: 100%;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
z-index:10;
/*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
position: sticky;
top: 0;
}
#popup_toolbar {
position: fixed;
}
</style>
<div id="position"></div>
<br>
<div class="container">
<div class="qr_editor">
<div class="toolbar sticky">
<div class="line">
<span class="box">
<span>Example Sticky Tool Bar Goes Here</span>
</span>
<div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
Sample Image Tools Popup Box
</div>
</div>
</div>
<div class="content-area">
<div contenteditable="true">
<div>Sample Text</div>
<img class="qr_editor_img" src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//to display coordinates
$( document ).on( "mousemove", function( event ) {
$( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
//pops up toolbar for image manipulation
var img_src = '';
$(document).on("click", "img", function(e) {
console.log(e.pageX);
console.log(e.pageY);
//position the popup toolbar where the mouse click is
e.preventDefault();
$('#popup_toolbar').css( 'top', e.pageY );
$('#popup_toolbar').css( 'left', e.pageX );
$('#popup_toolbar').show();
});
});
</script>
</body>
Pardon if this is too much of a newbie question, or just not the right type of question. I am in the beginning phase of learning how to program and one of my first tasks is getting my annotation editor to work.
I use bootstrap to create columns; namely, the column on the right (1/12th of sceen) to contain the different colors, and the other 11/12th column to contain the entire annotation editor(the pictures, etc). This all works well, except for the fact that my right column does not work or show up.
I think I am pretty sure that I closed the column of the first 11 portions, but trying to create another div with 1 column simply doesn't work; thus, I cannot put anything in it and can't put my colors in there.
The HTML syntax looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="2048_MMA/style/bootstrap.min.css" type ="text/css">
<link rel="stylesheet" href="css/clouds.css" type="text/css">
<link rel="stylesheet" href="css/background.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/dropdownmenu.css"/>
<style>
body{
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
padding-bottom: 500px;
}
iframe {
height: 670px;
width: 1200px;
margin-left:25%;
}
</style>
</head>
<body onload="init()">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
Applications
<ul>
<li>Mediaviewer</li>
<li>Annotation editor</li>
<li>2048</li>
</ul>
</li>
<li>
Essays
<ul>
<li>Essay Lea</li>
<li>Essay Jonathan</li>
<li>Essay Jelmer</li>
</ul>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-11">
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function(e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "purple":
x = "purple";
break;
case "grey":
x = "grey";
break;
}
if (x == "white")
y = 14;
else
y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Verwijder je kunstwerk?");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
<iframe src="mediaviewer2.html"></iframe>
<canvas id="can" width="1080%" height="610%" style="position:absolute;top:0.5%;left:29%;border:5px solid;"></canvas>
<img id="canvasimg" style="position:absolute;top:30%;left:54%;">
<input type="button" value="Reset" id="clr" size="23" onclick="erase()" style="position:absolute;top:15%;left:55%;height:40px;width:50px;">
</div> <!--end column--->
<div class="col-md-1">
<div style="position:absolute;top:%;left:50%;">Kies een kleurtje!</div>
<div style="position:absolute;top:15%;left:50%;width:15px;height:15px;background:green;" id="green" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:51%;width:15px;height:15px;background:blue;" id="blue" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:52%;width:15px;height:15px;background:red;" id="red" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:50%;width:15px;height:15px;background:yellow;" id="yellow" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:51%;width:15px;height:15px;background:orange;" id="orange" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:52%;width:15px;height:15px;background:black;" id="black" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:53%;width:15px;height:15px;background:purple;" id="purple" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:53%;width:15px;height:15px;background:grey;" id="grey" onclick="color(this)"></div>
</div>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div class="cloud x6"></div>
<div class="cloud x7"></div>
<div class="cloud x8"></div>
<div class="cloud x9"></div>
<div class="cloud x10"></div>
<div class="cloud x11"></div>
</div> <!--end clouds-->
</div><!--end row-->
</div><!--end container-->
</body>
This picture depicts what I mean. Can you spot any mistakes in the HTML markup itself?
http://imgur.com/qKBroc9
You have a couple of potential issues that I see.
One is that your iframe has a width of 1200px and a height of 670px. That's not responsive. So, on smaller viewports, you wouldn't be able to see the entire contents and it will break out of the columns. Happily, Bootstrap offers some nice features to make your iframe responsive. To do this, you'd use the Bootstrap Responsive Embed classes. This creates a container with an intrinsic ratio of either 4:3 or 16:9. Basically that means that the iframe scales proportional to one of those two ratios and keeps you from having to specify fixed values. The markup that is applied looks like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
This also now allows you to set your width and height on the canvas element to 100% and use top/left/bottom/right properties set to 0 so that it will fill the same space as the iframe regardless of the size of the viewport.
The second issue is that you have set all of the content in your col-md-1 div to be positioned absolutely, and you are using % for the top and left values. This isn't going to work, because a div with no content has a height of 0. Therefore, unless you give the col-md-1 a fixed height value, you'll only be positioning the content against 0 (and 50% of 0 is still 0). Providing a fixed height to the column is of course an option, but again it's not terribly responsive. The better option here would be to use fixed values for your top and left properties. After all, you are positioning elements that have a fixed size, so there's no problem with them overlapping provided that you give each at least 15px of room.
The best option by far though, would be to not use absolute positioning for those elements, and simply let your elements be in the document flow. You can even use a css trick similar to the one used in Bootstrap's responsive embeds to create an element that has proportional height and width, yet scales with the overall design. You can see in the demo that no matter what size the viewport is, the color blocks scale with it.
DEMO
I've also adapted the demo to use the conventional built in Bootstrap features for buttons, navigation and dropdowns. Learning to use what the framework offers will definitely help save you time and effort in development, testing and maintenance.
So I've got a test site that uses Google's Chart API. I wanted to put an Adsense banner on this site. When I add the Adsense code the chart won't display, but the ad does. Take the Adsense code out and the chart displays just fine.
EDIT: Doesn't matter where the Adsense code is put either. If it's there, the chart is not.
Here's the entire page:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Price'],
['Yesterday', 10.00],
['Today', 12.00],
]);
var options = {
title: 'kyurem'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div>
<h3>doeiqts's Pokemon Price Guide</h3>
</div>
<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4255182576260971";
/* Pokemon Graph */
google_ad_slot = "2704848389";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="cardPicture" style="height: 400px; width: 227px; float: left;">
<img src=http://pokegym.net/gallery/displayimage.php?imageid=53682 style="height: 320px; width: 227px; position: relative; top: 80px;" />
</div>
<div id="chart_div" style="width: 900px; height: 500px; float: left;"></div>
<div style="clear: both;">
<p>
<br>
<p>
This site is not affiliated with Nintendo, Pokemon, PokeGym, or eBay.
</div>
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!
I wanted to know if it is possible to create an image using html5.
Currently i am creating a text using canvas, now i want to convert that text into an image.
In order to save the canvas to an image file, you can use Nihilogic's code.
Use the canvas text functions.
For example:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillText("Sample String", 10, 50);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Create an image DOM element, and set the src to the canvas.toDataURL method.
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
var image = document.getElementById("Img");
image.src = c.toDataURL("image/png");
}
<canvas id="c" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<img id="Img" width="300" height="150" style="border:1px solid #d3d3d3;"/>
<button onclick="copy()">Copy</button>