iframe: removing internal (grey) border - html

I want to embed a pdf-document on my website, but cannot manage to display the document in the iframe without an overwhelmingly useless gray border.
Now I see that this gray border is not always displayed when embedding a pdf-document, but in my example as you can see in the picture, there is a large border withing the iframe, next to the pdf-page I actually would like to display.
See here what I am talking about:
I am using a simple iframe-tag within a div-tag.
Does anybody know if it is possible to remove the grey border ("Border in iframe") or how I can deal with this problem?

The border you see is when the page is not matching the aspect-ratio of the view-port of the Acrobat plugin.
You need to make sure the iFrame and the plugin and the document inside it are all the same width and that the user has not set the page to be shown in some other way such as full height (set in Acrobat Reader preferences)
For now try adding this to the PDF url:
#view=Fit&toolbar=0&statusbar=0&messages=0&navpanes=0&scrollbar=0

Related

How to insert a pdf file as an image in HTML?

<img src="img.pdf"> doesn't work due to it being a pdf. I don't like the embed and iframe environments either, since they add the pdf viewer options, the scroll etc. I tried converting the pdf to an image with the convert and pdftoppm commands on Linux, but these result in the image having extra white space on top and bottom to fit A4 format, and/or makes the background black (instead of white or transparent).
Any ideas?
"Img" is in effect an iFrame of an embedded binary object, but it is borderless since it is statically scaled to one non zoomable size. Note the img above this text is framed as https://i.stack.imgur.com/xpw2l.png
Yes there are ways to make it more dynamic but vanilla binary PNG/JPG/ETC are imbedded, and part of the binary HTML viewer renders those fixed areas. You can switch them off if you wish, or they don't display if badly served.
So why is PDF not simply treated like an image as per your question?
The answer is simple they are a different type of binary that requires a different html viewing binary extension. One frequent complaint is why use "menus and scrollbars if not needed for a simple file?"
The answer to that is those controls need to be in the extension, for zoom pan etc. So how comes the FireFox viewer above has none?, that's because as a user I switched them OFF.

Can't find an element in the Web Inspector

There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg

Background image load fast onload without white background

I have to change background image on page load as I use onload on body or i have to use window.onload which one would be faster to be background image load without showing white background as page load. and where I have to put it on head or body after tag so it can shows as site opens without showing white background
$('body').onload('background-image', 'url(http://picture.de/image.png)');
Keep in mind that once an image has been loaded in the browser, it will be in the browser cache and will load much faster the next time it is used as long as the image hasn't expire from the browser cache.
For your problem, there are two things you try.
1) Try to preload images with javascript:
function preloadImage(url) {
var img=new Image();
img.src=url;
}
2) Optimise your images. Use a tool like tinypng in order to compress your images. Most of the times you will save up to 60%. If you have a container that you want the image to fit in, try to resize the images into the width and height of that container (use width and height).
Can you please check the below example.
http://jsbin.com/pozadujeca/edit?js,console,output
and using CSS you can apply the background color to the image load or show loader at background.
I hope it will help you
Thank you
I wouldn't take the js route, instead I would just save the image as a progressive jpg: https://optimus.io/support/progressive-jpeg/
first you can understand the flow of js engine .how it works .you can put in head if you want to load it when js is loaded .if you want to display background image then you must put into html .because html loaded before js in browser

How do you auto fit an image on a button so that you don't have to stretch the button to show the picture in Access 2010?

I'm building an access database for my music catalog. I've created one main table with a bunch of queries. I want to make a decent looking front end. I have a bunch of buttons with macros assigned to them already. The problem (which I presume is something very small that I'm missing) is that I added a picture to the button it's just a picture of vinyls that would run a query to show my vinyls. The picture only displays a portion rather than the whole picture. I can get it to show the picture by expanding the button size but this is not desired.
Any help is appreciated.
Thank you and Happy Thanksgiving.
The button doesn't resize the image you assign to it.
You first need to resize your picture files to whatever size you deem suitable for the button, then use that scaled down image.
Alternatively, you can use the Image control instead of a button. That control will allow you to resize the image inside it, but it will generally appear slightly blurry, depending on the image and the dimensions you resize it to.
Also, forcing Access to load larger image and then resize them can make your application less responsive if you have a lot of images, since you make it do extra work.
A workaround is to work with an image and a button.
Insert and size the image you need in the form
Add a button, setting its property "transparent" to true
Overlay the transparent buton over the image
Make sure the button is on the topmost layer usuing the "bring forward" in the image menu. We have then the transparent button over the picture
Associate VBA code or macro to transparent button.
For all intent and purposes, user will click on an image, but because there is a transparent button over it, will be in fact clicking on the button

PDF in Iframe is overlapped other element

I have a screen where I need to show pdf/html .So I am making use of an iframe content to show the PDF or HTML in it.and whenever needed i need to show a popup on top masking the whole screen. This is working cool in all the places.
Problem is , only in Internet Explorer, if PDF is there in iframe content, the masking is not coming on top of the pdf, instead pdf overlaps the masking , popups,dropdowns.
Please let us know how to solve this.
Thanks in Advance.
So, I solve the problem. What you have to do is make iframe visibility hidden when you want to show masking on the page.