I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
Related
I have a question and I don't have a server with cloudflare in order to test this, hope someone could help me.
I have an html page with a jQuery logic for example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</head>
<body>
<p id="demo"></p>
<script src="timer.js"></script>
</body>
</html>
timer.js
// A $( document ).ready() block.
$( document ).ready(function() {
myFunction();
});
function myFunction() {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
$('#demo').html(time);
}
as we know Cloudflare caches JS and HTML content but my jQuery is a timer that will show the time each time I send a response.
What would happen with CloudFlare if I had Cache-Control: public, max-age=31536000 and Cloudflare caches everything.
is my jQuery logic going to work? or is the timer going to stop working ?
I am using a timer in this example but my real jQuery logic what it does is to hide some DIV content randomly, I have a website where I have like 5 rows this rows are always there but with jQuery I remove ($target.remove()) some of them randomly and the others I just shuffle them.
but I'd like to know if my logic will still working ? or my jQuery will continue as normal?
CloudFlare doesn't execute your JavaScript, it just caches it. If your script modifies the DOM in a user's browser, CloudFlare won't cache that.
I am using PhantomJS to do some rewriting of HTML. I'm adding a background-image property to an element. But when I write out the resulting DOM, the URL has been rewritten to a local URL. I've boiled this down to the following test case:
JS
var page = require('webpage').create();
page.open("test.html",function(){
setTimeout(function(){
page.evaluate(function(){
document.getElementById("test").style.backgroundImage="url(test.png)";
});
console.log(page.content);
phantom.exit();
},1000);
});
HTML
<html>
<body>
<div id="test"></div>
</body>
</html>
Output
$ phantomjs test.js
<html><head></head><body>
<div id="test" style="background-image: url(file:///C:/cygwin/tmp/test.png); ">
</div>
</body></html>
UPDATE
The problem remains if you specify ./test.png or //test.png. However, http://example.com/test.png is left unchanged, as might be expected.
If this HTML document is opened in Chrome, and the background-image property added to the div element in the style inspector, the URL is unmodified, whether the document is inspected in the Elements tab in devtools, or via document.body.innerHTML displayed in the console, or copying the HTML.
UPDATE 2
I just found out that if the document is located in Chrome, and the command elt.style.backgroundImage="url(test.png"); is issued in the console, then the URL is rewritten. So at the end of the day it appears that this is not a PhantomJS issue, although I still don't understand this behavior.
Obviously, I don't want this URL to be rewritten in this fashion, and I don't understand why PhantomJS feels the need to do this. Ideas?
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I'm defining page with some vars and methods. Then I wanna use it in html markup (for example data-win-bind="textContent: myPage.variable). How can I access page variables in html markup?
In the JavaScript code behind your page, say default.js, you'd include your ViewModel for the data binding, something like:
(function(){
WinJS.Namespace.define("MyModel.myPage", {
variable : null
};
MyModel.myPage.variable = 'foo';
})();
Then in when the page is activated (in default.js), you'll need to initialize the bindings with a call like
WinJS.Binding.processAll(document.body, MyModel);
There's quite a bit more functionality available though, so this is just a simplistic one-way binding case that should get you started. For more info, check out the Quickstart: binding data and styles.
You have to use javascript here's the skeleton:
<html>
<head>
<script type="text/javascript">
//Code goes here
</script>
</head>
<body>
</body>
<html>