Simple Jquery Plugin: page redirection using javascript

Create index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<p align="center"><strong><font face="Arial"><big>Please wait 5 seconds before being redirected<br>
  To the Main Page</big></font></strong></p>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
<script>

//specify redirect url
var redirecturl="scroll.html" // here you can add redirection page.
//specify pause duration before redirection (in seconds)
var pausefor=5

//DONE EDITING

function postaction(){
if (window.timer){
clearInterval(timer)
clearInterval(timer_2)
}
window.location=redirecturl
}
setTimeout("postaction()",pausefor*1000)

</script>
<!--[if IE]>

<!--

// this script was originally authored by william kemper.  I have no homepage.
var switchm=new Array
switchm[0]="ffaa00";
switchm[1]="ffff00";
switchm[2]="00ff00";
switchm[3]="0099ff";
switchm[4]="ff0000";
switchm[5]="ff00ff";
// if you want to add more colors go ahead, all the for limits are based on array length so
// you shouldn't need to change any of the code, just add more colors.

i=0
j=0
function STROBE()
{
if (j>increment.length-1)
 {
 j=0
 i++
  if (i>switchm.length-1)
  {
  i=0
  }
 }
document.all.increment[j].filters.blendTrans.apply()
document.all.increment[j].bgColor=switchm[i]
document.all.increment[j].filters.blendTrans.play()
j++
}
timer=setInterval("STROBE()",20) // change the number to effect the speed of the loadbar.
timer_2=setInterval("REVEAL()",20)
function REVEAL()
 {
 if (document.images[0].complete)
  {
  clearInterval(timer)
  clearInterval(timer_2)
  document.all.loadbar.style.visibility="hidden";
  document.all.content.style.visibility="visible";
  }
 }
// i don't know how to put comments in the css, but change duration to  effect the speed of the fade effect.

//-->
<style>

</style>

<!--[if IE]>

<div id=loadbar 
style=position:absolute;top:expression(document.body.clientHeight/2-100);left:expression(document.body.clientWidth/2-50)>
<table cellspacing=0 cellpadding=0 width=100><tr><td 
colspan=10><b>Loading...</b></td></tr><tr>
<script language="JavaScript">


<div class="main-new-wrapper">
  <div class="container"> <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      
      <div class="carousel-inner" role="listbox">
        <div class="item active"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
        <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
      </div>
      
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  </div>
</div>
</body>
</html>

Tuesday, 14 July 2015

page redirection using javascript

Create index.html

No comments:

Post a Comment