Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Attaching the page information to URLs

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 113
    Comment on it

    This post will help you to attach the page information to URLs, lets assume that If you want to store a small fragment of information to the URLs in such a way that the information should be available to anyone who is accessing the page.
    The information can be passed as a page fragment, for this we can use javaScript to add a page fragment and encode the data as parameters in a query string, which starts with a question mark, followed by the parameters passed as key/value pairs separated by equal signs, and separated from each other by ampersands.

    In the example, we just create a static state link.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Remember me?</title>
        <style>
        #square
        {
        position: absolute;
        left: 0;
        top: 100px;
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        background-color: #ffff00;
        }
        div p
        {
        margin: 10px;
        }
        </style>
        <script>
        // found at http://www.netlobo.com/url&#95;query&#95;string&#95;javascript.html
        function getQueryParam( name ) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );    
        if( results == null )
        return null;
        else
        return results[1];
        }
        window.onload=function() {
        // set up button
        document.getElementById("move").onclick=moveSquare;
        document.getElementById("size").onclick=resizeSquare;
        document.getElementById("color").onclick=changeColor;
        var move = getQueryParam("move");
        if (!move) return;
        var size = getQueryParam("size");
        var color = getQueryParam("color");
        // update element
        var square = document.getElementById("square");
        square.style.left=move + "px";
        square.style.height=size + "px";
        square.style.width=size + "px";
        square.style.backgroundColor="#" + color;
        // update data-state values
        document.getElementById("move").setAttribute("data-state",move);
        document.getElementById("size").setAttribute("data-state",size);
        document.getElementById("color").setAttribute("data-state",color);
        }
        function updateURL () {
        var move = document.getElementById("move").getAttribute("data-state");
        var color = document.getElementById("color").getAttribute("data-state");
        var size = document.getElementById("size").getAttribute("data-state");
        var link = document.getElementById("link");
        var path = location.protocol + "//" + location.hostname + location.pathname +
        "?move=" + move + "&size=" + size + "&color=" + color;
        link.innerHTML="<p><a href='" + path + "'>static state link</a></p>";
        }
        function moveSquare() {
        var move = parseInt(document.getElementById("move").getAttribute("datastate"));
        move+=100;
        document.getElementById("square").style.left=move + "px";
        document.getElementById("move").setAttribute("data-state", move);
        updateURL();
        }
        function resizeSquare() {
        var size = parseInt(document.getElementById("size").getAttribute("data-state"));
        size+=50;
        var square = document.getElementById("square");
        square.style.width=size + "px";
        square.style.height=size + "px";
        document.getElementById("size").setAttribute("data-state",size);
        updateURL();
        }
        function changeColor() {
        var color = document.getElementById("color").getAttribute("data-state");
        var hexcolor;
        if (color == "0000ff") {
        hexcolor="ffff00";
        } else {
        hexcolor = "0000ff";
        }
        document.getElementById("square").style.backgroundColor="#" +
        hexcolor;
        document.getElementById("color").setAttribute("data-state",hexcolor);
        updateURL();
        }
        </script>
    </head>
    <body>
        <button id="move" data-state="0">Move Square</button>
        <button id="size" data-state="100">Increase Square Size</button>
        <button id="color" data-state="#ffff00">Change Color</button>
        <div id="link"></div>
        <div id="square">
            <p>This is the object</p>
        </div>
    </body>
    </html>
    


    According to the example when each button is clicked, the div element will be adjusted, and the newly applied CSS value will be stored with an appropriate button.
    When the state of the page will change, a link in the page will get updated and the changes to the page will be reflect. The actual window.location property and even the window.location.search property will not change. Now you after this you can reload the page and have the script restore the page to the state in the URL.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: