I have an iframe with some content.
When i zoom out the content in the iframe does not zoom with the page, it stays the same size therefor causing scroll bars to appear, giving away the fact that its an iframe.
Is there a way to make the iframe zoom with the page?
Thanks
You have not given details on your lines of code or the browser you are working on, but ,
here's what you can try to achieve your goal.
<style>
#frameScale { width: 1390px; height: 2940px; padding: 0; position:relative; left:-90px; top:0px; overflow: hidden; }
#frame { width: 1390px; height: 2940px; position:relative; left:-55px; top:0px; }
#frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="frameScale ">
<iframe id="frame" src="Give Some URL Source Here"></iframe>
</div>
Related
I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?
css
body
{
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1, 1);
}
#invite
{
position: fixed;
bottom: 20px;
right: 31px;
text-align: center;
cursor: pointer;
}
The invite element disappears when I scale with 1.
It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.
transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)
relevant Stackoverflow question
and further explanations in the chromium bug tracker
Example 'buggy' behaviour:
div {
margin: 20px;
padding: 20px;
}
.body {
background: olive;
min-height:600px
}
.main {
background: pink;
}
.bottom {
background: orange;
position: fixed;
bottom: 0;
}
.body:hover {
transform: scale(1)
}
<div class='body'>
<div class="main">
main content</div>
<div class="bottom"> bottom content </div>;
</div>
As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.
I have an image spinning on my page using CSS animation transforms. The problem is when I reduce the page width I get a horizontal scroll bar that's constantly changing sizes. How can I keep the spinning image but have the parent container cut off the sides when it starts expanding outside of the page width?
I've tried changing the image to a background-image in the rays div but then I lose the effect completely.
See the below minified example.
#rays-container {
width: 100%;
max-width: 490px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}
#rays {
width: 100%;
height: 100%;
}
#-webkit-keyframes rays {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-ms-keyframes rays {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
.spin {
-webkit-transform-origin: center center;
-webkit-animation: rays 60s infinite linear;
-ms-animation: rays 60s infinite linear;
-ms-transform-origin: center center;
}
<div id="rays-container" class="spin">
<div id="rays">
<img src="https://s-media-cache-ak0.pinimg.com/736x/af/97/ee/af97eef70a8bce541b19c6a41178a015.jpg" style="width: 100%; height: 100%;">
</div>
</div>
CodePen
The scroll bars you're seeing are because the content inside it is larger than its width (that's the obvious part). That being said, one way of fixing it would be to add overflow-x: hidden; to the CSS of the parent of your element with class="spin", which in this case is the <body>.
body {
overflow-x: hidden;
}
Overflow is the CSS property that defines what will happen if the content doesn't fit. The value hidden tells it to simply clip the content, and not display any scroll bars.
For more info, here's the MDN page on CSS overflow.
Try adding padding to the #rays class, like so.
#rays {
padding: 100px;
/* as suggested by Matheus Avellar */
overflow: hidden;
/* width: 100%; */
/* height: 100%; */
}
Code Pen
working on a site and this animation isn't responsive. I've changed the width to 100% and added css. Can anyone help me out? here's the site link..
armani.globerunnerstaging.com
Here's my html and css
<div class="video-container">
<iframesrc="https://content.understand.com/hair-loss-dallas.player?PresentationID=4e9e3cad-0f79-49c0-a204-8193a6a4264b&CatalogID=3fcc6564-3065-4b92-a116-8a692f3572d5" width="100%" height="557" frameborder="0" scrolling="no">
</iframe>
</div>
.video-container {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch;
border: solid black 1px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
First thing, an iFrame can't have a percentage unit for the width attribute :
width="100%" height="557" frameborder="0"
It should be pixels. For example:
width="701" or width="701px"
But your main problem is that player displaying within your iFrame has a container with a fixed width of 701px.
div#container
{
background: #FFF;
margin: 0 auto;
padding: 0;
width: 701px;
height: 557px;
}
This means even if your iFrame has a smaller width than 701px, its content won't shrink below that limit.
Unless you can edit the CSS of the page inside the iFrame, there is no way to change this behaviour.
UPDATE:
Maybe if you try playing around with CSS Scale transform you could make it work for mobile.
.video-container iframe{
-ms-transform-origin: 0 0; /* IE 9 */
-webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
transform-origin: 0 0;
-ms-transform: scale(0.75); /* IE 9 */
-webkit-transform: scale(0.75); /* Safari */
transform: scale(0.75);
}
Make sure you correct the iframe property width:"100%" first.
Here is an example : http://codepen.io/Rubecula/pen/CtKdH
I have an iframe which shows scaled websites but after scaling, a whitespace stays, and its size is the size before scaling. I have tried to wrap it around with different div's as I've found some solutions but it's not working for me, the space is still there.
You can see it here.
HTML
<div id='wrap'>
<div id='preview_div'>
<iframe src="../404/index.php"></iframe>
</div>
</div>
CSS
#preview_div {
position: relative;
width: 700px;
height:600px;
margin:auto;
}
iframe {
background-color:white;
width: 1400px;
height: 960px;
position: relative;
overflow:hidden;
border: none;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#wrap {
width:700px;
height:600px;
margin:auto;
float:left;
}
Any ideas? Thanks.
If you want to get rid of the window scrollbars, you could apply overflow: hidden to #preview_div to hide the extra space.
Inside the iFrame the container the div () has a CSS width of 630px. Also there is a pixel with on the iFrame itself.
The layout I'm trying to achieve is shown in this image:
The HTML below is one of many attempts which haven't worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
I suppose you might want something like this: http://jsfiddle.net/aNscn/3/
bottom: 600px is going to get you nowhere - that's just going to put the elements 600px away from the bottom of the user's screen. Instead, give the outer div a position: relative and let the two elements align to it's bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation.
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}