JQuery transition with http-equiv='refresh'
Hello,
I'm writing some code for a presentation with different slides using pagetransitions.js for the transitions between the pages.
It works fine when I'm using a button to go to the next page but I would like to use this instead of a button:
<meta http-equiv="refresh" content="5;javascript:'transition(animation )';>
What code should I use for transition(animation) ?
Here's my code:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>A Collection of Page Transitions</title>
<link rel="import" href="rood.html">
<link rel="import" href="groen.html">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
<meta http-equiv="refresh" content="5;javascript: transition(animation);">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Collection of Page Transitions with CSS Animations" />
<meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
<meta name="author" content="Codrops" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="pt-triggers">
<button id="iterateEffects" class="pt-touch-button">Show next page transition</BUTTON>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Choose a transition</BUTTON>
<ul class="dl-menu">
<li>
<A href="#">Move</A>
<ul class="dl-submenu">
<li data-animation="1"><A href="#">Move to left/ from right</A></LI>
<li data-animation="2"><A href="#">Move to right/ from left</A></LI>
<li data-animation="3"><A href="#">Move to top/ from bottom</A></LI>
<li data-animation="4"><A href="#">Move to bottom/ from top</A></LI>
</UL>
</LI>
<li>
<A href="#">Fade</A>
<ul class="dl-submenu">
<li data-animation="5"><A href="#">Fade / from right</A></LI>
<li data-animation="6"><A href="#">Fade / from left</A></LI>
<li data-animation="7"><A href="#">Fade / from bottom</A></LI>
<li data-animation="8"><A href="#">Fade / from top</A></LI>
<li data-animation="9"><A href="#">Fade left / Fade right</A></LI>
<li data-animation="10"><A href="#">Fade right / Fade left</A></LI>
<li data-animation="11"><A href="#">Fade top / Fade bottom</A></LI>
<li data-animation="12"><A href="#">Fade bottom / Fade top</A></LI>
</UL>
</LI>
<li>
<A href="#">Different easing</A>
<ul class="dl-submenu">
<li data-animation="13"><A href="#">Different easing / from right</A></LI>
<li data-animation="14"><A href="#">Different easing / from left</A></LI>
<li data-animation="15"><A href="#">Different easing / from bottom</A></LI>
<li data-animation="16"><A href="#">Different easing / from top</A></LI>
</UL>
</LI>
<li>
<A href="#">Scale</A>
<ul class="dl-submenu">
<li data-animation="17"><A href="#">Scale down / from right</A></LI>
<li data-animation="18"><A href="#">Scale down / from left</A></LI>
<li data-animation="19"><A href="#">Scale down / from bottom</A></LI>
<li data-animation="20"><A href="#">Scale down / from top</A></LI>
<li data-animation="21"><A href="#">Scale down / scale down</A></LI>
<li data-animation="22"><A href="#">Scale up / scale up</A></LI>
<li data-animation="23"><A href="#">Move to left / scale up</A></LI>
<li data-animation="24"><A href="#">Move to right / scale up</A></LI>
<li data-animation="25"><A href="#">Move to top / scale up</A></LI>
<li data-animation="26"><A href="#">Move to bottom / scale up</A></LI>
<li data-animation="27"><A href="#">Scale down / scale up</A></LI>
</UL>
</LI>
<li>
<A href="#">Rotate</A>
<ul class="dl-submenu">
<li>
<A href="#">Glue</A>
<ul class="dl-submenu">
<li data-animation="28"><A href="#">Glue left / from right</A></LI>
<li data-animation="29"><A href="#">Glue right / from left</A></LI>
<li data-animation="30"><A href="#">Glue bottom / from top</A></LI>
<li data-animation="31"><A href="#">Glue top / from bottom</A></LI>
</UL>
</LI>
<li>
<A href="#">Flip</A>
<ul class="dl-submenu">
<li data-animation="32"><A href="#">Flip right</A></LI>
<li data-animation="33"><A href="#">Flip left</A></LI>
<li data-animation="34"><A href="#">Flip top</A></LI>
<li data-animation="35"><A href="#">Flip bottom</A></LI>
</UL>
</LI>
<li data-animation="36"><A href="#">Fall</A></LI>
<li data-animation="37"><A href="#">Newspaper</A></LI>
<li>
<A href="#">Push / Pull</A>
<ul class="dl-submenu">
<li data-animation="38"><A href="#">Push left / from right</A></LI>
<li data-animation="39"><A href="#">Push right / from left</A></LI>
<li data-animation="40"><A href="#">Push top / from bottom</A></LI>
<li data-animation="41"><A href="#">Push bottom / from top</A></LI>
<li data-animation="42"><A href="#">Push left / pull right</A></LI>
<li data-animation="43"><A href="#">Push right / pull left</A></LI>
<li data-animation="44"><A href="#">Push top / pull bottom</A></LI>
<li data-animation="45"><A href="#">Push bottom / pull top</A></LI>
</UL>
</LI>
<li>
<A href="#">Fold / Unfold</A>
<ul class="dl-submenu">
<li data-animation="46"><A href="#">Fold left / from right</A></LI>
<li data-animation="47"><A href="#">Fold right / from left</A></LI>
<li data-animation="48"><A href="#">Fold top / from bottom</A></LI>
<li data-animation="49"><A href="#">Fold bottom / from top</A></LI>
<li data-animation="50"><A href="#">Move to right / unfold left</A></LI>
<li data-animation="51"><A href="#">Move to left / unfold right</A></LI>
<li data-animation="52"><A href="#">Move to bottom / unfold top</A></LI>
<li data-animation="53"><A href="#">Move to top / unfold bottom</A></LI>
</UL>
</LI>
<li>
<A href="#">Room</A>
<ul class="dl-submenu">
<li data-animation="54"><A href="#">Room to left</A></LI>
<li data-animation="55"><A href="#">Room to right</A></LI>
<li data-animation="56"><A href="#">Room to top</A></LI>
<li data-animation="57"><A href="#">Room to bottom</A></LI>
</UL>
</LI>
<li>
<A href="#">Cube</A>
<ul class="dl-submenu">
<li data-animation="58"><A href="#">Cube to left</A></LI>
<li data-animation="59"><A href="#">Cube to right</A></LI>
<li data-animation="60"><A href="#">Cube to top</A></LI>
<li data-animation="61"><A href="#">Cube to bottom</A></LI>
</UL>
</LI>
<li>
<A href="#">Carousel</A>
<ul class="dl-submenu">
<li data-animation="62"><A href="#">Carousel to left</A></LI>
<li data-animation="63"><A href="#">Carousel to right</A></LI>
<li data-animation="64"><A href="#">Carousel to top</A></LI>
<li data-animation="65"><A href="#">Carousel to bottom</A></LI>
</UL>
</LI>
<li data-animation="66"><A href="#">Sides</A></LI>
</UL>
</LI>
<li data-animation="67"><A href="#">Slide</A></LI>
</UL>
</DIV><!-- /dl-menu-wrapper-->
</DIV><!-- /triggers -->
<div id="pt-main" class="pt-perspective" >
<div class="pt-page pt-page-1">
<OBJECT data="groen.html" style="width: 100%; height: 100%;">Warning: file_to_include.html could not be included. </OBJECT>
</DIV>
<div class="pt-page pt-page-2">
<OBJECT data="rood.html" style="width: 100%; height: 100%;">Warning: file_to_include.html could not be included. </OBJECT>
</DIV>
</DIV>
<div class="pt-message">
<p>Your browser does not support CSS animations.</P>
</DIV>
<script src="js/jquery-1.9.1.min.js"></SCRIPT>
<script src="js/jquery.dlmenu.js"></SCRIPT>
<script src="js/pagetransitions.js"></SCRIPT>
<script src="js/demoad.js"></SCRIPT>
</body>
</html>
Topic Participants
peter.sarens
jakecigar