i have to show one or more pdf-docs in a part of a website. in all browsers my code still works - only chrome does not show the file.
here is the code-snip i use (the css class is a flex-construct only):
<div class="aufinfo_item_pdf" data-id="<%$image->get_id()%>">
<object class="aufinfo_item_pdf_obj" data="/company_images/article/<%$image->get_id()%>" type="application/pdf">
<p>not possible to show - download at: ... link</p>
</object>
</div>
Related
I need to resize pdf object (ie to make control in the lower right corner pulled by mouse)
It doesnt react on my line resize='both'.
What should i write in css?
Heres my code:
<object data='http://aspirant.beget.tech/upload/images/1.Pdf'
type='application/pdf'
width='100%'
height='100%'
resize='both'>
<p>This browser does not support inline PDFs. Please download the PDF to view it: Download PDF</p>
</object>
It is easier if you wrap your object element to div sample answer
I am trying to 'theme' and position the pluging via css.
Here a piece of code:
<!-- vlc-player -->
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="420"
id="vlc"
autoplay="yes"
allowfullscreen="yes"
windowless="yes"
mute="no"
loop="no"
toolbar="no"
bgcolor="#111111"
text="pirate-radio.eu"
branding="false"
target="lollipop.mp4">
</embed>
<!-- vlc-player end -->
Nothing fancy...
With this 'configuration' the player runs fine in FF and has a black background.
(Why, supposed to be #111?)
CSS attributes like 'opacity', 'z-index' and positioning via the "vlc"-id (I use in CSS as well) does what it should do.
However, in Chrome it shows a little bit different results.
First, the background of the player comes transparent, not black.
Second, the position of the player is shifted about 2-3px to the right (where I can life with but it be nice to know why too...)
If I evite CSS-rules both player-backgrounds come black.
Question is, is it the right way to use the forementioned id ("vlc") in CSS for reference?
If I wrap the embed-tag into a box (div) it isn't possible to target the player anymore.
How an I target the player properly to 'ccs it'?
I just messed up with another player I tested before and hadn't given me the results expected.
The correct implementation of a VLC-Player is (like published on several sites) for example as follows:
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="370"
id="vlc"
autoplay="true"
allowfullscreen="false"
windowless="true"
mute="false"
loop="true"
toolbar="false"
bgcolor="#111111"
text=""
branding="false"
controls="false"
target="media/video/TESTCARD.mp4">
</embed>
So far so good?
Greets
Gee
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
On my HTML page, I have <div> with an <iframe>, which references another page, that contains a Flash SWF object. If I set any of these:
display:none;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
on the <div> that wraps the <iframe>, the SWF object sometimes remains in plain sight, while the <div>and <iframe> go out of view as expected.
The weird thing is that it really works sometimes, depending on the SWF object I use.
The expected effect occurs in all the latest browsers on my Mac and all on my Windows 7 machine except for Safari.
EDIT
Here is some example code that illustrates the issue:
<button id="tryit" type="button">Try It</button>
<div id="test">
<iframe src="hideswf-iframe.html" width="770" height="610" frameborder="0"></iframe>
</div>
<script type="text/javascript">
var test = document.getElementById("test"),
tryit = document.getElementById("tryit");
tryit.addEventListener( "click", hideAndSeek, false );
function hideAndSeek(e) {
var style = test.style;
style.opacity = (style.opacity == 1 || style.opacity == "") ? 0 : 1;
}
</script>
and a sample SWF object as the guinea pig:
<object type="application/x-shockwave-flash" id="strobemediaplayback" data="StrobeMediaPlayback.swf" width="743" height="600" style="visibility: visible; ">
<param name="allowFullScreen" value="true">
<param name="wmode" value="direct">
<param name="flashvars" value="favorFlashOverHtml5Video=true&swf=StrobeMediaPlayback.swf&javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&minimumFlashPlayerVersion=10.0.0&expressInstallSwfUrl=expressInstall.swf&autoPlay=false&loop=false&controlBarMode=docked&poster=&src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&useHTML5=false&width=1187&height=959&queryString=favorFlashOverHtml5Video=true&swf=StrobeMediaPlayback.swf&javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&minimumFlashPlayerVersion=10.0.0&expressInstallSwfUrl=expressInstall.swf&autoPlay=false&loop=false&controlBarMode=docked&poster=&src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&useHTML5=false&width=1187&height=959">
</object>
which would exist in a file hideswf-iframe.html.
This should work in the latest versions of Safari, Chrome and Firefox on a Mac and in the latest versions of Chrome, Firefox and Internet Explorer on a Windows 7 machine, and it should fail (no errors but the hiding behavior doesn't occur) in Safari on a Windows 7 machine.
It might be pertinent to note that one thing I've noticed about the SWF objects that have passed and failed are that the ones that have failed all revolve around video content whereas the ones that have passed don't. Granted I haven't tested more than a half-dozen objects, but that's quite a coincidence. :)
have been trying to resolve this issue as well, didn't find any documentation from safari, tried all possible combinations of css and jquery hiding, it doesn't work
for those who are skeptical can, check out http://css-tricks.com/examples/AnythingSlider/ on safari and go through the slides, you'll see the bug in the 3d slide.
if your case is:
<div id="main">
<iframe>
<object.../>
</iframe>
</div>
I suggest you use jQuery("#main").toggle(), which works pretty well in my experience.
simply add this line of JavaScript to your page:
swfobject.switchOffAutoHideShow();
I have my image placed in a folder called images in the netbeans web pages folder and the link to it in my jsp is in a div as shown below:
<div id="image">
<p>
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width=600px
height=300px
/>
</p>
</div><!--end of image div-->
The problem is the image just doesn't load in the browser. What could be the problem? I used the same code in linux and it used to load the image. Could it be a browser problem, I'm using firefox 3.6 which I don't think should have a problem. Please let me know if any one has a clue as to why this is happening. If the problem is my code let me know how to adjust. Thank you
There are no units used in HTML width and height attributes.
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width="600"
height="300"
/>
Without seeing the rendered source of the page, I'd guess that's your problem. If not, try inspecting your image in Firebug and post what its rendered source looks like.
Also, make sure case sensitivity is not in play: gif vs. GIF.