Is there any way to add the fullscreen option to the PDF that is embedded using iframe ?
<iframe src="http://www.web.com/test.pdf"></iframe>
You can't reliably control the PDF experience unless you replace the default viewer of the browser. They all behave slightly differently. However, the new free Adobe DC View SDK is a client-side JavaScript PDF viewer that will allow you to embed a PDF in your HTML page and it has a full-screen option. By using this viewer, the PDF will behave consistently and have a consistent UI across all browsers.
The code would look like this...
<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView =
new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "SIZED_CONTAINER"});
});
</script>
You can get the clientID here.
https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html
Adobe DC View SDK kept throwing errors constantly for some reason. So I tried Mozilla’s PDF.js and seems to be working just fine, even on mobile.
Related
How can I manipulate image in browser with jquery when the image is retrieved with:
http://slideshopro.com/dunlap-hall-entry-tower/wp-content/uploads/sites/621/2014/06/DSC02599.jpg?imageOnly=true
I tried to put:
if($_GET['imageOnly'] == true) {
?>
<script type=text/javascript>
jQuery(document).ready(function($) {
console.log('image');
}
</script>
<?php
}
in index.php and in functions, but I could not get it to run.
Hard to tell exactly what you are asking here, but if you are talking about manually manipulating the image, that will be tough to do with jQuery alone, especially if you want to do something with the manipulated image. You will need to work HTML5 Canvas.
I suggest you check out fabric.js, they created a powerful and simple Javascript HTML5 canvas library.
Currently I am using the standard way to embed an pdf to the browser, however, the built-in pdf viewer for my target browser is not working as expected. I would like to force (Chrome, Firefox and IE8 (if possible, but IE9+ is also ok)) to use the adobe reader. The problem is , I can only change this option manually. Is there any way to change the option in HTML/ JS/ PHP ? Thanks.
<OBJECT data="YourFile.pdf" TYPE="application/x-pdf" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>
I try to find the solution and someone suggested header, not working unfortunately e.g.
Content-Type: application/pdf
Content-Disposition: inline; filename.pdf
You can use Google PDF viewer to embed pdf files on to your website. Use this link https://docs.google.com/viewer
Example:
<iframe src="https://docs.google.com/viewer?url={HTTP PATH OF THE PDF FILE}&embedded=true" width="600" height="780" style="border: none;"></iframe>
https://docs.google.com/viewer?url=http://research.google.com/archive/bigtable-osdi06.pdf
Check out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://sample.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
Cheers
Trick Chrome and Firefox (and maybe other browsers) into displaying the PDFs using the Adobe Reader plugin (for full PDF Open Parameters support among other benefits) by using one of the following 'Adobe PDF in XML Format' types in your embed code:
application/vnd.adobe.pdfxml
application/vnd.adobe.x-mars
This works fine as of my answer today and I'm hopeful it will continue to work fine. I'm using it currently with standard PDF files as a workaround for embedding PDF files in the browser that need to use the Adobe PDF plugin rather than the browser's built-in PDF rendering. Even though my PDF files are standard (non-XML) files, they appear to load just fine with this new application type parameter.
<OBJECT data="YourFile.pdf" TYPE="application/vnd.adobe.pdfxml" TITLE="SamplePdf"
WIDTH=200 HEIGHT=100>
shree
</object>
I'm using Extjs along with PHP (no framework) in one of my projects. I've a requirement to play video on the same panel/tab without opening a new one. I can download videos by clicking on the download button or clicking on the link to video, present on the panel. But I need to play the video on the same page without affecting it's quality. (Generally using .mp4 videos).
I've not found any helpful method/feature with Extjs so far.
I set up a website with ExtJS 4.2 and included several mp4 videos. It is pretty easy. If you want to place the video into a window, here is some code that might help you.
window = Ext.widget('window',{
x:5,
y:5,
renderTo: Ext.getBody(),
width: 410,
height: 265,
html: '<video width="400" controls><source src="test.mp4" type="video/mp4"><source src="test.ogg" type="video/ogg"></video>'
}).show();
You should use some html5\flash video player (for example flowplayer), then render player (read player docs how to do this) to specific html element.
container.add({
xtype: "panel",
html: '<div id="place-for-video"></div>',
listeners: {
show: function() {
// Create your player instance and render him to html element with id "place-for-video"
}
}
});
//
I have created a page in which I am showing A websites Page (situated some where on web );
I used iframe but puzzled with the height issues I solved width issues for 950px only with css3 but my need is full height as target website but that is not working with cross domain pages (I've done with same domain successfully).
Now I want to do it either with PHP using get_file_content() or some other putting it into div , iframe or in frames whatever works (and also pages must be accessible as it is from main sites)
The container will change its content with hyper link click.
Please help me to resolve the issues.
I've tried many more methods including jquery, js, php, css and blah blah blah with no success.
before commenting or answering please visit THIS LINK
I need some thing like this
Please check this and alter here
To See My page Click here
Note:
I have no access of target site so I can't put attributes on target
page and get back to iframe page.
I have 100+ pages to show so no
specific method can be used i need any generalized technology.
One more thing i don't want scrolling in my page.
Efforts done :
Ajax/Jquery
PHP Resize
In the "iframe'd" html, have:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
and in the page that iframes:
<script type="text/javascript">
function resize_iframe(new_height) {
document.getElementById('iframed').style.height = parseInt(new_height, 10) + 60 + 'px';
}
</script>
I used 60px to fix potential padding etc.
Note that they have to be under the same domain for this to work, otherwise you might have to run:
<script type="text/javascript">
document.domain = "domain.com";
</script>
On either or both. This is required so that the browser may interact between them.
Do something like this:
<frameset rows="*">
<frame frameborder=0 src="http://www.discountautoparts.com/" scrolling="auto" noresize>
</frameset>
If you do that it should look like this picture
I make a simple html page and set it on facebook fan page tab but the tab which shows on fan page is shows a scroll bar buti already set to auto resize and the height of this html page is large i want to hide the scroll bar and show the complete page
The best solution I found, which works for me is:
You need to setup the Facebook app canvas settings, Canvas height to Fluid.

Then, add some javascript in the page header:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoResize();
</script>
Finally, force our body and html tag to avoid scroll bars in css.
body, html {
overflow:hidden;
}
This has worked for me to remove all the scroll bars. It's working on the 18th of October 2011, but because Facebook keep changing their code, it may change in the future.
A full article about Facebook iframe is available on my blog: http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/
Thanks to all of you.
Here is the answer of my question; I posted it here so that if any body find this question in future will also get the answer and his/her time is not wasted. I get the solution by adding the following code just before the </body> tag of my index page
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Once again, thanks to all.
This solution works for me
http://aarosant.com/2011/03/14/adjust-the-size-of-facebook-iframe-tabs/
GO TO the App Setting -> Advanced setting -> canvas page there you can change width and height to fixed from fluid