JS calculate current center of screen - javascript

I searched a lot but couldn't find the answer I want. I have a JS script which shows an image when a fixed element is hovered. However I would like to always have the image at the center of the screen, not matter where the user scrolls. How can I reach that?
My JS function:
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change img to span using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
JSFiddle: https://jsfiddle.net/rbmd6a39/
I can get offset from the top of page using
window.pageYOffset;
But I don't know where to put that value to have it in the center.

You could give that image styles that would make it fixed in the center of your screen. No need for JS there.
Now also works on very large images with max-width, max-height and object-fit: contain!
.always-centered {
display: block;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
z-index: 99;
}

You don't actually need to use JavaScript for centering it. You could use position: fixed and center using left: 50%; transform: translateX(-50%);in CSS, which would be less demanding of the client computer.
Using JS, though, it'd be pretty much the same thing: the image would need to be fixedly positioned and you'd define left as half of the viewport minus half of your image width.
I suggest using CSS and classes if possible, since this is less convoluted and all calculations will be dealt be the browser itself.

Related

An image with width larger than the window size initially loads as the same width as the window

What I am trying to do is center an image using this bit of jQuery. The selector for my image is " .section-header img ".
var image_center = function(){
var imageWidth = $('.section-header img').width();
var windowWidth = $(window).width();
var centerFix = -(imageWidth-windowWidth)/2 ;
console.log(imageWidth, windowWidth, centerFix);
$('.section-header img').css({'left': centerFix});
}
I call the function when the document is ready and when the window is resized:
$(document).ready(function(){
image_center();
$(window)resize(function(){
image_center();
}
My problem is that I cannot get the function to work when the window initially loads. Looking in my console, the browser reads the image as having the same width as the browser. Once I resize the browser, the actual width of the image is read. Is there something built into Chrome that is tripping me up here? Is there an easier way to do this (without using background-image)??
Thank you,
CPR
It would probably be easier to use css for this job.
.section-header {
background-image: url("/path/to/image.jpg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
Not sure if you also want the img to resize.
Here is an example with resize and your img tag + section-header div or whatever it is:
.section-header{
width: 50%;
left: 25%;
margin-left: auto;
position: absolute;
}
img{
width: 100%;
height: 100%;
}
<div class="section-header">
<img src="http://placehold.it/350x150" alt="">
</div>
https://jsfiddle.net/Lj4mfqLa/
UPDATE:
You could also try to wrap your jquery code in:
$(window).load(function(){
//initialize after images are loaded
});
instead of
$(document).ready(function(){})

Before and After Slider with Multiple Images

I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.
You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV
Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;

Javascript If/Else statement checking content:url

I'm having issues with figuring out the correct syntax to have my code check the value of one of my images with the id '#main'. My CSS has the image changing its src based on a media query using the content:url attribute. The reason I'm doing it this way is because I have about 5 different background images that trigger at different widths to provide a frame for my content and I need to be able to adjust the height of my ".text" div based on what image is being used as the frame currently.
I understand how to code all that, all I need is help with how to ask for the value correctly on the first one and I should be able to do the rest from there. Just to clarify once again, the issue is in the if/else statement; the code works without the if/else statement.
Here is what I have:
function updateHeight()
{
if ($("#main").css('content') === 'url("../images/main-bg2-landscape.png")') {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}
Just an example of the CSS in place:
#main {z-index: -1;
position: absolute;}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
#media only screen and (min-width: 1025px) {
#main {content:url(../images/main-bg2-landscape.png);}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
}
Thanks
The problem is most likely that the "url()" call in the css will result in the full path to the image in the HTML that is ultimately rendered. It will not be the relative path you place in the .css file
Probably something like /images/main-bg2-landscape.png in this case. If you inspect the image element in chrome or the browser of your choice you'll see the full path that ends up in your HTML.
A better option may be to do the comparison on the name of the file only so that you aren't dependent on the location of the image. Something like:
if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}

Changing the mask height depending on a responsive image

Having a problem in trying to copy the height of a responsive image to my mask on first load and on every time the window is resized. I've tried a few js scripts, but still I cant make it happen.
It is really a responsive image slider with a div(mask) exactly over it whatever the viewport screen size is.
this is my jQuery script:
function maskInit(){
var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
$("#mask").height() = offsetDots;
}
$(document).ready(function() {
maskInit();
});
$(window).resize(function(){
maskInit();
});
and my CSS:
#slide{
height: 10vw; /* to simulate a responsive image */
width: 100%;
margin: 0;
padding: 0;
background: red;
z-index: 0;
}
#mask{
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
background: gray;
opacity: 0.8;
}
I've setup a jsFiddle here to simulate my problem
There is something wrong with your script.
You are NOT setting the mask height with this:
$("#mask").height() = offsetDots;
Check jQuery .height()
Instead use it this way:
$("#mask").height(offsetDots);
or you can set via css:
$("#mask").css({"height":offsetDots});
Here's your updated jsFIDDLE demo
.height() is a function so you can not do $("#mask").height() = offsetDots; use $("#mask").height(offsetDots); or by .css({"height":offsetDots}) to set height.

Zoom on a picture on resizing

I'm developing a website where I have to display a picture (not a problem).
But, I have to display it as this link: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
So, On resizing, I have to zoom on the picture to never scale it.
Does some on know how to do it?
Here is what I have:
html:
<div id="container_images">
<ul>
<li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
</ul>
</div>
CSS:
#container_images{
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#container_images li{
display: block;
list-style: none;
z-index: -30;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:1;
}
#container_images li img{
width: 100%;
height: 100%;
display: block;
}
If I understood correctly you don't need the browser's inbuilt zooming (ctrl+), you just want to make the picture fill in the whole window of the browser when the window is resized.
You will need 2 things for that.
First, you need some javascript to execute on window resize event, then you will need some simple maths to calculate the center of the picture taking into account the new window size and set left/top margin of the picture to new values.
You can easily do that with jQuery:
$(window).resize(function() {
var h = $(window).height();
var w = $(window).width();
var pic = $('#container_images img');
var pic_width = pic.width(), pic_height = pic.height();
$(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});
One thing to remember is that if your picture's width/height is already changed from its original size, you will get that new size from width() and height() functions.
So you either should make sure the original is not touched, or use one of the solution out there for grabbing the original picture size (e.g. How do I get actual image width and height using jQuery?).
Also the above snippet is to just get you started, you should grab the picture and its parameters in some init function and only recalculate/modify css on resize event.

Categories