Develop Reference

Creating responsive 'Image Map' for elements to match elements of background image (JS/CSS) (React) [duplicate]

I'm trying to create a map of button elements that overlay a full-screen image, positioned over all the 'buttons' depicted on the image. When the image resizes, the button elements should resize as well.
I initially used an SVG image map for this, but it had a positioning bug (the link below) that didn't allow for the video player inside the foreignObject to show.
SVG foreignObject and absolute positioning
I figured using absolute positioning, and JS to measure the width of the background image was the best way to go. However, I'm having trouble making it work.
Below is the project, with the white box needing to be positioned over the background image (the entire box, with chocolates, and the screen).
The image is within a div as a background, like so:
export const BackgroundLightsOn = styled.div`
position: absolute;
background: url(${BgLightsOn});
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
border: 1px solid red;
`
Unfortunately, getting the dimensions of this DOM element gets the dimensions of the div, not the image (which is sometimes larger than the viewport). Below is the 'resizing' code, but this connects to backgroundRef (which is the div element the image is the background, not the image itself).
import React, { useEffect, useRef } from 'react';
import {
TruffleTinContainer,
TruffleTinOutside,
} from '../truffle-tin/styledTruffleTin';
export default function TruffleTin({ backgroundRef }) {
const truffleTinRef = useRef();
const initialPos = { x: 150, y: 150 };
const padding = 25;
let truffleBoxWidth = 0;
let truffleBoxHeight = 0;
useEffect(() => {
truffleBoxWidth = truffleTinRef.current.offsetWidth;
truffleBoxHeight = truffleTinRef.current.offsetHeight;
resize();
}, []);
function resize() {
let backgroundDivRect = backgroundRef.current.getBoundingClientRect();
truffleTinRef.current.style.left =
(initialPos.x / truffleBoxWidth) * backgroundDivRect.width -
padding +
'px';
truffleTinRef.current.style.top =
(initialPos.y / truffleBoxHeight) * backgroundDivRect.height -
padding +
'px';
}
useEffect(() => {
window.addEventListener('resize', resize);
return () => window.removeEventListener('resize', resize);
});
return (
<TruffleTinContainer ref={truffleTinRef}>
I'm the truffle tin
</TruffleTinContainer>
);
}
See the GIF below for the issue:
What's the best way to get this div to proportionally match the width of the background image?
(Edit: I changed the 'div with image background' to an img tag, but even then, the getBoundingClientRect shows not the width of the image, but the width of the viewport:
(in other words, even though the image is much wider than the viewport, I'm still getting the viewports dimensions, when what I want is the image's dimensions))

You don't need JS for that. This is achieved with plain CSS, all you need is the button center positions relative to left-top corner of the block. Sample HTML/CSS:
<div class='wrapper'> <!-- Will need this later -->
<div class='container'>
<a class='button' style='--left: 25%; --top: 20%'>1</a>
<a class='button' style='--left: 35%; --top: 80%'>2</a>
</div>
</div>
.container{
position: relative;
background: url('/path/to/image');
background-size: 100% auto;
}
.button{
position: absolute;
left: var(--left);
top: var(--top);
transform: translate(-50%, -50%); /* Move button a bit so its center matches the actual position */
/* These are just for visualization */
width: 50px;
height: 50px;
border-radius: 100%;
background: pink;
display: flex; align-items: center; justify-content: center;
}
The next step is to make .container have a constant width, or at least a constant width/height ratio if you care about vertical resizing. The constant width is achieved with a simple min-width. To avoid horizontal scroll we will add a .wrapper to hide the cut-off sides:
.wrapper{
display: flex;
align-items: center;
max-width: 100%;
overflow: hidden;
}
/* A-and a min-width for .container */
.container{
min-width: 1200px; /* Or whatever */
}
If you need a fixed ratio:
.container::before{
content: '';
display: block;
padding-top: 56.25%; /* 56.25% of the parent width this is, ratio 16x9 */
}
min-width can still be applied if needed. There's an aspect-ratio CSS property that can be used instead of that pseudo-element hack, but it is supported only in relatively fresh browser versions; still might be used if you don't plan supporting a little outdated browsers.

Make a div bigger and wider while scrolling

How do I enlarge a div while scrolling from a size of 20% width and height in the center to 100% width and height?
I'm currently trying at my first website and I'm almost there. All that is missing is animations and improvements in CSS. One of my ideas is that you have a div with a background inside and while scrolling the picture gets bigger up to the whole viewpoint. I would be very grateful if someone could help me.

You can use transform scale to do it.
CSS part will set the element to take 100% of width and height (i use viewport units), and set it position to fixed (so you will see what happen when you scroll).
Since we gonna change it's scale while scroll, set it initial scale to be 20% of it's original size.
JS part will listen to scroll event and scale the div that it won't be less then 20% but also won't be larger then 100%.
Play with the numbers on the condition to get what you need:
const demoDiv = document.querySelector("#demo");
window.addEventListener('scroll', function() {
if (pageYOffset*0.0001 > 1 || pageYOffset*0.0001 < 0.2) { return; }
else { demo.setAttribute('style', 'transform: scale('+pageYOffset*0.0001+');'); }
});
body {height: 40000px; margin: 0; padding: 0;}
p {position: fixed; top: 0; left: 0; font-size: 40px;}
#demo {
text-align: center;
font-size: 10vw;
position: fixed; top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: black;
color: white;
transform: scale(0.2); /* since you ask for 20% */
}
<p style="">Scroll to see it grow.</p>
<div id="demo">My minumum width and height are 20% and i will stop grow when i get to 100%</div>

Firstly, Congratulations on your first website. Good luck on your coding journey.
You can do it by using CSS & JavaScript. There is many way, but I'm writing one here. I hope it will be some good.
Let us call the div with an CSS ID animatedDiv.
<div id="animatedDiv"></div>
Now, lets style it with CSS
#animatedDiv
{
margin-top: 200px;
background: #dc143c;
min-height: 350px;
min-width: 20%;
position: absolute;
}
Here, I gave the div a background color, Absolute type of position, and margin-top of 200px. You can change it according to your needs. I used min-height and min-width property because these value will not be any fixed value, they will change on scroll.
Now, lets write some JavaScript
var aDiv = document.getElementById("animatedDiv");
function changeWidth()
{
var scrollVal = window.pageYOffset;
var scrollSlow = (scrollVal / 4);
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener('scroll', function()
{
requestAnimationFrame(changeWidth);
}, false);
Here, on a user define function, I catch the div with it's ID and assign into aDiv variable. Then I catch the page offset on Y axis (How much pixel the page was scrolled) and store it into a variable scrollVal, Next I divide the value by four (you can use 5, 10 20). It will slow the changing effect.
I've use Math methods (min and max) to assign a value between 20 to 100%.
To make the function work on scroll, window.addEventListener is used, and the window.requestAnimationFrame() method will tell the browser that we wish to perform it as an animation.
I hope it will be some help to you. I don't know did I explain well the process to you or not. English is not my mother language, so please don't mind if I made any grammatically mistake.
Wish you all the best.

How to bring elements closer together as the screen narrows?

I am using negative margin to cause some playing card elements to overlap, creating a visual effect akin to how a hand of playing cards appear in real life.
The issue here is that the negative margin is defined in vw. This means that as the screen size widens, the value of a single vw becomes greater, and the negative margin grows, causing the cards to overlap more. This is contradictory to my intentions-- as the screen widens, the cards should spread accordingly, and overlap more as the screen narrows.
If I instead use an absolute value like px, the overlap will remain constant as the screen size changes, which is also undesirable.
I have spent many hours trial & erroring this and have yet to come up with a scheme that works correctly.
How can you cause a negative margin to diminish as the screen increases, with CSS or with JS if CSS can't do it alone?

Codepen
You could combine clamp() with relative positioning. You'll probably need to adjust the values a little to make it good looking, but this is the core concept.
:root {
--cardWidth: 200px;
--min: calc(var(--cardWidth) / 8);
--var: 7.5vw;
--max: calc((var(--cardWidth) / 4) * 7);
--overlap: clamp(
var(--min),
var(--var),
var(--max)
);
}
body {
display: grid;
place-items: center;
margin: 0;
}
.w {
display: flex;
}
[class*=card] {
height: 300px;
width: var(--cardWidth);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px -1px #000;
}
.card-2 {
position: relative;
left: calc((var(--cardWidth) * -1) + var(--overlap));
}
<div class="c"></div>
<div class="w">
<div class="card"></div>
<div class="card-2"></div>
</div>

You can just use flex box for this. Try out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

How do I render a 1px gutter between segments with a very small percentage width?

I am creating a UI control. It is a bar which shows colored areas in relative proportion to each other based on the input. A few of the requirements are that there be a 1px gutter between the colors and that every color must be shown at a minimum of 1px no matter how small the relative width.
The bar looks like this:
The gutters are being placed using a technique described by the pocketgrid documentation:
.threshold-container {
height: 8px;
$threshold-horiz-gutter: 1px;
&.block-group {
margin-left: -$threshold-horiz-gutter;
}
.threshold {
height: 100%;
min-width: 2px;
&.block {
padding-left: $threshold-horiz-gutter;
}
.colored-area {
height: 100%;
width: 100%;
}
}
}
There is a codepen here which provides a working example: http://codepen.io/ghoti143/pen/eZNXVW
The problem I face is that when the relative proportion of any one color is sufficiently small, the last color area wraps to the next line and looks like this:
To replicate this issue, visit the codepen project and enter this as the Threshold Array value:
[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]
In this case, the width style of the LightGreen area is 0.33333%. This equates to 0.495px at a bar width of 150px. However, because of the requirement to always show at least 1px of width for each color, the LightGreen area is consuming 2px of width (1px content + 1px padding).
Thanks for any insights you may have!

You can use the css calc function to subtract out the 1px margins from the width calculations for each section. [For example]http://codepen.io/anon/pen/ZWGNVY
coloredAreas.push({
color: thresholds[i].color,
width: 'calc(' + width + '% - 1px)'
});

Dynamically setting line-height/keeping text vertically centered when parent div changes size in JavaScript

I'm trying to achieve the following in HTML/Javascript:
have a coloured circle with a piece of text perfectly centred (both horizontally and vertically) within it;
dynamically from JavaScript, be able to alter the size of the circle, maintaining the text centred within it at all times.
The following achieves the first of these:
Create the circle using a DIV element whose style has appropriate background and border-radius;
Inside the DIV, put a P element whose style has "text-aligbn: center" and "line-height: ".
For example:
p.circlecaption {
text-align: center;
line-height: 128px;
}
...
<div style="background: #a0a0a0; margin: 0px; width: 128px;
height: 128px; border-radius: 64px;" id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
This works fine for the initial, static, case. The problem comes when, from JavaScript, I attempt to set the line-height property in order to keep the text vertically centred as I change the size of the div. I expected something like the following to work:
var obj = document.getElementById('theCircleDiv');
var sz = '' + (rad*2) + 'px';
obj.style.width = sz;
obj.style.height = sz;
obj.style.margin = '' + (64 - rad) + 'px';
obj = document.getElementById('theText');
obj.style['line-height'] = sz;
However, while this code re-sizes and re-centres the circle perfectly, it doesn't vertically re-centre the text-- i.e. the attempt to dynamically set line-height appears to be ignored.
Can anybody offer any help on either how to set line-height dynamically, or else a way to achieve my desired goal of keeping the text centred within the circle? From my reading around, I've seen various other suggestions such as calling the property "lineHeight" or playing around with "vertical-align: middle", but none seems to work.
(I am currently testing in Safari on Mac OS which is likely to be most used among the site's target audience, but am also looking for a solution that is reasonably cross-browser compatible.)

You can achieve that with pure css
#theCircleDiv {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#theText {
vertical-align: middle;
}
Working Example: http://jsfiddle.net/bZj52/

Here is an example. I'm using jQuery UI to wire up some dynamic setting of the size but the re-size code should work in a pure JavaScript environment.
First, I cleaned up the HTML and put it's style in CSS
HTML:
<div id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
CSS:
#theText {
text-align: center;
line-height: 128px;
}
#theCircleDiv {
background: #a0a0a0;
margin: 0px;
width: 128px;
height: 128px;
border-radius: 64px;
}
JavaScript:
function resize(size) {
var circle = document.getElementById('theCircleDiv'),
text = document.getElementById('theText');
circle.style.width = size + 'px';
circle.style.height = size + 'px';
circle.style.borderRadius = (size / 2) + 'px';
text.style.lineHeight = size + 'px';
}

And this is much easier with flex box.
div {
background-color: #ccc;
height: 50px;
width: 100%;
/* Important Part */
display: flex;
justify-content: center;
align-items: center;
}
<div>
<span>Center Me Please</span>
</div>