How to Ensure Saved Click Coordinates Can Be Reload to the Same Place, Even If the Page Layout Changed

How do I make a div element stay on a same position as before after page reload?

To fix this, you can use localStorage.

Note that some super old browser don't support localStorage, but that is not a big thing, almost nobody has them.

Let me know if it works. :)

Here is a fixed version (CSS stays the same) :

HTML :

<div class="hero">
    <div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
                <button type="button" id="loginButton" class="toggle-btn" onclick="login()">Login</button> 
                <button type="button" id="registerButton" class="toggle-btn" onclick="register()">Register</button>
        </div>
        <div class="social-icons">
            <img src="images/fb.png">
            <img src="images/gp.png">
            <img src="images/tw.png">
        </div>
        
        <form method="POST" action="val_log.php" id="login" class="input-group">
            <input name="Lname" type="text" class="input-field" placeholder="User ID" minlength="4" maxlength="15">
            <input name="Lpassword" type="password" class="input-field" placeholder="Enter Password" minlength="5" maxlength="60">
            <input name="Lrempass" type="checkbox" class="check-box"><span> Remember Password</span>
            <button name="Lsubmit" type="submit" class="submit-btn"> Login </button> 
        </form>
        <form method="POST" action="val_reg.php" id="register" class="input-group">
            <input name="Rmail" type="email" class="input-field" placeholder="Email ID" >
            <input name="Rname" type="text" class="input-field" placeholder="User ID" minlength="4" maxlength="15">
            <input name="Rpassword" type="password" class="input-field" placeholder="Enter Password" minlength="5" maxlength="60">
            <input name="REpassword" type="password" class="input-field" placeholder="Re-Enter Password" maxlength="60">
            <input name="Rterms" value="selected" type="checkbox" class="check-box" ><span> I agree to the terms & conditions</span>
            <button name="Rsubmit" type="submit" class="submit-btn" > Register  </button>
        </form>
    </div>        
</div>

JS :

var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");

console.log(x)
    
function register(){
    x.style.left = "-400px";
    y.style.left = "50px";
    z.style.left = "110px";
}
function login(){
    x.style.left = "50px";
    y.style.left = "450px";
    z.style.left = "0";
}

// Added code

if(localStorage){

    if(localStorage.getItem('rememberButtonChoice')){

        let getChoice = localStorage.getItem('rememberButtonChoice');

        if(getChoice == "loginChoice"){

        login();

    }

    else{

        register();

        }

    }

}

let loginButton = document.getElementById('loginButton');

let registerButton = document.getElementById('registerButton');

loginButton.addEventListener('click', function(){

    if(localStorage){

        localStorage.setItem("rememberButtonChoice", 'loginChoice');

    }

});

registerButton.addEventListener('click', function(){

    if(localStorage){

        localStorage.setItem("rememberButtonChoice", 'registerChoice');

    }

});

Refresh Page and Keep Scroll Position

UPDATE

You can use document.location.reload(true) as mentioned below instead of the forced trick below.

Replace your HTML with this:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body { 
                background-image: url('../Images/Black-BackGround.gif');
                background-repeat: repeat;
            }
            body td {
               font-Family: Arial; 
               font-size: 12px; 
            }
            #Nav a { 
                position:relative; 
                display:block; 
                text-decoration: none; 
                color:black; 
            }
        </style>
        <script type="text/javascript">
            function refreshPage () {
                var page_y = document.getElementsByTagName("body")[0].scrollTop;
                window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
            }
            window.onload = function () {
                setTimeout(refreshPage, 35000);
                if ( window.location.href.indexOf('page_y') != -1 ) {
                    var match = window.location.href.split('?')[1].split("&")[0].split("=");
                    document.getElementsByTagName("body")[0].scrollTop = match[1];
                }
            }
        </script>
    </head>
    <body><!-- BODY CONTENT HERE --></body>
</html>

How to save section position in one page website after browser refresh with JavaScript?

You can do something like this:

     const currentURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
     let sections = document.querySelectorAll('.sec')
     sections.forEach(function(item){
        window.addEventListener("scroll",()=>{
            if(isScrolledIntoView(item)){
                window.history.replaceState("", item.id , `${currentURL}#${item.id}`);
            }            
        })
     })

// this is not my code, found it in stackoverflow
     function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

      .sec{
        width: 100%;
        height:400px;
        border: 1px solid black;
        display: flex;
        
      }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page Title</title>
  <meta name="description" content="My Page Description">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->

</head>
<body>
  <section class="home-section sec" id="sec1"> section1 </section>
  <section class="about-section sec" id="sec2"> section2 </section>
  <section class="gallary-section sec" id="sec3" > section3 </section>
  <section class="project-section sec" id="sec4"> section4 </section>
  <section class="testimonial-section sec" id="sec5"> section5 </section>
  <section class="contact-section sec" id="sec6"> section6 </section>
  <!-- <script src="js/scripts.js sec" id="sec7"></script> -->

</body>
</html>

Save a SVG click location and recreate it on reload

The transformed points that you generate for the marker in step 1 are the ones you want to save. Ie. transformed.x and transformed.y. What you were doing there was converting the screen space coordinates of the click, to SVG user space coordinates.

Those SVG coordinates are now independent of how the SVG is zoomed and/or panned. Just use those coordinates. Place your marker there. You shouldn't need to do any further transformations.

var marker = snap.image("myMarkerUrl", mySavedX, mySavedY, 8, 8)
group.add(marker);

What’s the best way to reload / refresh an iframe?

document.getElementById('some_frame_id').contentWindow.location.reload();

be careful, in Firefox, window.frames[] cannot be indexed by id, but by name or index