root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/addClass/default.html @ 26899

Revision 26899, 1.5 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Effects - addClass demo</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.effects.core.js"></script>
9    <link rel="stylesheet" href="../demos.css">
10    <style>
11        .toggler { width: 500px; height: 200px; position: relative; }
12        #button { padding: .5em 1em; text-decoration: none; }
13        #effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
14        .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
15    </style>
16    <script>
17    $(function() {
18        $( "#button" ).click(function() {
19            $( "#effect" ).addClass( "newClass", 1000, callback );
20            return false;
21        });
22
23        function callback() {
24            setTimeout(function() {
25                $( "#effect" ).removeClass( "newClass" );
26            }, 1500 );
27        }
28    });
29    </script>
30</head>
31<body>
32
33<div class="demo">
34
35<div class="toggler">
36    <div id="effect" class=" ui-corner-all">
37            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
38    </div>
39</div>
40
41<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
42
43</div><!-- End demo -->
44
45
46
47<div class="demo-description">
48<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
49</div><!-- End demo-description -->
50
51</body>
52</html>
Note: See TracBrowser for help on using the browser.