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.
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 our work looks very fancy at all.. What did we miss?
Jquery, Bootstrap? Balloon.css? Invisible Ink? 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]
![You Are Officially Done - Now for the API [and Some Notes]](https://content.instructables.com/F2I/QFAF/J58G2LTY/F2IQFAFJ58G2LTY.png?auto=webp&fit=bounds&frame=1&width=1024auto=webp&frame=1&height=300)
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.
