JQuery SVG and font coloring - javascript

How do I change the color of text using JQuery SVG?
I currently have the following code:
<html>
<!-- jquery imports here -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').svg({});
var svg = $('#myContainer').svg('get');
svg.text(200, 200, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle"});
});
window.onload = function () {
// more code
}
</script>
<body>
<div id="myContainer" style="width: 640px; height: 480px;"></div>
</body>
</html>

Try to change fill.
{'text-anchor':"middle", 'fill':"#00ff00"}

Related

I was not able to see images while converting html page to pdf using javascript

here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764

Highlight epub text inside iFrame

I have to upload ePub files on my webpage using iFrame. Now I want to add the functionality of highlighting user selected text inside that iFrame containing the ePub. I am currently using Rangy Library for text highlighting, and it works for the text outside of the iFrame but not for the text inside it.
Here is the code for highlighting:
<!DOCTYPE html>
<head>
<style>
.highlight {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="../lib/rangy-core.js"></script>
<script type="text/javascript" src="../lib/rangy-classapplier.js"></script>
<script type="text/javascript" src="../lib/rangy-highlighter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.js"></script>
<script type="text/javascript">
var highlighter;
window.onload = function() {
rangy.init();
highlighter = rangy.createHighlighter();
highlighter.addClassApplier(rangy.createClassApplier("highlight", {
ignoreWhiteSpace: true,
tagNames: []
}));
function highlight() {
highlighter.highlightSelection('highlight');
// var iframe = $("iframe")[0];
var selTxt = rangy.getSelection(myFrame);
console.log('selTxt: '+selTxt);
highlighter.highlightRanges('highlight', selTxt._ranges);
}
document.getElementById('highlight').addEventListener('click', highlight);}
</script>
</head>
<body>
<button id="highlight">Highlight</button>
<div>select to highlight </div>
<div>line to be highlighted</div>
<div>line to be highlighted one </div>
<p>Another <b>paragraph</b></p>
<iframe src="iframe.html" width=500 height=500 name="myFrame"></iframe>
</body>
</html>
This is the iframe code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is iframe </h1>
<p>Select content to highlight</p>
<p>Select text to highlight</p>
</body>
</html>
This code works but only highlights the text outside of the iframe,I need it to highlight text inside the iframe.

How to get div content in javascript variable?

I am trying to get the content of a div in a JavaScript variable.
I did try some code:
<html>
<head>
<script>
function data(){
alert();
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1);
}
</script>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1 <!-- The content I'm trying to get -->
</div>
Logout
</body>
</html>
But it does not work correctly.
Instead of
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1)
it should be
var MyDiv1 = document.getElementById('newdata').innerHTML
alert(MyDiv1)
OR
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1.innerHTML)
With .innerHTML you will get the html of specified element in the DOM.
EDIT:-
SEE DEMO HERE
You must use innerHTML.
<html>
<head>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1
</div>
Logout
</body>
<script>
function data() {
var MyDiv1 = document.getElementById('newdata').innerHTML;
alert(MyDiv1);
}
</script>
</html>

Cant get the height of the div in html

I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});

click handler with dojo editor

i have this code:
<!DOCTYPE HTML>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var myButton = dojo.byId("btn");
dojo.connect(myButton, "onclick", function (evt) {
require(["dojo/_base/xhr", "dojo/parser", "dojo/dom"], function (xhr, parser, dom) {
xhr.get({
url: "teste_apagar.php",
load: function (data) {
alert("as");
var um = [];
dijit.registry.filter(function(w){
if(dojo.indexOf(um)){
w.destroyRecursive();
}
});
dom.byId("result").innerHTML = data;
parser.parse("result");
}
});
});
});
</script>
</head>
<body class="claro">
<script type="text/javascript">
dojo.require("dijit.Editor");
</script>
<div id="btn" style="width: 100px; height: 30px; margin-bottom: 150px; background-color: red;">load</div>
<div id="result">
</div>
</body>
</html>
However, when i click in bold button, or italic, even with right click in top bar with the formatting options, the ajax request is reloaded. So the dojo editor is loaded when i press the formatting toolbar
Any idea ? demo here
You need to execute Dojo code once Dojo is loaded. See http://jsbin.com/ukesup/7.
In the way you are doing the 'myButton' is null beacuse dojo isn't loaded yet and dojo.byId returns invalid value or simply doesn't exist.
Also remember to load required widgets once dojo is loaded. In the sample i used the Dojo <1.7 way:
dojo.addOnLoad(function() {
dojo.require("dijit.Editor");
...
more code here
...
});

Categories

Resources