As jspdf does not support utf8 characters, I'm trying to replace some of the characters with images and then export it in pdf. To help you understand, I made the sample of code, where I try to put an image in html div, and then paste this into the pdf with jspdf. The text appears in pdf, but no image, so whats the issue? I am a beginner, so please explain me how to do this.
TRY THIS LINK AND SEE THE PROBLEM: http://www.balkanex.info/test/start.html
And the code is below:
start.html
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="runner.js" charset="utf-8"></script>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
</head>
<body>
<input type="button" id="btn" value="PROCEED TO THE NEXT PAGE" onClick="run();pdf();">
</body>
</html>
runner.js
function run() {
document.write('<div id="myid">This is the image: <img src="button.png" alt="Submit"> </div><br/>');
document.write('<button id="pdf">Export in pdf</button></div>');
}
script.js
function pdf() {
$(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}};
$('#pdf').click(function () {
doc.fromHTML($('#myid').html(), 15, 35, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample.pdf');
});
});
}
The library you use jspdf does not support some of the utf-8 letters, so I suggest you to use some other lib (like Mozilla's pdf.js) and avoid these problems.
If you, on the other hand, decide to use this one - then I you will have to make an array for each variable that saves the string and then replace chars with images.
Related
First of all: It's my first time using javascript.
I wanted to implement the Before/After Plugin into Powerpoint. So I created a html file that I loaded with a webbrowser object in Powerpoint. That worked basically but the plugin requires me to define the height and width statically for the pictures I use:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container">
<div><img alt="before" src="pics1/before.jpg" width="3696" height="1583" /></div>
<div><img alt="after" src="pics1/after.jpg" width="3696" height="1583" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
</script>
</body>
</html>
So I wanted to implement the function that the size is statically defined but determined once in the beginning by the size of the screen. After experimenting a bit I found a solution that works partly:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* <![CDATA[ */
var wi=screen.availWidth-20;
var img1=document.createElement("img");
img1.alt="before";
img1.src="pics1/before.jpg";
img1.height=wi*img1.height/img1.width;
img1.width=wi;
document.getElementById("container").appendChild(img1);
var img2=document.createElement("img");
img2.alt="after";
img2.src="pics1/after.jpg";
img2.height=wi*img2.height/img2.width;
img2.width=wi;
document.getElementById("container").appendChild(img2);
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
/* ]]> */
</script>
</body>
</html>
The problem now is/are following:
Firefox: Does not load the pictures at the first time but after refreshing it works perfectly.
IExplorer: It does not show anything.
Chrome: It does not show aynthing.
Powerpoint WebBrowser: It does not show aynthing.
I already tried to fix by the "$(document).ready(function() {..." part but it does not help at all.
What's wrong here?
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
I have same problem as "element.dispatchEvent is not a function" js error caught in firebug of FF3.0 but in google chrome.
I have wrote <script>jQuery.noConflict();</script>
after all scripts. But now I have another problem:
...
$("a.try").click(function () {
...
undefined is not a function
and
...
var blockHeight = $(window).height();
...
undefined is not a function
Thus first fix is not valid.
P.S.
html part where I include scripts:
....
<script type="text/javascript"
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"
src="<c:url value='/resources/js/underscore.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.8.2.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery.mousewheel.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/popup.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery.jscrollpane.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/scroll-startstop.events.jquery.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/map/map.js'/>"></script>
<script type="text/javascript"
src="//maps.google.com/maps/api/js?sensor=true&js?v=3.exp&libraries=places"></script>
<script type="text/template" id="terminal-template">
...
</script>
<style>
.grey-terminal {
background-color: rgb(226, 226, 226);
}
</style>
<script type="text/javascript"
src="<c:url value='/resources/js/addTerminal.js'/>"></script>
<script>jQuery.noConflict();</script>
...
Can you advise another way?
When you call jQuery.noConflict(); you no longer associate jQuery with the $ variable.
So things like $().click or $(selector) will throw errors. Instead, you can do something like this:
jQuery.noConflict();
jQuery('a.try').click(handler);
jQuery(window).height();
Or, you can also assign jQuery to a new variable, like this:
var j$ = jQuery.noConflict();
j$('a.try').click(handler);
j$(window).height();
http://jsfiddle.net/wL4mc03a/
Edit
As for dispatching events, one way you can do this (using jQuery) is to trigger the event. Say you have some code that looks like this:
jQuery(document).on('keydown', function(e){
if (e.which === 42) {
alert('That is the key to life!');
}
});
Later, you can trigger this event. Instead of triggering the event using a string ('keydown'), we'll create an jQuery event and pass that.
var evt = jQuery.Event('keydown');
evt.which = 42;
jQuery(document).trigger(evt);
This helped me!
Adding jQuery.noConflict(); just before starting the jquery code and then replacing all '$' with 'jQuery'.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
....
....
});
</script>
Same as mentioned in the above solution #Jack
test.html:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<div id="box">
</div>
</body>
</html>
and app.js:
require(["domReady"], function (dom_ready) {
dom_ready( function () {
document.getElementById('box').innerHTML = 'test';
});
});
I dropped the require.js and domReady.js files in the same directory:
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js
http://requirejs.org/docs/release/2.1.11/minified/require.js
My browser does not display the "test" string in the webpage when I open it (tried with FF and chromium).
However, the "test" string is displayed if I add an empty tag:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<script type="text/javascript"></script>
<div id="box">
</div>
</body>
</html>
What did I miss ?
Close the script-tag properly.
<script type="text/javascript" data-main="app" src="require.js"></script>
I've set an onclick event unobtrusively to one of my buttons which is working fine in Firefox, Chrome, Safari and Opera. But in IE8 te script is never called (debugger statement is never executed).
The script:
$(function () {
$('#template-button').click(function () {
debugger;
var $templateDdl = $('#templateDdl');
var selTempID = $templateDdl.val();
var url = $templateDdl.data('url');
$.post(url, { selectedTemplateID: selTempID }, function (data) {
$('#template').html(data);
});
});
});
The button:
<input type="button" value="Verander template" id="template-button" />
The JQuery is in a seperate file called artsportaal.js which is loaded in the _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.loader.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/artsportaal.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
It is being loaded as almost the last script.
Is this a well known issue with a work around? Have I done something wrong? Thanks for your time and interest in my question.
This code works perfectly. As #ravisoni commented, I could have been because of name collision.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function () {
$('#my_button').click(function () {
alert('button got clicked!');
});
});
</script>
</head>
<body>
<input type="button" value="click_me" id="my_button" />
</body>
</html>
EDIT: I edit to comment to #devnull69 as to "debugging;". Statements with no side efects are accepted in JS, and therefore the script does not crash because of that "debugging;"
This is valid JS:
$(function () {
$('#my_button').click(function () {
'use strict';
'or better, do not use strict';
var x = 83;
x;
alert('button got clicked!');
});
});
Try it out: http://jsfiddle.net/SQgdK/1/