It's possible to position a PDF onto a certain page by adding the fragment identifier
#page=N
to the URL (at least in Chromium and Firefox).
Is there any way to position by half pages? For example, something like: #page=1.5.
For doing scrolling, this should do it. It's a bit of jQuery. You could include your PDF with an iframe and and change ´$("body")´ to your iframe selector.
$(function() {
var fragment = window.location.hash.split("=");
if (fragment[0] == "#page") {
$("body").scrollTop($(window).height() * fragment[1]);
}
});
For displaying PDF files in the browser, it may be easier to convert/rasterise the file to an image then just display part of the image required. This way you have much more control of the image rather than trying to manipulate the PDF (plugin or other PDF rendering).
Related
I am developing a website and there is an option to upload images, provided with the features to crop it and upload it. Till now it was a separate page but now i want to display it as a link to first page and on clicking the link it should open a new frame (kinda like how facebook opens the images now) and display the options to select the image to upload along with cropping feature.
and i was posting an image here but due to points issue i am not allowed to so if you need to get the image idea just check a photo on your facebook account.
Look at at JQuery Boxy. It makes sense and looks much closer to facebook dialog
As you haven't specified a javascript framework, I thought I would suggest a plain javascript way to dynamically add an iframe to the current document. This is only really applicable if the picture uploading page is on the same server as the site that will deliver the iframe. Otherwise you probably want to use something other than frames...
function showIframe() {
/* Parent element */
var widget = document.createElement("div");
widget.style.position="fixed";
widget.style.top="100px";
widget.style.left="100px";
widget.style.width="300px";
widget.style.height="200px";
/* picture uploading page frame */
var iframe = document.createElement("iframe");
iframe.src = "http://localhost"; // use your picture upload URL here
/* Add to document */
widget.appendChild(iframe);
document.body.appendChild(widget);
}
and in the HTML add an element with a callback that calls showIframe() like:
<a onclick="showIframe()">Picture Widget</a>
Is there a way how I can grab html svg from a webpage using js console in Chrome e.g.? Svg code is wrapped with svg tag. And is it possible to save svg to local machine? or convert it to the image? and is it possible to import svg data ( e.g. charts/ graphs ) to google docs or excel?
You have access to the complete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.
so all you need is a unique identification of the svg element in question.
start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the command prompt:
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js');
(document.getElementsByTagName('head'))[0].appendChild(e);
$('svg');
the last command will provide you with a dom fragment containing the svg element.
the preceding vanilla javascript commands add a script element referencing the jquery library to the current web page. jquery simplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).
if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.
Note
in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg') (thanks to Ir0nm for this information).
Answering part one of your question :
If you're trying to locate the svg tag by the console, you can get it with :
document.getElementsByTagName('svg')[0]
if you have multiple svgs embedded on the page, change the [0] (or remove it) to catch the right part.
From there, you could right click to view that svg element in the elements panel, and from there copy as xhtml. (i tried that line with this page : http://www.w3schools.com/html/html5_svg.asp )
In webkit browsers you can right click on SVG element and choose "Inspect Element". this will open the Web Inspector tool. Typically from there you can right click on the svg node and "Copy As HTML", or from the console type $0.outerHTML
Then paste SVG into a local document. You could then use phantomjs to rasterize it.
Old versions of Opera (v12 and older) had the unique ability to right click the SVG image, and "Copy Image"; this would put a raster image on your clipboard - (I abused this feature back in the day.) - disclaimer: i use a mac, may be different on windows.
Just been looking at this and came across svg-crowbar - a chrome specific bookmark. You put it on your bookmark bar, and on a page with SVG you click on the bookmark. A box will hover over each SVG with a download button.
The downloaded SVG also includes the relevant style information, in case the SVG has been styled using CSS.
Solutions that work for me (on a Mac):
1 - Drag the Logo to your desktop (any browser)
In some cases, the code of the page allows you to drag the .SVG file from the website directly onto your desktop or chosen folder. Super easy!
2 - Print to PDF (Safari, Firefox)
This requires a little more work and might now always work. On the Print dialog, go to PDF > Save as PDF. The preview should allow you to see if the logo will be exported or not (sometimes, it doesn't work).
After export, you can open the file in the vector editing app of your choice.
3 - Drag and drop from Chrome's Inspector
This one might work in desperate cases. Inspect the logo element, and hover over its name. A little window with a thumbnail will appear with the logo inside. Click the small logo, drag it to a folder.
There might be other solutions like mentioned above (copy the code and convert it somehow - in the third website example I showed this didn't work because the code looks like this, or SVG Crowbar also works sometimes (and sometimes not - like when the download boxes are overlapping).
Is it possible to embed code inside a PDF document ?
I'm interested in creating a PDF document with a dynamic image,
so once a user will open the PDF in a certain time he will get to see image 1 and on a different time he will get to see image 2
(both images source will be on the web and will require HTTP transfer).
Looks like it is possible but it does not seem trivial:
PDF with dynamic image
I have a link as:
PDF
I want to set a tooltip for this link and in tooltip display the same pdf file.
That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.
I searched that for in google, but there have no link siutable for me.
There have a lot of model for image ,text in tooltip.
How can I do this?
Anyboady have any solution?
Displaying a PDF generally involves launching a browser plugin, such as Adobe Reader, which has its own menu bar, toolbar, and so on. Cramming that into a small space like a tooltip probably isn't very practical.
You'd be better off rendering a thumbnail image — maybe use a PDF library on the server for this — and showing that in the tooltip.
You can try pdf.js
It renders PDF files onto canvas..
But in my opinion it is not a good solution at all, when the PDF is big, it will take some time to load it into the tooltip..Better is to create a thumbnail on the server and display it as a standard image..
Here is how to do that with PHP
I think that requires the browser to have a plugin to display PDF inline instead of downloading it. Once this is ensured, you can set the target of your tooltip to the URL pointing to PDF. What tooltip library are you using, btw?
I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).