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;
}
Related
I'm working on CSS and web development,but just face a something which i really don't understand it:
.header{
position: absolute;
width:60%;
top: 20%;
left: 50%;
transform: translateX(-50%);<------ executed after animation
text-align: center;
animation: moveUp 2s;
animation-fill-mode: backwards;
}
#keyframes moveUp{
0%{
opacity: 0;
transform:translateY(2rem);
}
100%{
opacity: 1;
transform: translateY(0rem);
}
}
so my problem here is the indicated line doesn't apply on ".header" until the animation gets applied in other word it applies animation first then translate -50% ,is there a priority of execution here or it is different thing?
Usually the styles are parsed from top to bottom, however this isn't the issue here.
What is happening in your case is the transform is being applied initially, but then it is being overridden by the animation. Once the animation is over, the element is reverting back to its default style which has the transform.
Essentially, even though the transform is applied at first, you don't see it until the element reverts to it after the end of the animation.
The only solution if you want to have the transform during the animation, is to include it in the animation itself.
#keyframes moveUp {
0 % {
opacity: 0;
transform: translate(-50%, 2rem);
}
100 % {
opacity: 1;
transform: translate(-50%, 0);
}
}
EDIT: To clarify, the order at which the styles are applied does not matter. Whether the animation or the transform is applied first, the result will be the same.
I think a source of your confusion is that the first transform is a translateX while the animation only does translateY. In both cases what is changing is the value of the transform property of the element. Therefore which axis the translation is on doesn't matter. First you set transform: translateX(-50%), but then once the animation kicks in, transform becomes translateY(2rem). The translateX part is removed from the transform, unless you include it in the animation like I have shown.
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
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/.
I know you're thinking that this is a strange request, however I am currently dealing with a client that gave me a template and decided he wanted it 70% smaller after seeing it in a browser and all the HTML done (!!!!). Thus throwing all the work that was done for both of us out the window. If I could adjust the scale to 0.7 (70%) that would be perfect and the project can still roll out the way it was going. Thank you!
body {
zoom: 0.7;
transform: scale(0.7);
transform-origin:0 0;
-ms-transform: scale(0.7);
-ms-transform-origin:0 0;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
-o-transform: scale(0.7);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.7);
-webkit-transform-origin: 0 0;
}
You might be able to use the CSS Zoom property but negativly? - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).
Firefox is the only major browser that does not support Zoom (Check here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
So you could use:
div.zoomed { zoom: 70%; -moz-transform: scale(.7); }