JQuery Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac est quis lorem varius facilisis. Fusce lacus lacus, placerat eu mollis at, cursus ut quam. Curabitur dolor velit, gravida tristique porta sed, bibendum et tellus. Quisque tincidunt, justo eget suscipit viverra, velit elit elementum ipsum, et aliquet leo massa sed sapien. Duis pellentesque eros vitae libero accumsan id luctus libero mollis. Sed sit amet justo ut purus commodo tempor at a neque. Aenean at nulla metus, et bibendum libero. Suspendisse at enim magna, sed tincidunt purus. Maecenas id metus at velit pulvinar congue. Donec quis felis sed ante tempus rutrum. Quisque feugiat, nibh eget ultricies rutrum, magna nibh ornare ligula, consectetur mollis massa nisl in elit. Nam massa nisl, ultrices at sodales a, dapibus id lorem. Nunc in massa ut purus tempor lacinia at vel enim. Mauris sed malesuada purus. In leo felis, vehicula nec egestas vel, laoreet ut lectus. Cras feugiat tincidunt dui, quis fermentum massa laoreet quis. Fusce varius ultricies elit, at euismod arcu aliquam in.

The Code (fresh off the presses, displaying what was used above):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Examples</title>
<script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// My namespace - Peter Ajtai
$.pajtai = {
}
// When page is ready
$(document).ready(function()
{
$("input[value='slideToggle']").click(function () {
$("img").slideToggle('slow');
$("#text").slideToggle('slow');
});
$("input[value='slideUp']").click(function () {
$("img").slideUp('slow');
});
$("input[value='slideDown']").click(function () {
$("img").slideDown('slow');
});
$("input[value='fadeOut']").click(function () {
$("img").fadeOut('slow');
});
$("input[value='fadeIn']").click(function () {
$("img").fadeIn('slow');
});
$("input[value='hide']").click(function () {
$("img").hide(5000);
});
});
</script>
</head>
<body>
<h1>JQuery Examples</h1>
<noscript>
<h2>Sorry, this page requires JavaScript :(</h2>
</noscript>
<input type="button" value="slideToggle" />
<input type="button" value="slideUp" />
<input type="button" value="slideDown" />
<input type="button" value="fadeOut" />
<input type="button" value="fadeIn" />
<input type="button" value="hide" />
<br/><img id="peeps" src="http://peter-ajtai.com/images/languages.png" alt="People at chalkboard" />
<br/>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac est quis lorem varius facilisis. Fusce lacus lacus, placerat eu mollis at, cursus ut quam. Curabitur dolor velit, gravida tristique porta sed, bibendum et tellus. Quisque tincidunt, justo eget suscipit viverra, velit elit elementum ipsum, et aliquet leo massa sed sapien. Duis pellentesque eros vitae libero accumsan id luctus libero mollis. Sed sit amet justo ut purus commodo tempor at a neque. Aenean at nulla metus, et bibendum libero. Suspendisse at enim magna, sed tincidunt purus. Maecenas id metus at velit pulvinar congue. Donec quis felis sed ante tempus rutrum. Quisque feugiat, nibh eget ultricies rutrum, magna nibh ornare ligula, consectetur mollis massa nisl in elit. Nam massa nisl, ultrices at sodales a, dapibus id lorem. Nunc in massa ut purus tempor lacinia at vel enim. Mauris sed malesuada purus. In leo felis, vehicula nec egestas vel, laoreet ut lectus. Cras feugiat tincidunt dui, quis fermentum massa laoreet quis. Fusce varius ultricies elit, at euismod arcu aliquam in.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac est quis lorem varius facilisis. Fusce lacus lacus, placerat eu mollis at, cursus ut quam. Curabitur dolor velit, gravida tristique porta sed, bibendum et tellus. Quisque tincidunt, justo eget suscipit viverra, velit elit elementum ipsum, et aliquet leo massa sed sapien. Duis pellentesque eros vitae libero accumsan id luctus libero mollis. Sed sit amet justo ut purus commodo tempor at a neque. Aenean at nulla metus, et bibendum libero. Suspendisse at enim magna, sed tincidunt purus. Maecenas id metus at velit pulvinar congue. Donec quis felis sed ante tempus rutrum. Quisque feugiat, nibh eget ultricies rutrum, magna nibh ornare ligula, consectetur mollis massa nisl in elit. Nam massa nisl, ultrices at sodales a, dapibus id lorem. Nunc in massa ut purus tempor lacinia at vel enim. Mauris sed malesuada purus. In leo felis, vehicula nec egestas vel, laoreet ut lectus. Cras feugiat tincidunt dui, quis fermentum massa laoreet quis. Fusce varius ultricies elit, at euismod arcu aliquam in.</p>
<h2>The Code (fresh off the presses, displaying what was used above):</h2>
<?php
include_once "../php/codify-function.php";
// Show code ##################################################################
codify(file_get_contents(__FILE__), 'javascript');
?>
</body>
</html>