My goal is I'm trying to keep my element location when adjusting my browser and or changing to a larger display.
I have built a little sliding function that when I click each button my element .trans1 goes back and forth between the buttons.
The problem I'm having is my trans1 element goes off the button when resizing the browser, I hope that all makes sense and someone can help.
const tranImg= document.getElementById('trans');
window.onload= trans;
// Make the trans move back and forth.
function trans(){
console.log('test click')
tranImg.style.transform = 'translatex(0%)';
const xhr = new XMLHttpRequest();
xhr.open("GET", "splash.html");
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
document.querySelector(".app").innerHTML = xhr.response;
}
};
xhr.send();
};
// Make the trans move back and forth.
function trans2(){
console.log('hey trans2')
tranImg.style.transform = 'translatex(180%)';
const xhr = new XMLHttpRequest();
xhr.open("GET", "website.html");
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
document.querySelector(".app").innerHTML = xhr.response;
}
};
xhr.send();
};.trans-container {
position: relative;
top: 220px;
width: 100%;
height: auto;
}
#make-trans {
display: flex;
position: relative;
width: 100%;
}
.trans1 {
z-index: 980;
margin-top: 3px;
left: 11%;
position: relative;
top: 0.2px;
transition: transform 0.8s;
} <div class="selectBtns">
<button class="btns" id="btn2" onclick="trans()">Landing page</button>
<button class="btns" onclick="trans2()">Website</button>
</div>
<div class="trans-container">
<div id="make-trans">
<img id="trans" class="trans1" src="./images/svg-path (1).svg" alt="transition tab" width="400px">
</div>
<div class="xml-change">
<div class="app"></div>
</div>
</div>