Develop Reference

Preserve position of elements in respect of background image while resize

Hey I have container with background-image and I added the "pins" to the container and set the position. But the problem is with resize of the window. While the resizing the position of the pins doesnt preserve (especially vertically). How can I set the position to stay always on the same place in respect of background image ?
DEMO:
JSFiddle
CSS:
.building {
height: 100%;
width: 100%;
position: relative;
background: transparent url('http://svgshare.com/i/403.svg') no-repeat left center/contain;
&__item {
position: absolute;
z-index: 50;
&--1 {
bottom: 11%;
left: 24%;
}
&--2 {
bottom: 18%;
left: 10%;
}
&--3 {
bottom: 10%;
left: 38%;
}
&--4 {
bottom: 20%;
left: 43%;
}
&--5 {
bottom: 48%;
left: 84%;
}
&--6 {
bottom: 38%;
left: 30%;
}
&--7 {
bottom: 70%;
left: 84%;
}
&--8 {
bottom: 23%;
left: 86%;
}
&--9 {
bottom: 60%;
left: 68%;
}
&--10 {
bottom: 8%;
left: 30%;
}
&--11 {
bottom: 35%;
left: 84%;
}
}

If you have the original width and height of the image and an initial position of your marker, you can calculate the new x position of the marker by doing this:
newX = (initialX / originalWidth) * newWidth
Same thing goes for the y position.
Here is a simple example using JS to recalculate the position, whenever the window resizes.
Let's stick the marker to the basketball ;)
var img = new Image()
var wrapper = document.getElementsByClassName('wrapper-inner')[0]
var marker = document.getElementsByClassName('marker')[0]
var initialPos = {x:740, y:555}
var padding = 25
var imgW = 0
var imgH = 0
img.onload = function() {
wrapper.firstElementChild.src = this.src
imgW = this.width
imgH = this.height
resize()
}
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Finish_%28235964190%29.jpg/1024px-Finish_%28235964190%29.jpg'
function resize() {
var imgRect = wrapper.getBoundingClientRect();
marker.style.left = ((initialPos.x/imgW) * imgRect.width) - padding + "px"
marker.style.top = ((initialPos.y/imgH) * imgRect.height) - padding + "px"
}
window.onresize = resize
body {
margin: 0;
}
.wrapper {
text-align: center;
}
.wrapper-inner {
display: inline-block;
font-size: 0;
position: relative;
}
.wrapper-inner img {
width: 100%;
height: auto;
}
.marker {
font-size: 32px;
color: red;
font-weight: bold;
border-radius: 25px;
line-height: 1.5;
width: 50px;
height: 50px;
background: white;
position: absolute;
left: 0;
top: 0;
z-index: +1;
}
<div class="wrapper">
<div class="wrapper-inner">
<img src="" alt="">
<span class="marker">&starf;</span>
</div>
</div>

You won't be able to accomplish this with pure CSS and background-image with sizing method set to contain.
You can however do pure CSS and use <img /> tag to load the svg because Images keep proportions when scaled.
First you'll need to to add the img tag in the .building
Make your markers 0x0px wide and tall and give them negative margin offset by half the width and height.
That way the center of the marker will always be your anchor when your use percentages. (Provided you use top % and left %. In your case you use bottom % so you need to add 15px)
Set display of .building to inline-block -- that way it always "wraps around" the image.
You'll now have a responsive image that you can control the width of trough .building{width:XX%}
Demo
.building {
width: 100%;
position: relative;
img{
width:100%;
}
&__item {
position: absolute;
z-index: 50;
width: 0;
height: 0;
margin-left: -15px; //sub half of width
margin-top: 15px; // add half of height
...
That's as far you'll get using pure CSS. For anything more advanced use jQuery and a Responsive Hotspot Plugin
Good luck!

Parallax Issue in Javascript

I was creating a parallax effect in which the image and the text move in opposite direction to the movement of the mouse. That is happening inside an element called parallax-wrapper. But when I move out of the element I want the image and the text to return back to their original positions. I have tried to detect the mouse position outside the element but for some reason it not firing properly.
The codepen link is - https://codepen.io/rohitgd/pen/gRLNad?editors=1010
HTML
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>
CSS
body {
background-color:#fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color:#0c0c0c;
position: relative;
overflow: hidden;
.layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color:#FFF;
transition: all 200ms ease-out;
}
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
Javascript
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
$(document).mouseleave(function(e) {
var target = $(e.target);
if( !target.is("div.layer")) {
alert('out of the element');
e.stopPropagation();
}
});
What I want is when the mouse is outside the parallax-wrapper the Image and the text return back to their original positions.

You're not resetting the transformations when your mouse leaves. You need to add this where you have the alert...
$(".parallax-wrapper").mouseleave(function(e) {
$("*[data-mouse-parallax]").each(function() {
$(this).css({ transform: "translate3d( 0, 0, 0 )" });
});
});
Note that the mouseleave event is triggered when the mouse leaves .parallax-wrapper, not document as you previously had it.
Here's a modified codepen...
https://codepen.io/anon/pen/ZyBgYJ

I think a selector was wrong. Here's a correct version or see code below.
To show better when you are inside/outside I change the background color, that's better than an alert. When you leave the wrapper (the black background) it flips correctly now.
Where RED is set you can reset the transform to the origin.
// Trying to replicate the effect here - https://tympanus.net/Development/MorphingBackgroundShapes/
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$(".parallax-wrapper").css("background-color", "#00ff00"); // <-- EXIT
// reset transform here
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
// this is the selector I changed from "document" to ".parallax-wrapper"
$(".parallax-wrapper").mouseleave(function(e) {
var target = $(e.target);
if( !target.is("div.layer")) {
$(".parallax-wrapper").css("background-color", "#ff0000"); // <-- ENTER
e.stopPropagation();
}
});
body {
background-color:#fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color:#0c0c0c;
position: relative;
overflow: hidden;
.layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color:#FFF;
transition: all 200ms ease-out;
}
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

Replace $(document).mouseleave with $(".parallax-wrapper").mouseleave.
$(".parallax-wrapper").mousemove(function(e) {
var x = e.pageX - $(this).offset().left - $(this).width() / 2;
var y = e.pageY - $(this).offset().top - $(this).height() / 2;
$("*[data-mouse-parallax]").each(function() {
var factor = parseFloat($(this).data("mouse-parallax"));
x = -x * factor;
y = -y * factor;
$(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
});
});
$(".parallax-wrapper").mouseleave(function(e) {
alert('out of the element');
});
body {
background-color: #fff;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parallax-wrapper {
width: 500px;
height: 300px;
background-color: #0c0c0c;
position: relative;
overflow: hidden;
}
.parallax-wrapper .layer {
width: 80%;
height: 80%;
position: absolute;
left: 30px;
text-align: center;
line-height: 300px;
font-size: 38px;
color: #FFF;
transition: all 200ms ease-out;
}
img {
width: 200px;
height: 200px;
position: relative;
top: 50px;
right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
<div class="layer" data-mouse-parallax="0.1">
<img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
</div>
<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

Filling window Background

I'm trying to put a picture on my background and my idea is that image fills the entire window, no matter what size it is.
I'm using html, css and script below:
// Funcao adaptImage()
// Parametros: targetimg
function adaptImage(targetimg) {
var wheight = $(window).height();
var wwidth = $(window).width();
targetimg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" });
var imgwidth = targetimg.width();
var imgheight = targetimg.height();
var destwidth = wwidth;
var destheight = wheight;
if(imgheight < wheight) {
destwidth = (imgwidth * wheight)/imgheight;
$('#fundo img').height(destheight);
$('#fundo img').width(destwidth);
}
destheight = $('#fundo img').height();
var posy = (destheight/2 - wheight/2);
var posx = (destwidth/2 - wwidth/2);
if(posy > 0) {
posy *= -1;
}
if(posx > 0) {
posx *= -1;
}
$('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}
$(window).resize(function() {
adaptImage($('#fundo img'));
});
$(window).load(function() {
$(window).resize();
});
#fundo-externo {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#fundo {
position: fixed;
width: 100%;
height: 100%;
}
#fundo img {
width: 100%;
position: absolute;
}
#site {
position: absolute;
top: 40px;
left: 50%;
width: 560px;
padding: 20px;
margin-left: -300px;
background: #FFF;
background: rgba(255,255,255,0.8);
}
<body>
<div id="fundo-externo">
<div id="fundo">
<img src="http://placehold.it/1920x1080" alt="" />
</div>
</div>
</body>
My problem is in some devices, the background does not fill completely , it appears a white list below.
Any ideas would help Many thanks

Use this setting for your background image
.for_background_img {
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}

don't use an <img> tag, but use the image as background image for your body:
body {
background: url('http://placehold.it/1920x1080') no-repeat;
background-position: fixed;
background-size:cover;
}

Hide Sticky Div Once Scrolling Past Next Parent Div

I'm trying to hide a "sticky" div once it scrolls past the next parent div. I've currently successfully have it so it appears after scrolling "y > 100" but I'm having a lot of trouble getting the "Sticky Note" to disappear after scrolling past #break.
Example below.
http://codepen.io/anon/pen/BojKBx
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 100) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 50%;
height: 60px;
border-bottom: 1px solid #000;
z-index: 1;
margin: 0 auto;
left: 50%;
margin-left: -500px;
text-align: center;
}
#header {
font-size: 50px;
text-align: center;
height: 60px;
width: 100%;
background-color: red;
}
#container {
height: 2500px;
}
#break {
text-align: center;
font-size: 30px;
margin-bottom: 300px;
width: 100%;
background-color: yellow;
}
#footer {
height: 60px;
background-color: red;
width: 100%;
bottom: 0;
}
<div id="header">Home</div>
<div class="bottomMenu">
<h2>Sticky Note</h2>
</div>
<div id="container"></div>
<div id="break">Should Not Be Seen After This Point</div>
<div id="footer"></div>

You can get Y position of a div (its vertical offset starting from the top of the page), and then add condition to show sticky note only when you're below the required "Y" coordinate, and above the required div. Example:
http://codepen.io/anon/pen/EVPKyP
Javascript code:
$(document).scroll(function () {
var bodyRect = document.body.getBoundingClientRect(),
elemRect = document.getElementById("break").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top - window.innerHeight;
var y = $(this).scrollTop();
if (y > 100 && y < offset) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
Sources:
Retrieve the position (X,Y) of an HTML element
screen width vs visible portion

Stop DIV from crossing specified position

I need to stop #first and #second div from crossing the green line. The example will explain you everything.
http://jsfiddle.net/3QdJt/1/
It works good when I'm scrolling UP but when I go down DIVs are jumping.
HTML
<div id="first"></div>
<div id="second"></div>
<div id="donotcross"></div>
CSS
#donotcross {
position: relative;
width 500px;
height: 5px;
top: 487px;
background: green;
}
#first {
position: fixed;
width: 50px;
height: 50px;
background: red;
right: 20px;
bottom: 50%;
margin-bottom: 50px;
}
#second {
position: fixed;
width: 50px;
height: 50px;
background: yellow;
right: 20px;
bottom: 50%;
margin-bottom: -50px;
}
jQuery
$(window).scroll(function () {
windowPos = $(this).scrollTop();
asd = $('#first').offset().top;
tauto = 500 - windowPos;
if(asd <= 500) {
$('#first').css('top', tauto);
$('#second').css('top', 600 - windowPos);
}
if (asd > 500 ){
$('#first').css('top', 'auto');
$('#second').css('top', 'auto');
}
});

You need to check the windowPos variable instead of checking asd > 500. The jumping is caused by you moving the boxes to be over 500. So to avoid the jumping you might want to do this
$(window).scroll(function () {
windowPos = $(this).scrollTop();
asd = $('#first').offset().top;
tauto = 500 - windowPos;
if(asd <= 500) {
$('#first').css('top', tauto);
$('#second').css('top', 600 - windowPos);
}
if (windowPos > 500 ){
$('#first').css('top', 'auto');
$('#second').css('top', 'auto');
}
});
Edited:
To achive sticky effect, I manually calculated the boxes position instead of using top:auto
$(window).scroll(function () {
var center = $(window).height() / 2;
//the 50 is the the #first and #second offset diff divide by 2
var firstBoxTop = center - 50;
var secondBoxTop = center + 50;
var windowPos = $(this).scrollTop();
if((windowPos + firstBoxTop) < 500) {
firstBoxTop = 500 - windowPos;
}
if((windowPos + secondBoxTop) < 600) {
secondBoxTop = 600 - windowPos;
}
$('#first').css('top', firstBoxTop);
$('#second').css('top', secondBoxTop);
});

It's much effective if you put everything inside one wrapper div.
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
<div id="donotcross"></div>
CSS
body {
height: 2000px;
}
#donotcross {
position: relative;
width 500px;
height: 5px;
top: 487px;
background: green;
}
#wrapper {
position: fixed;
width: 70px;
height: 130px;
background: gray;
right: 20px;
text-align: center;
top: 50%;
}
#first {
background: red;
width: 50px;
height: 50px;
margin: 10px auto;
}
#second {
background: yellow;
width: 50px;
height: 50px;
margin: 0 auto;
}
This script will work with any height and top values of #wrapper (might be dynamic), and with any height and position of #donotcross (also might be dynamic).
var start_p = $('#wrapper').offset().top - $('#wrapper').height()/2;
$('#wrapper').css('top', $('#donotcross').offset().top + $('#donotcross').height());
$(window).scroll(function () {
var windowPos = $(this).scrollTop();
var dnc = $('#donotcross').offset().top + $('#donotcross').height() - windowPos;
if (start_p >= dnc) $('#wrapper').css('top', start_p);
else $('#wrapper').css('top', dnc);
});
http://jsfiddle.net/3QdJt/3/