Skip to content

Instantly share code, notes, and snippets.

@koenveldhuizen

koenveldhuizen/index.html

Created March 19, 2012 23:15
Show Gist options
  • Save koenveldhuizen/2128336 to your computer and use it in GitHub Desktop.
Save koenveldhuizen/2128336 to your computer and use it in GitHub Desktop.
Download ZIP
random post with jQuery
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="quote" id="quote1">
<h2>Ullamcorper1</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="quote" id="quote2">
<h2>Ullamcorper2</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="quote" id="quote3">
<h2>Ullamcorper3</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="quote" id="quote4">
<h2>Ullamcorper4</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="quote" id="quote5">
<h2>Ullamcorper5</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" /></script>
<script src="randomquote.js" type="text/javascript" /></script>
</html>
Raw
randomquote.js
/*
Project: Dynamic random post fader
Code by: Koen Veldhuizen
Thanks to: Niels Doorn for pointing the .children() out to me
*/
$(document).ready(function(){
//load the array from the designated element
// .children only selects leven 1 elements is you want to go deeper use .find()
var quotelist = $("#container").children();
// hide all elements in the array
jQuery.each(quotelist, function() {
$(this).hide();
});
// set timeout
mycode(); // inite the two function loop
function mycode() {
i= Math.floor ( Math.random() * quotelist.length );
result = quotelist[i];
$(result).fadeIn("slow");
tid = setTimeout(mycode2, 2000); // load fade out
}
function mycode2() {
$(result).fadeOut("slow");
tid = setTimeout(mycode, 2000); // load fade 1
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}
});
Raw
style.css
/* css */
#container{
margin:100px auto 0 auto;
width:600px;
padding:10px;
border:1px solid #666;
height:170px;}
.quote{
font-family:Verdana, Geneva, sans-serif;
}
/* this is the dummy test */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment