I have a PDF file embed inside my web page. My HTML is:
<embed src="http://znaci.net/zb/4_1_19.pdf">
My CSS is:
embed {
width:500px;
height:600px;
}
Now I have a situation like this:
But I need this:
Is there a way to center embed PDF content?
You can control the height and width via CSS like such:
<style>
embed {
width: 100%;
height: 500px;
}
</style>
You also control it via attributes in the embed tag like such:
<embed src="http://znaci.net/zb/4_1_19.pdf" width="640" height="480">
As for the zoom, you can achieve this by doing the following (note the #zoom=75):
<embed src="http://znaci.net/zb/4_1_19.pdf#zoom=75">
This syntax worked in IE11 and FF32, but not in Chrome 38.
Edit: Answer to the centering part of the question:
Centering the PDF only fails in Chrome. A work around for this can be to replace the embed tag with an iFrame like such (though I don't think this is the best practice).
<iframe src="http://znaci.net/zb/4_1_19.pdf"></iframe>
Alternatively, you can look at some thing like pdf.js.
Related
I have a flash-based video player that is embedded in a html-table based layout. The expected behaviour is that the video player resizes automatically, depending on the size of the browser window. This works well in many tested browsers (Firefox, Chrome, Safari, Internet Explorer up to 8).
In IE 9 and 10, tested on Windows 7 and 8.1, resizing works well in the x-axis, and enlarging works well in the y-axis. However, when the user shrinks the window size vertically, the flash player size stays the same and IE "helpfully" adds a vertical scrollbar to the window, instead of adapting the size to fill the smaller space.
The smallest possible HTML code that I came up with to demonstrate this behaviour is:
<html>
<head>
<title>simplest testcase</title>
</head>
<body>
<table style="width: 100%; height: 100%;"><tr><td>
<object type="application/x-shockwave-flash"
style="width: 100%; height: 100%;" data="jwplayer.flash.swf"></object>
</td></tr></table>
</body>
</html>
Note that it does not depend on jwplayer, I was able to reproduce the problem with any .swf I tried. Also note that jwplayer rightfully displays an error message for missing configuration - this is not the problem, it's just about the resizing of the flash object in the HTML page. Also note that IE 8 and below do not understand the <object type="application/x-shockwave-flash"> method of embedding - again, this is not the problem here; a more complex page that uses the appropriate embedding method displays the same problem.
This example html page can be accessed at http://guardian.werft22.net/public/test-ie.html
When I replace the <object> with an <img> resizing works as expected, suggesting the problem is not entirely within IE's size-determining-engine.
Removing the table around the Flash object makes it work correctly as well. However, the original embedded video player is a quite complex table-based layout beast, and I'd like to avoid having to re-engineer it.
When I add
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
into the HTML header to force IE to downgrade to a different rendering method, it works correctly.
So, now my questions: Has anybody ever experienced something like this? If so, is there a more elegant workaround?
Does anybody has any ideas on whom (and how) to report this bug to? Microsoft or Adobe?
Thank you very much in advance!
I had a similar problem embedding a Silverlight component in an object tag.
The solution was to add style="position: absolute;" on the object tag and style="position: relative" on the td tag. The last (relative) tag is important if you have elements that are supposed to be placed above the embedded element, or else you may see that the elements are placed on top of each other.
Seems to be a bug? when using default positioning.
<html>
<head>
<title>simplest testcase</title>
</head>
<body>
<table style="width: 100%; height: 100%; position:relative"><tr><td>
<object type="application/x-shockwave-flash"
style="width: 100%; height: 100%; position=absolute;" data="jwplayer.flash.swf"></object>
</td></tr></table>
</body>
</html>
I am creating an web-application using node-webkit, which bases on googles chrome browser.
When embedding a pdf file on a site, using the embed tag, ich get a white line on the top of the embeded part (picture attached). My first thought was, that it is a kind of border, but setting border = 0 dont resolves the problem.
My suggestion is, that this white line is part of the background of the embed part and adobes pdf plugin doesnt covers the whole embed area.
Edit
If my suggestion is true, then it would already help me if i could switch the background of the embed area to an other color. But setting background-color doesnt works too.
Margin and padding has to be set to 0 on the html/body.
If you add:
body {
margin:0;
padding:0;
}
That should sort your problem out.
try to use <iframe></iframe> tag. set the source of your file in src atribute. you can set the height or width of iframe tag as you set your embed tag.
example : <iframe src="http://example.example/file.pdf" width="500" height="400"></iframe>
or you can set the application to open the file you attached to your website
might it help! :D
I use zurb-foundation to maintain the layout of my website. The home page of that website is rendreded perfectly in Opera 12.14 beside some other pages. However, some pages such as this page has extra blank space on the right on Opera only. I tried to inspect element in the blank extra space, it mentioned to the html tag?!! I copied the html source into my editor (netbeans) to see if there some missing ending tags, but I did not find any of them. My website is rtl. What should cause this issue?
I got the cause of this layout problem in Opera. It is due to soundmanager2. In Opera only it generates a div tag just before the closing body tag as follows:
<div id="sm2-container" class="movieContainer sm2_debug" style="position: absolute; width: 6px; height: 6px; top: -9999px; left: 9999px;">
<embed name="sm2movie" id="sm2movie" src="/quran/themed/slate/js/swf/soundmanager2_flash9_debug.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" haspriority="true">
</div>
Since I don't know how to make Soundmanager2 to stop generating this div, I decided to solve it using CSS as the following:
#sm2-container .movieContainer .sm2_debug{
display: none;
}
However, the above CSS solution fixed the layout issue, but it causes the Soundmanager stop working on Opera! Till this point, I regard this is an answer for my question about the layout.
The Final Solurtion:
from this answer on the official SM2 forum. I have to make a div with an id sm2_container and style it as follows then place it anywhere I want in the source:
<div id="sm2-container" style="width:1px; height:1px; visibility: hidden" class="movieContainer sm2_debug" >
</div>
The real useful style is visibilty hidden because it is just an swf square with white background and I want to hide it.
I'm using gigya service for video embed...
If some one paste the following code in his wordpress page or post then horizontal and vertical scrollbar is displaying only in IE browsers....Working fine in Firefox and Chrome..
Here is the code:-
[gigya src="http://s.asstatic.com/player.swf" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=1615781_634907097231053940"]
Please help me what should i put in the above code to remove the scrollbar displaying in IE only...
and here is the links.. please open it in IE8 or IE7...
http://gauravishere.wordpress.com/2012/12/27/test/
Thanks...
position:absolute' works for me...
[gigya src="..." style="position:absolute" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=99..."]
try to fix this type of issue by:
Use html5 doctype if possible:
Set 100% on all parent containers:
*, html, body { height: 100%; width:100%; margin:0; padding:0; }
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}