I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.
There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.
Do you guys know how to tell google docs viewer to show the document starting on a specific page?
I found a solution I'll post here just in case somebody is in the same situation.
Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">
won't work (maybe because the pages ids are not yet created when the page is rendered?)
So you just have to add an onload attribute to the iframe:
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">
and voilà, the iframe will automatically scroll down after loading.
Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19
I found these two ones :
1) just an Screenshot(Image) of specific page (without navigation):
https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12
2) a link to specific page of PDF in IFRAME (with navigation):
<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;
document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>
p.s. then you can have on your website go to page 3
For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.
Got it working in the imbed viewer
By changing the url with a timout function, this becous the pdf is not directly shown
$(window).load(function() {
setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);
});
Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)
You might want to change the language to your own &hl=nl
and for the people how have to support ie8
if you use a boilerplate like this:
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
you can change the output of the link directly to the pdf like this,
if( $("html").hasClass("ie8") ) {
$('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');
};
the pdf will be shown in the pdf reader from IE
My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:
Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:
var is_caught_up = false;
function pdf_go(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
if (!is_caught_up){
setTimeout('pdf_catchup('+page+')', 500);
}
}
function pdf_catchup(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
is_caught_up = true;
}
Related
I've worked on this for several hours today and am getting no where. Hoping someone can step in and please help.
All I want to do is display a simple message in a pop up dialog to tell users of some changes coming to a SharePoint 2010 site. I never thought this would be so difficult!
I've gone through a dozen links from a Google search but nothing has helped.
The only thing that sort of works is this code that I put into a Content Editor Web Part:
<script type="text/javascript">
function codeAddress() {
alert('ok');
var options = {
Title: "Survey",
height: 500
};
_spBodyOnLoadFunctionNames.push("codeAddress");
}
window.onload = codeAddress;
</script>
But, the problem with this code is that after I click Ok, the page behave strangely. The java script of the page does not work, and even editing the page is messed up until I delete the webpart with the code.
I suspect that the problem has to do with this:
_spBodyOnLoadFunctionNames.push
But if I remove it then the pop up does not work.
In case it's not clear, my goal is to show any type of dialog in which I can type a sentence or two to tell the user something. Then they can click OK and give full control back to the page.
Please please someone help!
Shame on Google for not leading you directly to SP.UI.Modal.Dialog.showModalDialog().
<script>
ExecuteOrDelayUntilScriptLoaded(showDialog,"sp.js");
function showDialog(){
var options = SP.UI.$create_DialogOptions();
options.title = "My Amazing Dialog Box";
// create a dummy HTML element for the body of your dialog box
var div = document.createElement("div");
div.appendChild(document.createTextNode("Some text inside my dialog box."));
options.html = div;
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
If you want to put that in a content editor web part:
Save the above code into a text file
Upload that text file to a document library on your site
Add a content editor web part to the page where you want the dialog to appear
Edit the web part, opening up the web part properties panel on the side of the screen
Paste the URL of the text file that you uploaded into the "Content Link" property
This method prevents SharePoint from stripping your JavaScript out of the content editor web part, and lets you use that same script on multiple pages.
For my application I need to programmatically save a copy of a webpage HTML along with the images and resources needed to render it. Browsers have this functionality in their Save page as... Webpage, complete options.
It is of course easy to save the rendered HTML of a page using phantomjs or casperjs. However, I have not seen any examples of combining this with downloading the associated images, and doing the needed DOM changes to use the downloaded images.
Given that this functionality exists in webkit-based browsers (Chrome, Safari) I'm surprised it isn't in phantomjs -- or perhaps I just haven't found it!
Alternatively the PhantomJS, you can use the CasperJS to achieve the required result. CasperJS is a framework based on the PhantomJS, however, with a variety of modules and classes that support and complement the PhantomJS.
An example of a script that you can use is:
casper.test.begin('test script', 0, function(test) {
casper.start(url);
casper.then(function myFunction(){
//...
});
casper.run(function () {
//...
test.done();
});
});
With this script, within a "step", you can perform your downloads, be it a single image of a document, the page, a print or whatever.
Take a study on the download methods, getPageContent and capture / captureSelector in this link.
I hope these pointers can help you to go further!
I want to save my special web pages after document loaded into special file name via all url and links convert to absolute url such as wget -k.
//phantomjs
var page = require('webpage').create();
var url = 'http://google.com/';
page.open(url, function (status) {
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
for example my html content somthing like this:
page
must be
page
It's my sample script but how can i convert all url and links such as wget -k using phantomjs?
You can modify your final HTML so that it has a <base> tag - this will make all relative URLs working. In your case, try putting <base href="http://google.com/"> right after the <head> on the page.
It is not really supported by PhantomJS is more than just an HTTP client. Imagine if there is a JavaScript code which pulls a random content with image on the main landing page.
The workaround which might or might not for you is to replace all the referred resource in the DOM. This is possible using some CSS3 selector (href for a, src for img, etc) and manual path resolve relative to the base URL. If you really need to track and enlist every single resource URL, use the network traffic monitoring feature.
Last but not least, to get the generated content you can use page.content instead of that complicated dance with evaluate and outerHTML.
I've implemented a "Skip to Content" link on my site and hidden it off screen (except when :focused). However, I've noticed on some pages where I haven't explicitly defined a meta description, Google picks up "Skip to Content" for its preview snippet in search results.
Is there a way to format or mark text that shouldn't be used in a search snippet? My case is a skip to content link, but I can imagine other similar needs. However, in this case, it must remain accessible (so no display:none, etc.).
I supposed what I'm looking for is some version of rel="nofollow" but for the next and not just the link.
tl;dr: "Skip to content" link appears in search snippets. That's not desired.
I don't think there is such a way for the general Google search.
Google allows customers of their Google Search Appliance and Google Mini products to state which content should be ignored for the search by using googleoff and googleon in HTML comments; see Excluding Unwanted Text from the Index. But this doesn't work for the public Google search, of course.
I think the bestway to try to prevent that problem would be to use a meta description: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812
<meta name="description" content="A description of the page" />
it must remain accessible (so no display:none, etc.)
Well, if you're OK with using JavaScript, you can still use style="display:none" in your div or span tag and add the following to your JS file:
$(document).ready(function() {
document.getElementById('skip').style.display = "block";
//Or shorter with jQuery
$('#skip').show(); //Alternatively: fadeIn()
});
I've got a html form submitting to a pdf using cfdocument.
Within that pdf, I have a link at the bottom that goes to another policy. I need that link to open up on a new page, rather than _self.
I've tried using Jquery to open the window and not sure if that is even possible, but wasn't successful to say the least.
So basically, I've got.
<cfdocument format="pdf">
stackoverflow
</cfdocument>
Not possible. Case closed!
Reason:
For my purpose, I'd need to be able to open another pdf in a browser window, but in order to do that, you would have to download the second one to Acrobat or another reader you've got.
Also, you're not able to use jquery to create the new window.
PDF
Or with JQuery
PDF
$(document).ready(function(){
$('#openPdfLink').click(function(){
window.open(this.href);
return false;
});
});