CODEWITHSUNDEEP
javascriptcsssvgmobile
Nathan Taylor
Nathan Taylor

Reputation: 113

Issues with SVG objects on Mobile

I have tried everything but I think I'm just a bit over my head here. I have created a site that on desktop works perfectly, but, on mobile, the hover elements just will not work. I'm using SVG Objects.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>F1 2021: Round 22 Abu Dhabi Grand Prix</title>
</head>

<body>

<style>
.circuit-map {
position: relative;
background-image: url(/circuits/round-01/bahrain.svg);
background-position: center;
overflow: hidden;
background-size: cover;
}
.circuit-map > img {
    display: block;
    width: 100%;
    height: 100%;
    
}

.circuit-map .circuit-controls {
    position: absolute;
    overflow: hidden;
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}
.circuit-map .circuit-controls img {
    display: none;
    width: calc(100%);
    min-width: calc(100%);
}

.circuit-map .circuit-controls#statsLeft,
.circuit-map .circuit-controls#statsRight {
    top: 0;
    width: 4%;
    height: 84%;
    margin: 4.4% 0;
}
.circuit-map .circuit-controls#statsLeft {
    left: 0;
    flex-direction: row-reverse;
}
.circuit-map .circuit-controls#statsRight {
    right: 0;
}

.circuit-map .circuit-controls#statsLeft:hover,
.circuit-map .circuit-controls#statsRight:hover {
    width: 95.65%;
}

.circuit-map .circuit-controls#statsTop,
.circuit-map .circuit-controls#statsBottom {
    left: 0;
    height: 7.5%;
    width: 91.5%;
    margin: 0 4.25%;
}

.circuit-map .circuit-controls#statsTop {
    top: 0;
    flex-direction: column-reverse;
}
.circuit-map .circuit-controls#statsBottom {
    bottom: 0;
    flex-direction:column;
}

.circuit-map .circuit-controls#statsTop:hover,
.circuit-map .circuit-controls#statsBottom:hover {
    height: 92.1%;
}

</style>

<header>
<hr style="height:1px;background-color:white">
<h1>Round 01 Bahrain Grand Prix</h1>
<h2 style="font-size: 36px;">Sakhir Circuit, Bahrain</h2>
<br>
<h2>31 Dec, 2021</h2>

</header>
<br>
<br>
<section class="container">
<div class="circuit-map">
<img
id="circuitImage"
src="circuit.svg"
alt="Sakhir Circuit, Bahrain"
/>
<div class="circuit-controls" id="statsLeft">
<object type="image/svg+xml" data="starting-grid.svg"></object></div>
<div class="circuit-controls" id="statsRight">
<object type="image/svg+xml" data="race-results.svg"></object></div>
<div class="circuit-controls" id="statsBottom">
<object type="image/svg+xml" data="sprint-results.svg"></object></div>
<div class="circuit-controls" id="statsTop">
<object type="image/svg+xml" data="stats-top.svg"></object></div>
</div>

<script>
const circuitImageDOM = document.getElementById('circuitImage');

function calculateStatsSizes() {
const statsXDOM = [
document.querySelector('#statsLeft object'),
document.querySelector('#statsRight object'),
];
const statsYDOM = [
document.querySelector('#statsTop object'),
document.querySelector('#statsBottom object'),
];

const parentSizes =
statsXDOM[0].parentElement.parentElement.getBoundingClientRect();
const parentWidth = parentSizes.width;
const parentHeight = parentSizes.height;

statsXDOM.forEach(stat => {
stat.style.minWidth = `${parentWidth}px`;
stat.style.display = 'block';
});
statsYDOM.forEach(stat => {
stat.style.minHeight = `${parentHeight}px`;
stat.style.display = 'block';
});
}
circuitImageDOM.addEventListener('load', calculateStatsSizes);
window.addEventListener('resize', calculateStatsSizes);

circuitImageDOM.setAttribute(
'src',
`${circuitImageDOM.getAttribute(
'src'
)}?preventCache=${Math.random()}`
);
</script>
</body>

</html>

I just cannot seem to get this working on mobile - as a reference, here is the published site https://drivetodescribe.com/circuits/round-01/index.html. Can anyone help with this?

Upvotes: 0

Views: 224

Answers (1)

Friksel
Friksel

Reputation: 130

You're talking about hovering on mobile devices. But unless you have a mouse or other pointing device connected to the mobile device (which is obviously not normal), you can't count on a hover on mobile as it's only recording touch.

Normally you would use a click-event, pointerevents like pointerdown or pointerup (which work for both mouse and touch). Or direct touch events (like touchstart or touchend, which only work on touch input).

So you could convert the concept from hovering over the sides to something like toggling the sides on or off. Or having them open on a pointerdown (or touchstart) and close on a pointerup (or touchend).

Upvotes: 2

Related Questions