-
-
Save wietseneven/2502518 to your computer and use it in GitHub Desktop.
random post with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 | |
verplaats(moveRandom('container')); | |
} | |
function abortTimer() { // to be called when you want to stop the timer | |
clearTimeout(tid); | |
} | |
}); | |
function randomFromTo(from, to){ | |
return Math.floor(Math.random() * (to - from + 1) + from); | |
} | |
function moveRandom(id) { | |
/* get container position and size | |
* -- access method : cPos.top and cPos.left */ | |
var cPos = $('body').offset(); | |
var cHeight = $('body').height(); | |
var cWidth = $('body').width(); | |
// get quote padding | |
var pad = parseInt($('body').css('padding-top').replace('px', '')); | |
// get quote size | |
var bHeight = $('#'+id).height(); | |
var bWidth = $('#'+id).width(); | |
// set maximum position | |
maxY = cPos.top + cHeight - bHeight - pad; | |
maxX = cPos.left + cWidth - bWidth - pad; | |
// set minimum position | |
minY = cPos.top + pad; | |
minX = cPos.left + pad; | |
// set new position | |
newY = randomFromTo(minY, maxY); | |
newX = randomFromTo(minX, maxX); | |
$('div').animate({ | |
top: newY, | |
left: newX | |
}, 500, function() { | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* css */ | |
#container{ | |
width:600px; | |
padding:10px; | |
border:1px solid #666; | |
height:200px; | |
background: #FFF; | |
position: absolute; | |
margin-top: 150px; | |
z-index: 1; | |
} | |
.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