How to zoom on the center of an image? - javascript

I want to know how to zoom on the center of an image.
I tried different things like imageWrapper.width().left
$(document).on('click', '.process-diagram-zoom-in', function(){
var div = $(this).parents('.container-fluid:first');
var imageWrapper = div.find('.image-wrapper');
imageWrapper.width(imageWrapper.width() * 5.1);
});

Apparently, you already know how to magnify the image, so what you need to do is make sure it's centered inside a container.
This can be done with simple CSS.
For the container:
position: relative;
And for the image:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Related

Rsponsive overlapping image with css/js

I have a image in a fullwidth div which is overlapping the div, so when the browser gets resized more of the image is shown/hidden but the image itself does not get resized. i got it working for the width but how can i achieve the same effect for the height?
Here is my test:
https://jsfiddle.net/g8h8umt3/
i got the width working with css:
#img-header{
margin-left: 50%;
transform: translateX(-50%);
}
EDIT:
Here is a image on how it suppose to work:
Image
The image in the background should keep its size and the parent div should get smaller/larger depending on the screen size. I got the behaviour for the width but i dont know how to do it for the height of the image.
I also tried adding
#img-header{
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%,-50%);
}
but this does not seem to work
If you want the image to keep it's size and the to be hidden on all corners as the parent size changes, use absolute positioning for the image, and a combination of left: 50%; top: 50%; transform: translate(-50%,-50%) to put the image in the center of the parent, and the parent will scale on all sides of the image.
$(document).ready(function () {
$('#img-header-container').height($( window ).width()/3);
$( window ).resize(function() {
onResized();
});
});
function onResized(){
$('#img-header-container').height($( window ).width()/3);
}
#img-header-container{
width: 100%;
overflow: hidden;
position: relative;
}
#img-header{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
<img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/>
</div>
<div style="min-height:50px">Conent After</div>
And for what it's worth, you don't have to use jquery to make the container 1/3rd of the window height. You can use viewport units (vh) with calc() for that.
#img-header-container {
height: calc(100vh / 3);
overflow: hidden;
position: relative;
}
#img-header {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
<img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header" />
</div>
<div style="min-height:50px">Conent After</div>
And FWIW v2.0, you could do this with a background image, then the img won't block the page load and it's less markup/css.
#img-header-container {
height: calc(100vh / 3);
background: url('https://clsimplex.com/images/releases/headers/quality-code.jpg') center center no-repeat;
}
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
</div>
<div style="min-height:50px">Conent After</div>
I do not know if I understood what you want to do
I give you an example of what I understood
#img-header-container{
width: 100%;
}
#img-header{
max-width:100%;
}
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
<img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/>
</div>
<div style="min-height:50px">Conent After</div>

Make an element “Land” in position when page loads

When my page loads I want to make my logo fade in and move like 20-30px from down to up at the same time. I have this code to make it fade in, and is working perfect:
$(document).ready(function() {
$('#logo').fadeIn(2000);
});
#logo {
width: 80%;
max-width: 650px;
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<img id="logo" src="assets/img/mainlogo.png" style="display: none" />
But I could really use some help to make it move. I read a lot about make JavaScript to add a new class or Id to the element so that class have a different padding top or margin top but I can't make it work.
Thanks in advance.
Try adding
("#logo").css("padding-top", "15px");
to your "document ready" function.
Source: http://www.w3schools.com/jquery/jquery_css.asp

How to center a scrollable image that is larger than the screen

I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.

How to display a gif in the middle of a div page in jQuery?

I have a div, which acts as a page, and it only has a gif. Though the gif appears at the upper left corner of the page. I want to make it appear in the middle of the page. Below you can find my HTML and CSS that I tried, but it doesn't seem to be working.
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/correct.gif">
</div>
.correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}
Assuming that your div is the size of the page and has position:relative then
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
display:block;
}
will get you most of the way.
However, what it does is put the top/left corner of the image at the 50% position and so it is not exactly centered.
If you know the size of the image you can adjust it with negative margins like so
margin-top: - [Insert 50% of image height] px;
margin-left: - [Insert 50% of image width] px;
So, for instance
margin-top: -100px;
margin-left: -100px;
for a 200x200 image.
If you do NOT know the size of the image (perhaps you'll be changing it often) then you can dispense with the negative margins and just use.
transform: translate(-50%, -50%);
This adjusts the final position of the image based on its OWN dimensions regardless of what they might be.
You are using class selector instead of id selector in css.
You can change that to id selector as:
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}
Alternatively, you can apply a styling to div to display as table and center it then:
<div style="display:table-cell; vertical-align:middle; text-align:center" data-role="page" data-add-back-btn="false">
<img src="images/correct.gif">
</div>
wrong css selector
#correctGIF > img {
position: absolute;
left: 50%;
top: 50%;
}

How do I positioning a div based upon percentages with CSS

I'm looking for help with positioning an object along X, and Y coordinates based upon percentage in order to allow it to move on top of everything when you scroll around the page. The numbers are working, but the CSS seems to be confused, so all I need is alignment help.
Currently I have:
document.getElementById('block').style.display="style='position: absolute; left: place%; top: place%; transform: translate(place%, place%);'";
Example: office applications moving tool bars around when they snap off the toolbar holder, and sit there
The fiddle is: http://jsfiddle.net/JFqus/
You are attempting to set multiple values in one line, this isn't possible.
document.getElementById('block').style.position = "absolute";
document.getElementById('block').style.left = document.getElementById('block').style.top = "50%";
document.getElementById('block').style.transform = "translate(50%, 50%)";
http://jsfiddle.net/JFqus/2/
If you just want the styles to be applied all the time, you can add it right into the div's style attribute:
<div id="block" style="background-color:#000000;height:100px;width:100px;position: absolute; left: 50%; top: 50%; transform: translate(50%, 50%);"></div>
http://jsfiddle.net/ZazmC/
But this is ugly, you should separate styles from markup:
#block {
background-color: #000000;
height: 100px;
width: 100px;
position: absolute;
left: 50%; top: 50%;
transform: translate(50%, 50%);
}
http://jsfiddle.net/ZazmC/1/
Also, I think you want position: fixed, not absolute.
use element.style.cssText, for example:
document.getElementById('block').style.cssText = 'position: absolute; /* ... */';
works in all browsers you likely care about: http://www.quirksmode.org/dom/w3c_css.html#t30

Resources