In Firefox, when loading an image into an iframe, the image will automatically be scaled down to fit (if it's too big). (This is a Firefox feature that can be disabled via the Firefox setting browser.enable_automatic_image_resizing.)
I'd like to set up my pages so that they have the same behavior when viewed with other browsers such as Chrome and Internet Explorer.
Here's an example, take a look at it with Chrome or IE and compare it with Firefox: http://codepen.io/anon/pen/KddKQX
Here's the code:
<iframe frameborder='0' scrolling='no' src='http://ibin.co/2F6DxpSecv9h' height='600px' width='400px'>
</iframe>
Okay so the following code pen should be a good jumping off point:
http://codepen.io/anon/pen/OyRgmw
I am running short on time, otherwise, I would perfect the scaling/sizing.
Anyways, as you can see, I wrapped the iframe in a div:
<div class="wrap">
This version works on FF 26, Chrome 32, Opera 18, and IE 9-11.
<iframe class="frame" src="http://ibin.co/2F6DxpSecv9h"></iframe>
</div>
Then you set the div to the desired width and height - once you have this, you set your iframe to "Transform: scale" which will shrink the iframe, which is why you need to set the Width and Height to a multiple of the Scale. For example, you set the Width and the Height to 400px by 600px - since the image is being scaled(.25), you are going to want to multiply your frame dimensions by 4 - the following CSS will achieve the desired effect:
.wrap {
width: 400px;
height: 600px;
padding: 0;
overflow: hidden;
}
.frame {
width: 1200px;
height: 1800px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
So like I said, it isn't 100% complete but you should be able to tweak the numbers to achieve what you want. Let me know if you need any clarification or further information.
Here is the codepen link again: http://codepen.io/anon/pen/OyRgmw
Related
How can I scale the content of a fullscreen iframe without changing the size of the actual iframe?
This is my current attempt at trying to scale the content, but it ends up canceling out the 100% width and height:
<style>
#frame {
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;
}
</style>
<iframe src="../index.php" id="frame">
Your browser doesn't support iframes
</iframe>
Is there a way to do this in either javascript or css while keeping the height and width at 100%?
As far as I know, you have no control whatsoever on what is suppose to happen in the iframe unless you put some javascript listeners in your main page and the source of your iframe. Its not an easy task.
I found a solution by compensating for the loss from scale in the height and width:
If scale is 75% just set height & width to 133.34%.
I have an issue when I change the size of the frame frame gets bigger but not the content. I need to fit the content inside the Iframe to the frame.
My css is:
#IDNAME {
-moz-transform: scale(0.90, 0.90);
-moz-transform-origin:
top left;
}
You need to explicitly define the width and height of the iframe in order for it to scale the content. Also see this.
#IDNAME {
-moz-transform: scale(0.90, 0.90);
-moz-transform-origin:
top left;
width: 1024px;
height: 576px;
}
I need to zoom in with Javascript(jQuery),
For example, Ctrl + scrolling mouse.
I tried
document.body.style.zoom
but, it's not working in Firefox.
I don't know what kind of zoom do you exactly want to achieve, but maybe you should try to use transform: scale(X); with transform-origin: 0 0; and max-width set to a proportional value i.e.:
body {
max-width: 50%;
transform: scale(2);
transform-origin: 0 0;
}
My application looks better when browser zoomed to 75% in IE 9.
When resolution is 1024x768 .
Can i make the IE 9 browser to zoom to 75%.
I tried with media queries.
#media (min-width : 980px) and (max-width: 1199px) {
.zoo {
transform: scale(0.75);
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-ms-transform: scale(0.75);
-ms-transform-origin: 0 0;
}
}
Added this css class to body.But it dosen't work
So you want to apply manual browser zooming using CSS and/or JS?
This is really not possible with CSS and/or JQuery. Manual browser
zoom and CSS zoom property both work differently and will produce
different results.
Alternative: On page load provide users with a modal window
instructing them how to manually Zoom in/out, close it after they have
zoomed successfully.
Source:
https://stackoverflow.com/a/30152402/2534513
Changing the browser zoom level
I'm looking to achieve an effect as seen on the metalabs site's image changer/slider:
http://metalabdesign.com/
I got it working, but the catch is that I'm not using images, I'm scaling a div with content inside it. Dynamic content that's subject to change. Is there a way I can just blow up the whole div and its contents, because manually scaling each element inside the div is a huge hassle.
I'm currently scaling a div with a jQuery animation:
Starting css:
#tagBox {
display: none;
width: 1280px;
height: 1000px;
position: absolute !important;
left: 50% !important;
margin-left: -640px;
top: 50% !important;
margin-top: -500px;
opacity: 0;
}
The jQuery that changes it.
$('#tagBox').show().animate({
opacity: 1,
width: 700,
height: 500,
marginLeft: '+=275px',
marginTop: '+=250px'
}
But that only animated the div. The div's contents stay fixed in the upper right corner. I'm looking for a way to imitate the animation, but just scale the div as a whole, all elements together, preferably in normal javascript.
Thanks!
you can use css3 transformations.
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
Check It - http://jsfiddle.net/6gJka/2/.