i want create generate web to pdf. In My Website,
this script is work, but not generate images in my website.
you can download my script in this link > http://tinyurl.com/jspdftesting
you can test in file "test.html"
Before ask i already try search in google, but not found about this case.
Please help me. This is my script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('try.pdf');
});
});
</script>
</head>
<body >
<div id="target">
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.<br/>
<img src="http://cdnstatic-2.mydestination.com/library/images/481030_1680_948.jpg" width="200px" height="100px">
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
HTML/WEBPAGE VIEW
PDF VIEW
Someone might need this one day; Images have to be converted to base64.
Related
I am trying to make a full page dropzone using Dropzone.js using the following code.
However, when dragging files onto the body of the document, they are not picked up by Dropzone and are instead opened by the web browser.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="dropzone-5.7.0\dropzone-5.7.0\dist\dropzone.js"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var myDropzone = new Dropzone(document.body, {
url: "/test/"
});
});
</script>
</body>
</html>
Reading this post help me understand something new, thus this is a simple report.
By putting the <!DOCTYPE html> tag into html, you tell the browser to run in a standard html mode.
Back to this case, since you have a body with nothing, it is zero height which cant drop file. If you remove the <!DOCTYPE html> tag, the body will as height as the browser client. Welcome to the Quirks mode.
I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..
You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.
I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.
I cant make the shadowbox work...I have a static html page which has an image that acts as a link to open a swf in the shadowbox.
however when I click on the image it opens the swf like any other image file in the browser.
The Shadow box doesn't seem to work at all.
This is my html page. I am using shadowbox-build-3.0b. Its strange that this editor doesnt allow new users to use image tag in the html code in the editor. So i have changed mine to image.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/adapters/shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<link type="text/css" href="shadowbox-build-3.0b/shadowbox.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="shadowbox-build-3.0b/languages/shadowbox-en.js"></script>
<!-- Begin Shadowbox JS -->
<script type="text/javascript">
jQuery(document).ready(function () {
Shadowbox.init({
language: "en",
players: ["image"]
});
});
</script>
<!-- End Shadowbox JS -->
</head>
<body>
<image src="imagewithplaybutton.jpg" >
</body>
</html>
Hmm. I have not used shadowbox myself, but if you look at the way how the page suggests you set shadowbox up, there seems to be things that are wrong.
As i understand you want swf file to open when clicking on image; Shouldn't you set players: to swf then?
Your code also does not show if your img has link around it and if that link has rel="shadowbox" attribute.
I guess it should be set up something like this:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["swf"]
});
</script>
<img alrt="click here to open swf file" src="imgofflash.jpg"/>
Shadowbox.init() shouldn't be in the document.ready(). It should execute as the page loads.
I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.