Develop Reference

Positioning an absolute element on a zooming image

I have some very simple code but I encountered an issue. I have a background image which is zoomed in upon scroll. I would like to relatively position an element relative to the background image which takes up the full width and height of the screen. How could I do this? I thought it would be as simple as having relative and absolute containers. For better context here is the image (https://imgur.com/rc8Ia3d). I am attempting to place an element on the screen of the camera. Do I have to think of a more outside of the box approach? Thank you.
Here is some of the very simple code
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".hero-zoom img").css({
width: (100 + scroll/5) + "%",
top: -(scroll/10) + "%",
});
});
</script>
header img{
width: 100%;
max-width: none;
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
}

How do you get the new top and left of a child div inside a rotated parent?

I am trying to use the new top and left of the child div inside a rotated parent to limit the draggable area of the rotated parent. Im using jquery draggable for this.
EDIT :
Here is the jsfiddle . Im planning to use the red dot on the rotated div to use as marker to check if it collided with the boundaries of the container. I need to get the new position(top and left) of that red marker to make use of my ready made function to contain the draggable.

In order to calculate the top or left offset for any element, you need to use .getBoundingClientRect(), in addition to accounting for the window scroll.
This is also the case for rotated elements, as can be seen in the following example:
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {
top: rec.top + window.scrollY,
left: rec.left + window.scrollX
};
}
console.log(findTopLeft('inner'));
#outer {
position: absolute;
top: 25%;
left: 25%;
width: 100px;
height: 50px;
border: 1px solid black;
transform: rotate(90deg);
}
<div id="outer">
<div id="inner">Text</div>
</div>
Hope this helps! :)

Full Screen Map Beneath NavBar

I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:

You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}

You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.

How to user controlled overlap images in JS

I'm desperately searching for solution for my client. I have graphic - something like that:
And I want to be able to take the line with circle in the center and drag it to right or left. And it will be hiding and unhiding my two full images. It's basically two images on the same place, just with another z-index I think.
I think it's possible to do it with JavaScript, but I don't know of any functions or methods for this option.

Here is my solution:
The HTML is pretty simple, just two divs for the images and one for the drag:
<div class="img" id="img1"></div>
<div class="img" id="img2"></div>
<div id="drag"></div>
For the CSS, the important part is to absolute position all the divs and give a background image.
As for the Javascript, with a little help from jQuery, we listen for the mouse events, make some calculations and adjust the CSS of the second image:
$('#drag').on('mousedown', function(e){
var $self = $(this),
dragPos = $self.position().left + $self.width()/2,
imgWidth = $('#img1').width();
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var mx = me.pageX - e.pageX + dragPos
$self.css({ left: mx });
$('#img2').css({
width: imgWidth - mx,
left: mx,
backgroundPosition: -mx + 'px 0px',
});
});
});
From there, I believe it's pretty easy to customize it and give it a unique look.
Hope this helps!
JsFiddle Demo

Something like this alphamask plugin may do the trick, though I'm not sure how simple it would be for you to implement in the manner of your slider example.

Actually quite simple. The first step is to make it work manually. I'd set it up as follows:
<div class="wrap" id="wrap1">
<div class="img-wrap img1"></div>
<div class="img-wrap img2"></div>
<div>
With CSS as follows:
.wrap {
position: relative;
width: 300px;
height: 300px;
}
.img-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.img1 {
z-index: 1;
background: url(bg1.png) no-repeat 0px 0px;
}
.img2 {
z-index: 2;
background: url(bg1.png) no-repeat 0px 0px;
}
Now some JavaScript (with jQuery) to set a position (you can call this when you move a slider over the top later):
function setPosition(percentage){
// get the width of the container
var w = $('#wrap1').width();
// work out the width of left panel
var w1 = Math.floor(w * percentage);
// and the right panel
var w2 = w - w1;
// set the width of the right panel
// move it right by the width of the left panel
// and move the background back by the width of the left panel
$('#wrap1 .img2').css({
width: w2,
left: w1,
backgroundPosition: -w1 + 'px 0px',
});
}
You now just have to decide how to do the dragging. You could even just do it on mouseOver. Easy!

Keep an Image Always Centered Regardless of horizontal scroll

I'm trying to create a title with an image, but I need it to stay centered regardless of the horizontal scroll. So pretty much keep it centered and move with the scroll so it's always showing.
I tried centering it and following a few examples I found in SO but none of them covers what I need.
Any help is greatly appreciated

It sounds like you want fixed position:
img.centered
{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px; /* Width of image /2 */
margin-top: -100px; /* Height of image /2 */
}
HTML:
<body>
<img class="centered" src="..." />
</body>

maybe not the best way but it works:
<div style="position:absolute; top:0px; width:100%; Height:100%; overflow:scroll; left:0px;">ContenContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentt</div>
<div style="position:absolute; top:50%; left:50%;">Centerd stuff</div>
Try it:
http://jsfiddle.net/chZWR/

Try the background fixing technique as described here:
Better example:
http://davidwalsh.name/css-fixed-position-background-image
body
{
background:url(your-image.jpg) top right no-repeat;
background-position:fixed;
}
Here is the live demo:
http://davidwalsh.name/demo/background-repeat.php
http://www.w3schools.com/cssref/pr_background-position.asp
for example:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Yet another way to do this:
Working Example
JS
var center = function () {
var wh = $(window).height();
ww = $(window).width();
ch = $('#center').height();
cw = $('#center').width();
t = wh / 2 - ch / 2;
l = ww / 2 - cw / 2;
$('#center').offset({
top: t,
left: l
});
};
$(document).ready(center);
$(window).resize(center);
CSS
#center {
position:fixed;
}
There is a small advantage to using this method, if you should need to change the size of the image or swap the image out for another, you won't need to adjust the positioning. All the calculations are done for you in the script.