Develop Reference

Javascript audio object not playing on mobile devices

I made this audio player but the codesandbox does not work in mobile devices. It works perfectly fine in desktop.
I get 'Could not get the stack frame of error' error when i try to play song from my phone.
Audio player
The player gets audio files data in a javascript object and they get built into a list. The audios start playing when list item is clicked. The code looks like this
$(function () {
$("#time-progress").progress({ percent: 0 });
let audio = new Audio();
const songs = [
{
artist: "Yaru Makaveli & Yada Sads",
image: "https://i.ytimg.com/vi/rI2vJENDvmY/maxresdefault.jpg",
title: "Cypher Weyn",
song: "cypherweyn2.mp3"
},
{
artist: "Abebe Araya",
image: "https://i.ytimg.com/vi/mp_cR7pVEcw/maxresdefault.jpg",
title: "Natsnet",
song: "natsnet.mp3"
},
{
artist: "Shewit & Semere",
image: "https://i.ytimg.com/vi/ucolLdVzRyg/maxresdefault.jpg",
title: "Betey",
song: "betey.mp3"
},
{
artist: "Q Rap M.O.DB",
image: "https://i.scdn.co/image/ab6761610000e5eb749c5e25b3d167fd3008914b",
title: "Waero",
song: "waero.mp3"
},
{
artist: "Yaru Makaveli & Yada Sads",
image: "https://i.ytimg.com/vi/rI2vJENDvmY/maxresdefault.jpg",
title: "Tealime",
song: "tealime.mp3"
},
{
artist: "Eden Gebreselassie",
image:
"https://is4-ssl.mzstatic.com/image/thumb/Music116/v4/00/4a/14/004a1407-eaed-45d3-048d-12dae76b7d3f/artwork.jpg/375x375bb.jpg",
title: "Goblel",
song: "goblel.mp3"
},
{
artist: "Amanuel Yemane",
image: "https://i.ytimg.com/vi/iukjMznrHcI/maxresdefault.jpg",
title: "Adi Latni",
song: "adilatni.mp3"
},
{
artist: "Tmnit Welday",
image: "https://i.ytimg.com/vi/MqVT5GdW6hQ/maxresdefault.jpg",
title: "Segar",
song: "segar.mp3"
}
];
let list_of_songs = songs
.map(function (song, index) {
return ` <div class="item" data-src="${song.song}"" data-title="${song.title}" data-artist="${song.artist}" data-index=${index} data-image=${song.image}>
<img class="ui avatar image" src="${song.image}"">
<div class="content">
<div id="equalizer">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
</div>
<i class="icon button-overlay circle outline"></i>
<span class="header">${song.title}</span>
<div class="description">${song.artist}</div>
</div>
</div>`;
})
.join("");
let play = document.querySelector("#play");
let currentSong = 0;
document.getElementById("song-list").innerHTML = list_of_songs;
audio = new Audio(`./music/${songs[0].song}`);
let icons = document.querySelectorAll(".icon");
$(document).on("click", ".item", function () {
let { src, artist, title, image, index } = this.dataset;
currentSong = Number(index);
let list_items = document.querySelectorAll(".item");
list_items.forEach((e) => {
e.classList.remove("active");
});
this.classList.add("active");
let newaudio = new Audio(`./music/${src}`);
if (audio.currentTime > 0 && !audio.paused && audio.src == newaudio.src) {
play.classList.remove("pause");
play.classList.add("play");
audio.pause();
this.querySelector(".button-overlay").classList.add("play");
this.querySelector(".button-overlay").classList.remove("pause");
} else if (
audio.currentTime > 0 &&
audio.paused &&
audio.src == newaudio.src
) {
play.classList.remove("play");
play.classList.add("pause");
this.querySelector(".button-overlay").classList.add("pause");
this.querySelector(".button-overlay").classList.remove("play");
audio.play();
} else {
this.querySelector(".button-overlay").classList.add("pause");
this.querySelector(".button-overlay").classList.remove("play");
playSong(src, artist, title, image);
}
});
audio.addEventListener("timeupdate", function (e) {
let currentTime = audio.currentTime;
let duration = audio.duration;
let minutes = Math.floor(currentTime / 60);
minutes = minutes >= 10 ? minutes : "0" + minutes;
let seconds = Math.floor(currentTime % 60);
seconds = seconds >= 10 ? seconds : "0" + seconds;
document.querySelector("#timer").innerText = `${minutes}:${seconds}`;
//progress
let status = Math.floor((currentTime / duration) * 100);
$("#time-progress").progress({ percent: status });
});
let artist_img = document.querySelector(".artist-image");
let song_title = document.querySelector("#title");
icons.forEach((icon) => {
icon.addEventListener("click", (e) => {
let type = e.target.dataset.type;
let image, src, artist, title;
var list_items = document.querySelectorAll(".item");
switch (type) {
case "play":
if (audio.currentTime > 0) {
play.classList.remove("play");
play.classList.add("pause");
play.dataset.type = "pause";
audio.play();
} else {
currentSong = 0;
let item = document.querySelector(".item");
item.classList.add("active");
item.querySelector(".icon").classList.add("pause");
document
.querySelector(".item")
.querySelector(".button-overlay")
.classList.remove("play");
const { song, artist, title, image } = songs[0];
playSong(song, title, artist, image);
}
break;
case "pause":
audio.pause();
artist_img.classList.remove("rotate-image");
e.target.classList.remove("pause");
e.target.classList.add("play");
e.target.dataset.type = "play";
break;
case "prev":
currentSong =
currentSong - 1 < 0 ? songs.length - 1 : currentSong - 1;
list_items.forEach((e) => {
e.classList.remove("active");
});
list_items[currentSong].classList.add("active");
var off =
$(".item.active").offset().top - $("#song-list").offset().top;
$("#song-list").scrollTop(off);
image = songs[currentSong].image;
src = songs[currentSong].song;
artist = songs[currentSong].artist;
title = songs[currentSong].title;
playSong(src, title, artist, image);
break;
case "next":
currentSong =
currentSong + 1 > songs.length - 1 ? 0 : currentSong + 1;
list_items.forEach((e, index) => {
e.classList.remove("active");
});
list_items[currentSong].classList.add("active");
var off =
$(".item.active").offset().top - $("#song-list").offset().top;
$("#song-list").scrollTop(off);
image = songs[currentSong].image;
src = songs[currentSong].song;
artist = songs[currentSong].artist;
title = songs[currentSong].title;
playSong(src, title, artist, image);
break;
default:
break;
}
});
});
function playSong(src, artist, title, image) {
document.querySelector(
".artist-img-bg"
).style.backgroundImage = `url(${image})`;
audio.src = `./music/${src}`;
artist_img.src = `${image}`;
artist_img.classList.add("rotate-image");
song_title.innerText = `${artist} - ${title}`;
document.querySelector("#title").classList.add("song-title");
play.classList.remove("play");
play.classList.add("pause");
play.dataset.type = "pause";
audio.play();
}
$(document).on("click", ".button-overlay", function () {
if (audio.currentTime > 0) {
this.classList.remove("play");
this.classList.add("pause");
audio.play();
}
});
});
body {
margin: 0;
padding: 0;
z-index: 101;
}
.container {
padding: 15px;
margin: 0 auto;
width: 100%;
background: linear-gradient(#042a45, #7295ae);
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
z-index: 100;
}
.music-player {
width: 400px;
height: auto;
background: linear-gradient(to top,#042a45, #7295ae);
border-radius: 1em;
display: flex;
align-items: center;
flex-direction: column;
padding: 10px;
}
#top-img-container {
width: 100%;
min-height: 200px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.artist-img-bg {
filter: blur(3px);
-webkit-filter: blur(3px);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: absolute;
z-index: 1;
width: 100%;
min-height: 200px;
}
.artist-image {
margin-top: 20px ;
max-height: 300px;
width: 150px;height: 150px;max-width: 300px;
border-radius: 50%;
box-shadow: 0 0 10px 10px #154275;
position: absolute;
z-index: 999;
}
.rotate-image {
animation:rotate 100s infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(365deg);
}
}
.controls {
width: 100%;
margin-bottom: 2em;
margin-top: 1em;display: flex;
justify-content:space-around;
}
.icon {
color:aliceblue;
font-size: 1.5em !important;
cursor: pointer;
transition: transform .2s ease-in-out;
}
.icon:hover {
transform: scale(1.2);
}
.song-title-container {
position: relative;
overflow: hidden;
width: 90%;
margin: 10px auto 0;
}
.song-title {
margin: 10px 0 15px;
text-align: center;
color: #ffffff;
font-weight: 700;animation: song_title 7s infinite ease-in-out 3s;
animation-timing-function: linear;
position: relative;
}
#keyframes song_title {
0% {
left:0%;
} 49% {
left: -100%;
visibility: hidden;
} 50% {
left: 200%;
visibility: hidden;
}
51% {
left: 100%;
visibility: visible;
}
100% {
visibility: visible;
left: 0%
}
}
#timer, #song-list .header, #song-list .description {
color: white;
}
#playlist-title {
color: white;
width: 100%;
margin-left: 20px;
}
#song-list {
height: 200px;overflow-y: scroll;width: 95%;
background-color: #16415f;
border-radius: 1em;
}
#song-list .item {
cursor: pointer;
padding: 10px;
position: relative;
}
.item.active {
background-color: #38596e;
box-shadow: 0px 2px 10px #07141d;
}
.list-image {
position: relative;
display: inline;
}
.content .icon {
position: absolute;
left: 20px;
top: 20px;
visibility: hidden;
}
.item.active .content .button-overlay {
visibility: visible;
}
#song-list .avatar {
width: 3em;
height: 3em;
}
#song-list .item:hover {
background-color: #3a5a6f;
}
#equalizer {
position: absolute;
right: 5px;top: 50%;transform: translateY(-50%);width: 40px;
max-height: 20px;
visibility: hidden;
display: flex;
justify-content: space-evenly;
}
.item.active .content #equalizer {
visibility: visible;
}
#bar1, #bar2, #bar3, #bar4 {
background-color: #1aa303;
width: 2px;
}
#bar1 {
animation: bar1 1.2s linear infinite;
}
#bar2 {
animation: bar2 0.9s linear infinite;
}
#bar3 {
animation: bar2 1.4s linear infinite;
}
#bar4 {
animation: bar4 1s linear infinite;
}
#keyframes bar1 {
0% {
height: 5px;
}
50% {
height: 10px;
}
100% {
height: 5px;
}
}#keyframes bar2 {
0% {
height: 10px;
}
50% {
height: 5px;
}
100% {
height: 10px;
}
}
#keyframes bar3 {
0% {
height: 5px;
}
50% {
height: 10px;
}
100% {
height: 5px;
}
}
#keyframes bar4 {
0% {
height: 10px;
}
50% {
height:5px;
}
100% {
height: 10px;
}
}
<html lang="en">
<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>Music Player</title>
<link rel="stylesheet" href="./main.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="ui-container container">
<div class="music-player">
<div id="top-img-container">
<div class="artist-img-bg"></div>
<img
src="https://i.pinimg.com/originals/1d/3a/26/1d3a2651f9ad02fb12aae08f618a2847.png"
class="artist-image"
alt="on and on"
/>
</div>
<div class="song-title-container">
<h3 id="title"></h3>
<div id="time-progress" class="ui tiny progress">
<div style="min-width: 1%" class="bar"></div>
<div id="timer" class="label">-00:00-</div>
</div>
</div>
<div class="controls">
<i data-type="prev" id="prev" class="icon backward"></i>
<i data-type="play" id="play" class="icon play circle outline"></i>
<i data-type="next" id="pause" class="icon forward"></i>
</div>
<h3 id="playlist-title">Playlist - Best of 2021</h3>
<div id="song-list" class="ui middle aligned divided list"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
It works fine in desktop browsers but it does not work in mobile devices. What am I doin wrong?

How to make a semi circle chart in react?

I am having a data like,
{
"initial": {
"unit": "GB",
"value": 2
},
"remaining": {
"unit": "GB",
"value": 0.2
},
"type": "Internet",
}
Where the initial value is total gb of mobile data and remaining consists of the remaining data available.
Requirement:
My requirement is like the below image,
I have tried with pure HTML and CSS like here, But issue here is that everything is hard coded .. So if we have some percentage then we need to adjust the css class .sc-percentage accordingly
body { background-color:#555888; font-family:sans-serif; color:#fff; text-align:center }
code { display:inline-block; max-width:600px; padding:80px 0 0; line-height:1.5; font-family:monospace; color:#ccc }
.sc-gauge { width:200px; height:200px; margin:200px auto; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#fff; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#555888; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#00aeef; }
.sc-percentage { transform:rotate(25deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-value { position:absolute; top:50%; left:0; width:100%; font-size:48px; font-weight:700 }
<code>
To change the current value of the Gauge, you need to change 88 to something else in HTML section and update the .sc-percentage rotate value from 158deg to something else.
This will be a part of the Simple Chart library.
</code>
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">0.2</span>
</div>
<span class="sc-min">0</span>
<span class="sc-max">2</span>
</div>
I would like to form a chart exactly as like given in the above image.
I am open to implement any kind of library like chartjs, d3, apex etc.., that supports this feature of having semi circle..
As I am a beginner with this scenario, kindly help me to resolve the feature as I am stuck for very long time with this.
A big thanks in advance..

React component:
const data = {
"initial": {
"unit": "GB",
"value": 2
},
"remaining": {
"unit": "GB",
"value": 0.9
},
"type": "Internet",
};
function SemiCircleChart({min, max, value}){
const angle = (value / max) * 180;
const style = {'--angle': angle + 'deg'};
return (
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage" style={style}></div>
<div class="sc-mask"></div>
<span class="sc-value">{ value }</span>
</div>
<span class="sc-min">{ min }</span>
<span class="sc-max">{ max }</span>
</div>)
}
ReactDOM.render(
<SemiCircleChart
min={0}
max={data.initial.value}
value={data.remaining.value}
/>,
document.querySelector('#app')
);
:root {
--angle: 90deg;
}
body {
background-color: #555888;
font-family: sans-serif;
color: #fff;
text-align: center
}
code {
display: inline-block;
max-width: 600px;
padding: 0;
line-height: 1.5;
font-family: monospace;
color: #ccc
}
.sc-gauge {
width: 200px;
height: auto;
margin: 20px auto;
}
.sc-background {
position: relative;
height: 100px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 150px 150px 0 0;
overflow: hidden;
text-align: center;
}
.sc-mask {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
height: 80px;
background-color: #555888;
border-radius: 150px 150px 0 0
}
.sc-percentage {
position: absolute;
top: 100px;
left: -200%;
width: 400%;
height: 400%;
margin-left: 100px;
background-color: #00aeef;
}
.sc-percentage {
transform: rotate(var(--angle));
transform-origin: top center;
}
.sc-min {
float: left;
}
.sc-max {
float: right;
}
.sc-value {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 48px;
font-weight: 700
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<code>
This will be a part of the Simple Chart library.
</code>
<div id="app"></div>
Old answer:
You just need to use a CSS variable:
Declare a variable like:
:root{
--angle: 90deg;
}
and use it like:
.sc-percentage {
transform: rotate(var(--angle));
transform-origin: top center;
}
You can update this variable as style attribute from JavaScript:
element.style.setProperty("--angle", '180deg');
180deg would be full arc.

Here's an example with animation: https://codesandbox.io/s/angry-moon-t08hp?file=/src/App.js
You can set style variables in React, which is what this Codesandbox does:
<div
class="sc-percentage"
style={{ transform: `rotate(${(percent / 100) * 180}deg)` }}
></div>
And it uses a setInterval to toggle the percent.
The animation between the two percents is achieved simply with a CSS transition property:
.sc-percentage {
transform: rotate(25deg);
transition: transform 1s;
transform-origin: top center;
}

Creating 2 buttons that reveal content from 2 different direction

I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions.
Example:
When a user click on smt, the content will open from the left.
When a user click on mi, the content will open from the right.
So far, I managed to do the smt part only as I don't know how to make the "mi" part work.
Below is my code:
Style:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 60px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 650px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
SMT button:
<div id="myNav" class="overlay">
×
<div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>
JavaScript:
<script>
function openNav() {
document.getElementById( "myNav" ).style.width = "100%";
}
function closeNav() {
document.getElementById( "myNav" ).style.width = "0%";
}
</script>
How can I re-use the same code for the second button?

I think you are looking for this.. May be this could hep you
I use jquery-ui, function slide to achieve desire effect
Using single content
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'right'},1000);
} else {
$('#userNav').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div id="userNav">User Area</div>
Using separate content (i use flex to make both content show inline you can just remove class main-content to show them on separate line as block)
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav1').is(':hidden')) {
$('#userNav1').show('slide',{direction:'right'},1000);
} else {
$('#userNav1').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
.area{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
.main-content {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div class="main-content">
<div class="area" id="userNav">User Area 1</div>
<div class="area" id="userNav1">User Area 2</div>
</div>

You can pass the Id to the function like this:
onclick="openNav("myNav1")"
And if you need to hide element, You can use: display: "none"
<script>
function openNav(id) {
document.getElementById(id).style.display = "block";
}
function closeNav(id) {
document.getElementById(id).style.display = "none";
}
</script>

Just need to do this for the code:
Add "2" to "openNav", "myNav2", "closeNav2"
< script>
function openNav2() {
document.getElementById( "myNav2" ).style.width = "100%";
}
function closeNav2() {
document.getElementById( "myNav2" ).style.width = "0%";
}
</script>
Same for the button code, add "2" to "myNav", "openNav", "closeNav"
<div id="myNav" class="overlay">
×
<div class="overlay-content">MI</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px;
left:300px;" onclick="openNav()">MI</span>

using same button for back

I have some javascript/CSS that hid/show content and some animation. It all works marvelously with no issues as far as functionality, however, I want to add a feature where the same picture/button that I click to run the script can again be used to run the same script in reverse to go back to the original state. See code below.
/* Portfolio */
.portfolio {
grid-area: portfolio;
width: 100%;
}
.portfolio {
display: grid;
background: #F1F1F1;
grid-template-rows: repeat(1, 100%);
grid-gap: 10px;
grid-template-areas: "portfolio-header";
align-items: start;
text-align: center;
min-height: 1000px;
}
.portfolio-header {
width: 100%;
text-align: center;
margin-top: 64px;
margin-bottom: -300px;
}
.portfolio-container {
min-height: 500px; /* temporary */
padding: 0 20px;
position: relative;
}
.portfolio-container .portfolio-picture {
left: 0;
position: absolute;
transition: all ease-in .3s; /* MAGIC */
top: 0;
width: 25%;
}
.portfolio-container .portfolio-picture img {
max-width: 100%;
}
.portfolio-container .portfolio-picture.portfolio-picture-1 {}
.portfolio-container.portfolio-active-2 .portfolio-picture-1,
.portfolio-container.portfolio-active-3 .portfolio-picture-1,
.portfolio-container.portfolio-active-4 .portfolio-picture-1,
.portfolio-container.portfolio-active-1 .portfolio-picture-2,
.portfolio-container.portfolio-active-3 .portfolio-picture-2,
.portfolio-container.portfolio-active-4 .portfolio-picture-2,
.portfolio-container.portfolio-active-1 .portfolio-picture-3,
.portfolio-container.portfolio-active-2 .portfolio-picture-3,
.portfolio-container.portfolio-active-4 .portfolio-picture-3,
.portfolio-container.portfolio-active-1 .portfolio-picture-4,
.portfolio-container.portfolio-active-2 .portfolio-picture-4,
.portfolio-container.portfolio-active-3 .portfolio-picture-4 {
opacity: 0;
pointer-events: none;
}
.portfolio-container .portfolio-picture.portfolio-picture-2 { transform: translate(100%,0); }
.portfolio-container .portfolio-picture.portfolio-picture-3 { transform: translate(200%,0); }
.portfolio-container .portfolio-picture.portfolio-picture-4 { transform: translate(300%,0); }
.portfolio-container .portfolio-content {
box-sizing: border-box;
opacity: 0;
padding-left: 30px;
position: absolute;
right: 0;
top: 0;
transform: translate(0,100%);
transition: all ease-in .3s; /* MAGIC */
width: 75%;
}
.portfolio-container.portfolio-active-2 .portfolio-picture.portfolio-picture-2,
.portfolio-container.portfolio-active-3 .portfolio-picture.portfolio-picture-3,
.portfolio-container.portfolio-active-4 .portfolio-picture.portfolio-picture-4 {
transform: translate(0,0);
}
.portfolio-container.portfolio-active-1 .portfolio-content.portfolio-content-1,
.portfolio-container.portfolio-active-2 .portfolio-content.portfolio-content-2,
.portfolio-container.portfolio-active-3 .portfolio-content.portfolio-content-3,
.portfolio-container.portfolio-active-4 .portfolio-content.portfolio-content-4 {
opacity: 1;
pointer-events: auto;
transform: translate(0,0);
}
.portfolio-back-button {
display: none;
}
.portfolio-back-button.portfolio-back-button-visible {
display: inline-block;
}
.port-content {
text-align: center;
}
.port-cont {
max-width: 35%;
text-align: justify;
background-image: url("assets/img/pattern.png");
color: #808080;
font-weight: bold;
text-transform: uppercase;
margin-right: 40%;
padding: 10px;
margin-bottom: 50px;
box-sizing: border-box;
}
function clearSelection() {
document.querySelector('.portfolio-container').classList.remove('portfolio-active-1', 'portfolio-active-2', 'portfolio-active-3', 'portfolio-active-4');
document.querySelector('.portfolio-back-button').classList.remove('portfolio-back-button-visible');
}
function selectPortfolio(which) {
clearSelection();
document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
}
<div class="portfolio-container">
<div class="portfolio-content portfolio-content-1 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-2 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-3 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-4 port-cont">
<p>some text</p>
</div>
<div class="portfolio-picture portfolio-picture-1">
<img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-2">
<img src="assets/img/portfolio/beardedrazorback/beardedrazorback_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-3">
<img src="assets/img/portfolio/theord/theord_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-4">
<img src="assets/img/portfolio/21divine/21divine_small.png" alt="Corinth Designs">
</div>
<div class="port-back portfolio-back-button">
Back <i class="fas fa-angle-double-right"></i>
</div><!-- back button -->

If you modify the selectPortfolio function to the following, you can use a closure and an internal state variable to switch back and forth.
https://codepen.io/anon/pen/gKbjQj?editors=0010
const selectPortfolio = (() => {
let back = false;
return (which) => {
// clearSelection();
if (back) {
// document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
console.log(back, 'portfolio-back-button-visible');
} else {
// document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
console.log(back, 'portfolio-active-');
}
back = !back;
}
return back;
})();
selectPortfolio();
selectPortfolio();
selectPortfolio();
selectPortfolio();
// true "portfolio-back-button-visible"
// false "portfolio-active-"
// true "portfolio-back-button-visible"
// false "portfolio-active-"

Transition background image on hover

I'm trying to find a way to transition from one background image to another when I hover a div.
Here's a demo:
codepen demo
Here's my code
$('#cat').hover(function(){
$('.image').css('background-image',
"url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
Any ideas?

First, you are missing IDs for your <h1>, because your JQuery select elements with ID cat, dog and rabbit.
seccond, what you should change is background of '.bg' class, not '.image' class
HTML
<h1 id="cat">CAT</h1>
<h1 id="dog">DOG</h1>
<h1 id="rabbit">RABBIT</h1>
JS
$('#cat').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
$('#dog').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')");
});
$('#rabbit').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')");
});
demo : https://jsfiddle.net/z2hevmya/

var images = {
"cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb',
"dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a',
"rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859'
};
$('.menu').hover(function(){
var img = $(this).attr("id");
$('.bg').css('background-image', "url(" + images[img] + ")");
});
body {
margin: 0;
padding: 0;
}
h1 {
z-index: 100;
color: #456;
font-family: sans-serif;
position: relative;
opacity: .5;
transition: all ease 1s;
cursor: pointer;
height: 1em;
padding: .5em;
margin: 0;
}
h1:hover {
opacity: 1;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>
<h1 id="cat" class="menu">CAT</h1>
<h1 id="dog" class="menu">DOG</h1>
<h1 id="rabbit" class="menu">RABBIT</h1>

<script language="javascript">
$(function () {
$('.mDiv').hover(function () {
$(this).addClass('divHover');
}, function () {
$(this).removeClass('divHover');
}
);
});
</script>
<style type="text/css">
.mDiv {
height: 300px;
width: 200px;
background: darkgrey;
border: solid 1px #ccc;
float: left;
margin-right: 10px;
}
.divHover{
// background-image: you " img url";
background: greenyellow;
}
</style>
<div id="d">
<div class="mDiv">Test</div>
</div>