Develop Reference

How to get the lower co-ordinate of images in html

I have a image and it is inside a div. I want to know what would be the lower co-ordinates for the image. Like if it a rectangle with corners A,B,C and D with A as the bottom left corner I want to get the co-ordinates of that. Could you let me know how I could achieve that using JavaScript or jQuery.

You can do this with JQuery position() and return left and top
var pos = $('img').position();
$('.result').append('(x: ' + pos.left + ', y: ' + pos.top + ')');
div {
width: 200px;
height: 200px;
position: relative;
border: 1px solid black;
}
img {
position: absolute;
left: 40px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://placehold.it/50x50">
</div>
<span class="result"></span>

The best solution would be to use getBoundingClientRect()
var image = $( "img" );
var imageBounds = image.get(0).getBoundingClientRect();
var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;
Fiddle
But you could also use jQuery's .position() to get the top and left coordinates then to calculate the bottom and right position just add .height() or .width()
var image = $( "img" );
var imagePosition = image.position();
var imageHeight = image.height();
var imageLeft = imagePosition.left;
var imageBottom = imagePosition.top + imageHeight;
Fiddle
or without using jQuery:
var image = document.getElementById("image");
var imageBounds = image.getBoundingClientRect();
var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;
Fiddle

You can use .position() to get left and top coordinates(top left corner).
to get the bottom left corner just add image height to top coordinate.
$(window).load(function(){ //to make sure all images are loaded
console.log($('img').position().left);
console.log($('img').position().top + $('img').height());
});
div { padding: 30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://placehold.it/350x150"></div>

Here is the demo on codepen: http://codepen.io/ssh33/pen/AXdVER
Waits for the image to download to get the width and height and calls GetCoordinates().
If the image has been previously cached $("#image").load() will never fire. In this case $(window).load() will call GetCoordinates() instead. GetCoordinates() checks for non-numeric width/height and retrieves it if necessary.
Recalculates on window resize.
var img_width, img_height, x, y;
$("#image").load(function() {
img_width = this.width;
img_height = this.height;
});
var GetCoordinates = function(){
if (isNaN(img_width) || isNaN(img_height)){
img_width = $("#image").width();
img_height = $("#image").height();
}
var img_left = $("#image").offset().left;
x = img_width + img_left;
var img_top = $("#image").offset().top;
y = img_height + img_top;
}
$(window).load(function() {
GetCoordinates();
});
$(window).resize(function() {
GetCoordinates();
});

Way to get a bunch of pictures combined (overlayed) in a responsive environment?

I am trying to place three pictures correctly: (TV, Content, Frame). On a static site it is easy. But how do I do it on a dynamic page? I would like fit the complete TV in the window. Is there a CSS-Solution or is it only possible with javascript? In my test-file I have tested some scripts, but without any success. Please have a look here: myTest File
Here my function I played with:
function backgroundResize(){
var windowH = $(window).height(); var windowW = $(window).width();
var aspect_ratio = windowH / windowW;
$('.background').each(function(i){
var path = $(this); // console.log(path);
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// set img values depending on cont
imgH = contH;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
if (path.hasClass("fx-bg")){
path.find('img').css({width:contW*ratio + "px ", height: contH*ratio + "px"});
};
if (path.hasClass("fx-eyes")){
path.find('img').css({ width:imgW*aspect_ratio + "px ", height: imgH*aspect_ratio + "px"});
var t = (windowH-(imgH*aspect_ratio))/2;
var l = (windowW-(imgW*aspect_ratio))/2;
path.css({top: t + "px", left: l + "px"});
console.log("eyes t:%s - l:%s",t,l);
}
if (path.hasClass("test")){
$('main').css('max-width', imgW*aspect_ratio + 'px').css('max-height', imgH*aspect_ratio+'px');
var tt = (windowH-(imgH*aspect_ratio))/2;
var ll = (windowW-(imgW*aspect_ratio))/2;
path.css({top: tt + "px", left: ll + "px"});
console.log("test t:%s - l:%s",tt,ll);
}
});
}

Make sure that all the images have the same parent or parent with exact same dimensions by making there parent position: relative. Then simply give all images this css:
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%); /* for old webkit browsers. */
transform: translate(-50%, -50%);
Remove all other css stuff.
I'm not sure if you are talking about this but, you can also down or upscale the images with a simple check and then apply transform scale to all images that makes everything fit its parent. You could have also made this with CSS only if all your images where of the same width and height using the max-width/height attributes.

Move child element with mousemove

I'd like to know if there's a way to explore the content of a div by moving mouse? like for example having a 1000px*1000px pic inside a 500px*500px div content in overflow:hidden and being able to see the rest of the picture by putting the cursor in the right-bottom side of the div.
And if there's a way how should I proceed ?

Something nice and smooth?
jQuery(function($) {
const $mmGal = $('#mmGal'),
$mmImg = $('#mmImg'),
damp = 10; // 1 = immediate, higher number = smoother response
let X = 0, Y = 0,
mX = 0, mY = 0,
wDiff = 0, hDiff = 0,
zeno, tOut;
// Get image size after it's loaded
$mmImg.one('load', function() {
wDiff = (this.width / $mmGal.width()) - 1;
hDiff = (this.height / $mmGal.height()) - 1;
}).each(function() {
if (this.complete) $(this).trigger("load");
});
$mmGal.on({
mousemove(ev) {
mX = ev.pageX - this.offsetLeft;
mY = ev.pageY - this.offsetTop;
},
mouseenter() {
clearTimeout(tOut);
clearInterval(zeno);
zeno = setInterval(function() { // Zeno's paradox "catching delay"
X += (mX - X) / damp;
Y += (mY - Y) / damp;
// Use CSS transition
$mmImg.css({transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)`});
// If instead you want to use scroll:
// $mmGal[0].scrollTo(X * wDiff, Y * hDiff);
}, 26);
},
mouseleave() {
// Allow the image to move for some time even after mouseleave
tOut = setTimeout(function() {
clearInterval(zeno);
}, 1200);
}
});
});
#mmGal {
position: relative;
margin: 0 auto;
width: 500px;
height: 220px;
overflow: hidden;
background: #eee;
}
#mmImg {
display: block;
}
<div id="mmGal">
<img id="mmImg" src="https://i.stack.imgur.com/BfcTY.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here's another similar approach to mousemove element in opposite direction
http://en.wikipedia.org/wiki/Zeno%27s_paradoxes

give widht and height to div wrapped for the image
here is the DEMO
on :hover add overflow: visible; to the div

This is almost what you want. See this fiddle http://jsfiddle.net/sajith/RM9wK/
HTML
<div id="container"><img src="http://farm4.staticflickr.com/3668/12858161173_8daa0b7e54_b.jpg"/></div>
CSS
#container {
width:300px;
height:300px;
overflow: hidden;
}
#container img {
position: relative;
}
Javascript
$(function() {
$( "#container" ).mousemove(function( event ) {
var width = $("#container img").width();
var height = $("#container img").height();
var divWidth = $("#container").width();
var divHeight = $("#container").height();
var xPos = (width / divWidth - 1) * event.pageX
var yPos = (height / divHeight -1) * event.pageY
$("#container img").css('left', '-'+ xPos+'px');
$("#container img").css('top', '-'+ yPos+'px');
});
});

I would use "triggers" (hot spot) ~ add some small div element and set their position as you want, now when mouse enter trigger some events....
Simple Example: jsfiddle
CSS
div.container {
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
.trigger {
right:0;
bottom:0;
position:absolute;
z-index:2;
width:10px;
height:10px;
background-color:transparent;
}
HTML
<div class='container'>
<img src='http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg' />
<div class='trigger'></div>
</div>
jQuery
$('.trigger').mouseenter(
function(){
$(this).parent('.container').css({
'width':'220px',
'height':'250px'
});
});
$('.container').mouseleave(
function(){
$(this).css({
'width':'100px',
'height':'100px'
});
});

How to find the center of the div using jquery

I have a div tag with id container. How can I find its center using either jquery or javascript?
<div id="container"></div>
here is css
#container {
width: 300px;
height: 300px;
border: 1px solid red;
}

Is it this?
var cX = $('#container').offset().left + $('#container').width()/2;
var cY = $('#container').offset().top + $('#container').height()/2;

$(function(){
var $this = $("#container");
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
console.log(centerX ,centerY)
})

You should check:
width / outerWidth
height / outerHeight

jQuery way:
var div = $('#container');
var divCoords = {
x : div.width() * 0.5 ,
y : div.height() * 0.5
};

making an overlay sit perfectly centeral on any size screen

I have an element that I need to position horizontally and vertically central on screen, I don't doing this with jQuery, but how would I go about it, currently my code looks like this,
$("dd a, dt a, .job_listings a, #similar_jobs a").live("click", function(){
var self = $(this);
$("#overlay").fadeIn('slow');
var targetProcent = 68;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);
var targetX = ($(window).width() - 827) / 2;
var targetY = 75;
$('#lightbox').load(self.attr("href"));
//usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)
$('#lightbox').css({
"position": "absolute",
"top": $(window)+75+"px",
"left": targetX+"px"
}).fadeIn('slow');
//$('html, body').animate({scrollTop:0}, 'slow');
return false;
});

#udders; may be you can define position :absolute to you element
css
div{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}
give margin half of the element height & width
check thess links for more:
Centering things Vertically (and Horizontally)
Centering page content vertically