Introduction: How to Put a Fancy (and Flexible) Redirect on Your Site

if (viewer.NeedsFlexibleRedirect = true || viewer.NeedsToBeFancy = true) {



	Instructables.Search("//howto/have+a+redirect+on+your+website/");
	
	return new Uri("instructables.com/id/Have-a-Fancy-and-Flexible-Redirect-on-your-Site");
	ShowUserHowto(PutRedirect);

	// i am very prideful indeed

}

Oh, hi there!

Have you ever wanted a fancy redirect for your website? Only when you created one page with the HTML "meta" tag you realized you had to create a new page for every redirect you wanted? and you realized there isn't any way you could reuse that redirect page?

Well, you're in the same boat I was a week ago. and I'll let you in on a little secret: there is a solution to every problem. This is what this instructable is about.

What you need:

  • Your website
  • some basic coding (HTML, Javascript, jQuery, CSS) skills
  • A good editor
  • A Computer

And Finally:

  • Your brains

What we are aiming for:

We want an HTML page that redirects to another site. It must be reusable, and the only way for a page to be reusable is to be able to pass a variable to it. Well, I did some research on that - and found that the only way to do that is to add a "?url=http://redirect-website-here.com/" to the end of the URL. Then, you can use Javascript and jQuery to read the values. Say the URL of the redirect page is "https://www.your-nowhere-town-site.com/redirect.html" and you wanted to redirect the user to "https://www.cnn.com/". You would send the user to "https://www.your-nowhere-town-site.com/redirect.html?url=https://cnn.com/". (Notice the "?url=https://cnn.com/" at the end) When the user clicks the link, it will take him to the redirect page. There, based on a random number, at the head of the page, there will be either "Loading . . ." or "Beep Beep Boop". under that will be "0%" will increase to "100%". And under that, there will be a progress bar, which, depending on the browser the user is viewing, will appear blue (Edge) or multicolored (Chrome/Safari). When both the progress bar and the 0% has increased to 100%, the page will "freeze" for three seconds, then a Javascript/jQuery script will read the values and redirect the page to cnn.com.

Step 1: Demo Comes First - to Convince You This Is Really Worth It

This page is configured to redirect to Fox News.

https://cortanabatch.zohosites.com/files/WebPages/...

Step 2: For Copycats...

...who like to just copy-paste things, who like to get things done the quick way, not necessarily the creative way....

You can copy-paste all of this:

<!DOCTYPE html><html><body> <style>progress[value]::-webkit-progress-value::before{content: '80%'; position: absolute; right: 0; top: -125%;}progress[value]::-webkit-progress-value::after{content: ''; width: 6px; height: 6px; position: absolute; border-radius: 100%; right: 7px; top: 7px; background-color: white;}progress{-webkit-appearance: none; appearance: none; align-self: center; text-align: center; -webkit-animation: animate-stripes 5s linear infinite; animation: animate-stripes 5s linear infinite;}#gg{-webkit-appearance: none; appearance: none; align-self: center; text-align: center; -webkit-animation: animate-stripes 5s linear infinite; animation: animate-stripes 5s linear infinite;}progress[value]{/* Reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of default border in Firefox. */ border: none; /* Dimensions */ width: 250px; height: 20px; /* For IE10 */ color: blue;}progress[value]::-moz-progress-bar{background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66% ), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25) ), -moz-linear-gradient( left, #09c, #f44 ); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%;}progress[value]::-webkit-progress-value{background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%;}@-webkit-keyframes animate-stripes{100%{background-position: -100px 0px;}}@keyframes animate-stripes{100%{background-position: -100px 0px;}}.progress-bar{background-color: whiteSmoke; border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; width: 250px; height: 20px; position: relative; display: block;}.progress-bar > span{background-color: blue; border-radius: 2px; display: block; text-indent: -9999px;}@media screen and (min-width: 480px){.mainframe{padding-left: 150px; padding-top: 40px; padding-right: 225px;}.textframe{padding-left: 10px; padding-top: 20px; padding-right: 15px;}.container{border: none; padding-left: 10px}}@media screen and (min-width: 1366px){.imgcontainer{text-align: center; margin: 24px 0 12px 0; position: center; height: 400px; width: 500px; overflow: hidden; border: thick; border: solid;}.imgcontainer img{height: 300px; width: 500px; -webkit-transition: all 5s ease; -moz-transition: all 5s ease; -ms-transition: all 5s ease; transition: all 5s ease;}.imgcontainer img:hover{width: 900px; height: 700px;}h3{font-family: Verdana; color: black; text-align: center;}h5{font-family: Verdana; color: gray; text-align: justify;}.mainframe{padding-left: 350px; padding-top: 40px; padding-right: 425px;}.textframe{padding-left: 20px; padding-top: 20px; padding-right: 25px;}.container{border: dashed; padding-left: 20px}}</style> <br/> <br/> <br/> <div class="mainframe"> <div class="container" style="text-align:center;"> <br/> <br/><br/> <br/> <div class="textframe"> <h3 id="h" style="text-align:center"></h3> <script>if (Math.random() >=0.5){ document.getElementById("h").innerHTML="Beep Beep Boop";}else if (Math.random() <=0.5 ){document.getElementById("h").innerHTML="Loading . . .";}</script> <h3 id="gg">0%</h3> <br/> <br/> <progress id="g" class="y" value="0" max="100" style="align-self:center; text-align:center;"> <div class="progress-bar"> <span style="width: 80%;">Progress: 80%</span> </div></progress> </div><br/> <br/> <br/> <br/> </div></div><script>window.onload=function(){};var progval=0; var myVar=setInterval(Prog, 80); function Prog(){progval++; document.getElementById("gg").innerHTML=progval + "%"; document.getElementById("g").value=progval; if (progval==100){clearInterval(myVar); setTimeout(Check, 3000);}}function Check(){if (progval==100){clearInterval(myVar); var ftimeout=setTimeout(null, 5000); var parameters=location.search.substring(1).split("&"); var temp=parameters[0].split("="); l=unescape(temp[1]); if (l=="undefined"){window.location="https://google.com";}else{window.location=l;}}else{}}</script><div id="footerBar" style="display:none;font: 13px Arial,Helvetica,sans-serif; overflow: hidden; background:rgba(255, 255, 255, 0.3); padding: 3px 5px;"><span style="float:right"> </span></div></body></html>

It is pretty magical if I have to say so myself. Just upload it to a new page on your site, and you are done!

Step 3: Time to Start

The first step is to add a progress element:

 <progress></progress>

Now let's build on that.

   <h3 id="gg">0%</h3>
                <br />
                <br />   

   <progress id="g" class="y" value="0" max="100" style="align-self:center; text-align:center;">
          <div class="progress-bar">
                <span style="width: 80%;">Progress: 80%</span>
          </div>
   </progress>

Step 4: Adding Javscript

Let's add some code, that decides whether to put "Loading" or "Beep Beep Boop": [Just add it under the progress element.]

                <script>

                    if (Math.random() >= 0.5) {




                        document.getElementById("h").innerHTML = "Beep Beep Boop";

                    }

                    else if (Math.random() <= 0.5 ) {

                        document.getElementById("h").innerHTML = "Loading . . .";

                    }

                </script>


Yaaaaaaaaay.

Now let's add the script that is the Real stuff: the thing that is responsible for redirecting: [Just add it under the other code]

 <script>

window.onload = function() {


};

var progval = 0;

        var myVar = setInterval(Prog, 80);




        function Prog() {

            progval++;
            document.getElementById("gg").innerHTML = progval + "%";
            document.getElementById("g").value = progval;
            if (progval == 100) {

                clearInterval(myVar);

                setTimeout(Check, 3000);
            }



        }

        function Check() {
            if (progval == 100) {
                clearInterval(myVar);

                var ftimeout = setTimeout(null, 5000);
                var parameters = location.search.substring(1).split("&");
                var temp = parameters[0].split("=");
                l = unescape(temp[1]);


                if (l == "undefined") {
			
			window.location = "about:blank";
                    

                }

                else {


                    window.location = l;
                }
            }

            else {




            }



        }




    </script>


There!

Step 5: Styling

I wouldn't say the picture above looks too good. What did we miss?

*Think, think, think.*

Jquery, Bootstrap? Balloon.css? Oh! that's it! Styles!!!


We forgot Styles!



Add the following above all the previous code:

    <style>
        progress[value]::-webkit-progress-value::before {
            content: '80%';
            position: absolute;
            right: 0;
            top: -125%;
        }

        progress[value]::-webkit-progress-value::after {
            content: '';
            width: 6px;
            height: 6px;
            position: absolute;
            border-radius: 100%;
            right: 7px;
            top: 7px;
            background-color: white;
        }

        progress {
            -webkit-appearance: none;
            appearance: none;
            align-self: center;
            text-align: center;
            -webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;
        }

        #gg {
            -webkit-appearance: none;
            appearance: none;
            align-self: center;
            text-align: center;
            -webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;
        }


        progress[value] {
            /* Reset the default appearance */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /* Get rid of default border in Firefox. */
            border: none;
            /* Dimensions */
            width: 250px;
            height: 20px;
            /* For IE10 */
            color: blue;
        }

            progress[value]::-moz-progress-bar {
                background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66% ), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25) ), -moz-linear-gradient( left, #09c, #f44 );
                border-radius: 2px;
                background-size: 35px 20px, 100% 100%, 100% 100%;
            }

            progress[value]::-webkit-progress-value {
                background-color: #eee;
                border-radius: 2px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
                background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44);
                border-radius: 2px;
                background-size: 35px 20px, 100% 100%, 100% 100%;
            }

        @-webkit-keyframes animate-stripes {
            100% {
                background-position: -100px 0px;
            }
        }

        @keyframes animate-stripes {
            100% {
                background-position: -100px 0px;
            }
        }


        .progress-bar {
            background-color: whiteSmoke;
            border-radius: 2px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
            width: 250px;
            height: 20px;
            position: relative;
            display: block;
        }

            .progress-bar > span {
                background-color: blue;
                border-radius: 2px;
                display: block;
                text-indent: -9999px;
            }
    </style>

@media screen and (min-width: 480px) {
    .mainframe {
        padding-left: 150px;
        padding-top: 40px;
        padding-right: 225px;
    }

    .textframe {
        padding-left: 10px;
        padding-top: 20px;
        padding-right: 15px;
    }

    .container {
        border: none;
        padding-left: 10px
    }
}


    @media screen and (min-width: 1366px) {

        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: center;
            height: 400px;
            width: 500px;
            overflow: hidden;
            border: thick;
            border: solid;
        }



            .imgcontainer img {
                height: 300px;
                width: 500px;
                -webkit-transition: all 5s ease;
                -moz-transition: all 5s ease;
                -ms-transition: all 5s ease;
                transition: all 5s ease;
            }

                .imgcontainer img:hover {
                    width: 900px;
                    height: 700px;
                }


        h3 {
            font-family: Verdana;
            color: black;
            text-align: center;
        }

        h5 {
            font-family: Verdana;
            color: gray;
            text-align: justify;
        }

        .mainframe {
            padding-left: 350px;
            padding-top: 40px;
            padding-right: 425px;
        }

        .textframe {
            padding-left: 20px;
            padding-top: 20px;
            padding-right: 25px;
        }

        .container {
            border: dashed;
            padding-left: 20px
        }
    }

But if we want the styles to apply, we need to do some remodeling.

Remember the main part of the code?

   <h3 id="gg">0%</h3>
                <br />
                <br />   

   <progress id="g" class="y" value="0" max="100" style="align-self:center; text-align:center;">
          <div class="progress-bar">
                <span style="width: 80%;">Progress: 80%</span>
          </div>
   </progress>

Change it to look like the following:

 <br />
    <br />
    <br />

    <div class="mainframe">
        <div class="container" style="text-align:center;">

            <br />
            <br /><br />
            <br />


            <div class="textframe">


                <h3 id="h" style="text-align:center"></h3>


                    <h3 id="gg">0%</h3>
                <br />
                <br />
                <progress id="g" class="y" value="0" max="100" style="align-self:center; text-align:center;">
                    <div class="progress-bar">
                        <span style="width: 80%;">Progress: 80%</span>
                    </div>
                </progress>

Step 6: You Are Officially Done - Now for the API [and Some Notes]

Finally! [Don't forget to upload the text to a new page in your site]

Now let's see how to use it. Take the destination URL, add the "https://" to it, and then put it like this:

your-nonexistentsite.com/redirect.html?url=https://destination.co.uk/index.html

Example: Assuming that your website is "http://my-boating-site.com/" and the redirect is on page "myredirect.htm" and the destination is Bing, then the full link would be:

my-boating-site.com/myredirect.htm?url=https://www.bing.com/

And for the three gracious readers who read the whole article, and by the "whole article" I mean "read every single character", remember to:

  • Comment
  • Favorite
  • Share
  • Follow

Anyway. Why did I waste my limited energy typing the previous paragraph. I am pretty sure you just skipped reading it.

Comments

About This Instructable

122views

4favorites

License:

Bio: I like to rhyme all the time.
More by EliyahuGeorgios:Cool, Decorative Lamp - From Recycled Parts!Computer ProgrammingHow to Put a Fancy (and Flexible) Redirect on Your Site
Add instructable to: