EDIT: I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'
I try to display a pdf in a div that is exactly a half of my screen.
I don't want to have to scroll to see the single A4 pdf page.
When I resize the screen I also wan't the pdf to get bigger/smaller.
The problem is that the embeded pdf is not resizing itself and it is scrollable.
CSS:
split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left {
left: 0;
background-color: blue;
}
embed#pdf {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
HTML:
<div class="split left">
<embed id="pdf" src="my_pdf.pdf" type='application/pdf'>
</div>
I have tried to use the tag, but I get the same result.
Thank you for your help!
I solved it: it was in the settings of the pdf that I needed to change the mode to 'Page Fit'
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
I have to display a full-screen modal containing an iframe with a form with input text fields. I already got the iframe to display and scroll correctly.
However, when I start typing on the input fields, the whole iframe scrolls all the way to the bottom, so you can't see what you're typing on the fields. It only scrolls when you start typing, not on focus.
This occurs on iOS Safari or Chrome and not on Android devices. Also note that the issue doesn't occur if I scroll to the bottom a bit, so that the input field is at around the vertical center of the screen (i.e. upper half of the screen), before tapping and typing on the field.
<body>
<!-- some contents -->
<div class="wrapper">
<iframe src="http://iframe.com" />
</div>
</body>
body {
position: fixed; // I only set this to fixed via JS when modal pops-up
}
.wrapper {
-webkit-overflow-scrolling: touch;
position: fixed;
overflow-y: scroll;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
iframe {
width: 100%;
height: 100%;
z-index: 99999;
}
Any help and pointers is appreciated. Thanks!
Fixed it by setting the wrapper to position: absolute instead of fixed, and setting the following CSS to html and body.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
Wrapper CSS now looks like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I have a iframe and I want to create another div as an overlay over this iframe for some time. Therefore, the size of that new overlay div and iframe should be same in every condition. The size of iframe may change for many reasons like browser window resizing, moving the splitter etc. I tried to use the onResize function from jQuery but it doesn't seem to work except for browser window resize. Could someone please suggest a way to handle all the cases?
Thanks in advance.
Give them both a parent div with a certain width. Then maximum the content of the div for the overlay and iframe
.container {
width: 750px;
height: 400px;
position: relative;
}
.overlay, iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.overlay {
z-index: 3;
background: #0cc;
opacity: .7;
}
iframe {
z-index: 2;
}
<div class="container">
<div class="overlay"></div>
<iframe src="http://wikipedia.com"></iframe>
</div>
I have incorporated a cytoscape graph into a div which has an initial status of {display:none}.
When the div is shown ($('div#id').show()), the graph is not displayed unless the user resizes the browser window.
I looked into the css with the js console, and realized the initial css of the canvas is such that : width: 0px; height: 0px.
It is only when the browser window is resized that the canvas inherits #cy's width and height:
Initial CSS status :
<div id="cy">
<div style="position: absolute; z-index: 0; overflow: hidden; width: 0px; height: 0px;">**<canvas data-id="layer0-selectbox" width="0" height="0" style="position: absolute; z-index: 5; width: 0px; height: 0px;"></canvas>...
CSS status when browser window is resized:
<div id="cy"><div style="position: absolute; z-index: 0; overflow: hidden; width: 560px; height: 420px;"><canvas data-id="layer0-selectbox" width="560" height="420" style="position: absolute; z-index: 5; **width: 560px; height: 420px;"**>...
Any idea why this happens? Could you help me to fix this?
It is unfortunate that given how the DOM works, you can not (solely) use display: none in this case.
display: none messes with dimensions detection, and so you will need to either
(1) use another CSS property like visibility: hidden or offpage absolute positioning, or
(2) call cy.resize() explicitly upon showing the graph.
I have a to slow fadeIn effect when I tring to show simple popup by clicking on button. Without video all of it works fine.
Video on my page have a 100% size and fixed position
video#bgvid{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Also, there is a popup html code
<div class="blackpopup">
<div class="container">
</div>
</div>
And css:
.blackpopup{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.58);
}
Javascript code is simple:
var popUpThank = jQuery(".blackpopup");
var submitButton = jQuery("#submit");
submitButton.click(function(e){
e.preventDefault();
popUpThank.fadeIn();
});
So, how to make it not so slow and where is the problem?
The answer is: not saturating the browser's memory with a hell of a heavy video.
Try doing the same removing the video tag it will work.
Compress it better, or with low quality as it's a background object.
I can point you to sorenson squeeze app for that.