Raphael. Text using the print (). Why not work? - javascript

I want to write text with the print () function. I added cufon file. Unfortunately, the text is not displayed. Why? Please help me.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<script src="raphael.js" type="text/javascript"></script>
<script src="harabara.cufonfonts.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload = function() {
var r = new Raphael('holder', 640, 480);
var font1 = r.getFont("Harabara");
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
};
</script>
<style type="text/css">
#holder { width: 640px; height: 480px; border: 2px solid #aaa; }
</style>
<div id="holder"></div>
</body>

One thing I see right away:
var text1 = r.print(10,100, "click me", font1, 48).attr({"stroke-width": 3, fill: "red", "stroke": "blue"});
returns a Raphael path object. So you need to assign that path to your Raphael paper.
Paper.print() Creates path that represent given text written using
given font at given position with given size. Result of the method is
path element that contains whole text as a separate path.
http://raphaeljs.com/reference.html#Paper.print
Have not tested it yet, but just leaving the code the way you wrote will not print anything to the paper.
One more thing: keep your style tags in your header.

Related

Trying to change background color with variable

Trying to change color using a variable, console works but color not changing when I click on the square.
Color is the variable I want to use.
I have tried an actual string value and that does not work.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColour = colour;
console.log(colour);
}
</script>
</body>
</html>
its backgroundColor not Colour .. you have an extra u
You need to replace backgroundColour by backgroundColor without u :
document.getElementById("shapes").style.backgroundColour = colour;
______________________________________________________^
Must be :
document.getElementById("shapes").style.backgroundColor = colour;
NOTE 1: You need to trigger the function to see the effect and you must also give your target div shapes a width/height so you can see it.
NOTE 2: You must listen on DOMContentLoaded event to make sure all the elements are loaded to the DOM before calling your script.
Working sample:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<style>
#shapes {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var shapes = document.getElementById("shapes");
shapes.addEventListener('click', myFunction, false);
});
function myFunction() {
shapes.style.backgroundColor = "#" + (Math.random() * (1 << 24) | 0).toString(16).slice(-6);
}
</script>
</body>
</html>
Try this
const shapes = document.getElementById("shapes"); // You declare once, then you can reuse
function myFunction() {
var colour = '#'+((Math.random() *(1<<24)|0).toString(16).slice(-6));
shapes.style.backgroundColor = colour;
console.log(colour);
}
shapes.addEventListener('click', myFunction); // I guess you want to click somewhere
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">Shapes</div>
Below code gives the expected result. please take it.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
<style>
#shapes {
width: 300px;
height: 300px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes" onClick="myFunction();">
test
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColor = colour;
console.log(colour);
}
</script>
</body>
</html>

Adding colour to text from a array of colours

I would like to add different colours to different texts. The list of colours that I would like to add is stored in an array. How will I use that array to assign colours to my texts? Please check the code that I have written. The text "hai" is supposed to be in cyan colour. But the output is not as expected.
<!doctype html>
<html>
<body>
<script>
var colors=['blue','cyan','gold','grey','green'];
</script>
<h1 style="color:colors[1]">hai</h1>
</body>
</html>
You should first give your desired element an id then retrieve it through js and style it:
<!doctype html>
<html>
<body>
<script>
window.onload = function() {
var colors = ['blue', 'cyan', 'gold', 'grey', 'green'],
h = document.getElementById('heading1');
h.style.color = colors[1];
};
</script>
<h1 id="heading1">hai</h1>
</body>
</html>
dNitro's solution works. I'm confused why you need to store colors in an array. If you want to provide different colors to different text. The common solution is design different color styles in css and use it in your element. As the code below
<!doctype html>
<html>
<style media="screen">
.cyan
{
color: cyan;
}
.blue
{
color: blue;
}
</style>
<body>
<h1 class="cyan">Hello, </h1>
<h1 class="blue">World</h1>
</body>
</html>

Inserting js into iframe not working as expected

I am trying to copy jsfiddle's feature on my web page - a user can submit js on a page and it will be executed within an iframe. I ran some test code in jsfiddle and on my page. It works in jsfiddle, but not on my page. Any help is appreciated!
My page renders the css and html, but the js is not executing (the div background should be blue):
Here is the html in the iframe of the fiddle (which works):
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.test { display:inline-flex; padding:40px; background-color:#cccccc }
</style>
<title></title>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
document.querySelector('.test').style.backgroundColor="rgb(21, 160, 249)";
}//]]>
</script>
</head>
<body>
<div class="test" style="background-color: rgb(21, 160, 249);">test</div>
</body></html>
Here is the output to my web page:
<html><head><style>
.test { display:inline-flex; padding:40px; background-color:#cccccc }
</style><script type="text/javascript">//<![CDATA[
window.onload=function(){
document.querySelector('.test').style.backgroundColor="rgb(21, 160, 249)";
}//]]>
</script></head><body><div class="test">test</div></body></html>
The code that inserts the html, css, and js into the iframe:
$(document).ready(function() {
var codeContainer = document.querySelector('.executedCode'); //submitted code passed as values in attributes to hidden div on the page in node/express environment
var html = codeContainer.getAttribute('html');
var css = codeContainer.getAttribute('css');
var js = codeContainer.getAttribute('js');
var sandbox = $('.sandboxed');
sandbox.ready(function() {
var htmlContainer = document.createElement('div');
var cssContainer = document.createElement('style');
var jsContainer = document.createElement('script');
jsContainer.setAttribute('type', 'text/javascript');
var head = sandbox.contents().find('head');
var body = sandbox.contents().find('body');
$(head).append(cssContainer);
$(head).append(jsContainer);
$(html).append(htmlContainer);
$(cssContainer).append('\n\t'+css+'\n');
$(jsContainer).text('//<![CDATA[\nwindow.onload=function(){\n'+js+'\n}//]]>\n');
body.prepend(html);
});
});
window.onload seems to be the breaking point:
I ran a test by simply inserting an alert. Here's what worked and what didn't.
$(jsContainer).text("alert('hi')"); //--works
$(jsContainer).text('//<![CDATA[\nalert("hi");\n//]]>\n'); //-- works
$(jsContainer).text('window.onload=function(){\nalert("hi");\n}\n'); //-- doesn't work
The execution occurs on the line $(jsContainer).text(js) but the html isn't inserted yet.
You just need to move the line $(jsContainer).text(js) after the body.prepend(html) (without the onload event).

How to export Jchartfx svg chart to canvas

I tried to export jchartfx to canvas using html2canvas.js but it only converts other attributes into canvas but svg element is displayed as blank area. here is my code.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />
<script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/exportLibrary.js"></script>
<style>
.exportChart{}
.exportTable{max-width:700px;border:1px solid blue; margin:2px;}
</style>
<script type="text/javascript" >
var chart1;
function loadChart(){
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
var title;
title = new cfx.TitleDockable();
title.setText("Sample Demo");
chart1.getTitles().add(title);
var divHolder = document.getElementById('ChartDiv1');
PopulateCarProduction(chart1);
chart1.create(divHolder);
}
function PopulateCarProduction(chart) {
var items = [{
"Proportion": 70,
"Month": "Jan"
}, {
"Proportion": 30,
"Month": "Feb"
}];
chart.setDataSource(items);
}
</script>
</head>
<body onload="loadChart()">
<div><h1>HTML content to render:</h1>
<div id="content">
<div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>
<div class="exportTable" id="TableDiv1" style="width:600px;">
<table id="table1" >
<tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
<tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
<tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
<tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
</table>
</div>
</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="1000" height="800"></canvas>
<script type="text/javascript" src="tableexport/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>
The table is converted into canvas but svg is not converted. i need to convert svg to canvas with styles.
Here is the generated output.
It's due to security constraints. If a SVG contains any external references (foreignObject such as image data, css etc.) the browser will not allow the SVG to be drawn.
For security purposes, Gecko places some restrictions on SVG content
when it's being used as an image:
External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder [Blob] object URLs or
data: URIs.
[...]
Note that the above restrictions are specific to image contexts; they
don't apply when SVG content is viewed directly, or when it's embedded
as a document via the <iframe>, <object>, or <embed> elements.
Source
You could always save the SVG itself as an image, or if an absolute requirement, parse it using for example a library such as canvg.

Raphaeljs - making a box cover a line

The following webpage will draw a box with a line through it (using http://raphaeljs.com)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="raphael-min.js"></script>
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
paper = Raphael("paper1", 100, 100);
paper.rect(40, 40, 20, 20);
paper.path("M50,10L50,90");
}
</script>
<div id="paper1"></div>
</body>
</html>
I want the box to cover the line. I've tried applying every combination of opaque, fill-opacity and stroke-opacity and done a silly number of searches (Google, this site, etc). Nothing works.
This is what you want I think. The rect must be filled so its contents are opaque.
paper = Raphael("paper1", 100, 100);
paper.path("M50,10L50,90");
var rect = paper.rect(40, 40, 20, 20);
rect.attr({fill: "white"});

Categories

Resources