Skip to content

Commit 1ded431

Browse files
author
Scott Jehl
committed
updated demos to a standard format - class animations do not seem to work in safari (unsure why)
1 parent 8f8d827 commit 1ded431

12 files changed

Lines changed: 365 additions & 59 deletions

File tree

‎demos/addClass/default.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects - addClass Demo</title>
5+
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
8+
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
9+
<style type="text/css">
10+
.toggler { width: 500px; height: 200px; position: relative;}
11+
#button { padding: .5em 1em; text-decoration: none; }
12+
#effect {position: relative; }
13+
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
14+
.ui-effects-transfer { border: 2px dotted gray; }
15+
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
16+
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
17+
</style>
18+
<script type="text/javascript">
19+
$(function() {
20+
$("#button").click(function() {
21+
$('#effect').addClass('second', 1000, callback);
22+
});
23+
24+
function callback(){
25+
setTimeout(function(){
26+
$('#effect').removeClass('second');
27+
}, 1000);
28+
}
29+
});
30+
</script>
31+
</head>
32+
<body>
33+
34+
<div class="demo">
35+
36+
<div class="toggler">
37+
<div id="effect" class="first ui-widget-content ui-corner-all">
38+
<h3 class="ui-widget-header ui-corner-all">Add Class</h3>
39+
<p>
40+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
41+
</p>
42+
</div>
43+
</div>
44+
45+
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
46+
47+
</div><!-- End demo -->
48+
49+
<div class="demo-description">
50+
51+
<p>Click the button above to preview the effect.</p>
52+
53+
</div><!-- End demo-description -->
54+
55+
</body>
56+
</html>

‎demos/addClass/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

‎demos/animate/default.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Effect Methods - Animate Demo</title>
4+
<title>jQuery UI Effects - Animate Demo</title>
55
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
66
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
77
<script type="text/javascript" src="../../ui/effects.core.js"></script>
88
<link type="text/css" href="../demos.css" rel="stylesheet" />
99
<style type="text/css">
10-
.toggler { width: 500px; height: 200px; }
10+
.toggler { width: 500px; height: 200px; position: relative;}
1111
#button { padding: .5em 1em; text-decoration: none; }
12-
#animate { width: 240px; height: 135px; padding: 0.4em; background: #fff;}
13-
#animate h3 { margin: 0; padding: 0.4em; text-align: center; }
12+
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
13+
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
1414
</style>
1515
<script type="text/javascript">
1616
$(function() {
1717
$("#button").toggle(
1818
function() {
19-
$("#animate").animate({backgroundColor: '#aa0000', color: '#fff'}, 1000);
19+
$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
2020
},
2121
function() {
22-
$("#animate").animate({backgroundColor: '#fff', color: '#000'}, 1000);
22+
$("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
2323
}
2424
);
2525
});
@@ -30,15 +30,15 @@
3030
<div class="demo">
3131

3232
<div class="toggler">
33-
<div id="animate" class="ui-widget-content ui-corner-all">
33+
<div id="effect" class="ui-widget-content ui-corner-all">
3434
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
3535
<p>
3636
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
3737
</p>
3838
</div>
3939
</div>
4040

41-
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
41+
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
4242

4343
</div><!-- End demo -->
4444

‎demos/effect/default.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Effect Methods - Effect Demo</title>
4+
<title>jQuery UI Effects - Effect Demo</title>
55
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
66
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
77
<script type="text/javascript" src="../../ui/effects.core.js"></script>
@@ -23,7 +23,6 @@
2323
#button { padding: .5em 1em; text-decoration: none; }
2424
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
2525
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
26-
.resetLink { position: absolute; top: 50px; left: 40px; color: #ddd; font-size: 24px; }
2726
.ui-effects-transfer { border: 2px dotted gray; }
2827
</style>
2928
<script type="text/javascript">
@@ -37,10 +36,8 @@
3736
//most effect types need no options passed by default
3837
var options = {};
3938
//check if it's scale, transfer, or size - they need options explicitly set
40-
if(selectedEffect == 'scale'){
41-
options = {percent: 0};
42-
}
43-
else if(selectedEffect == 'transfer'){ options = { to: "#button" }; }
39+
if(selectedEffect == 'scale'){ options = {percent: 0}; }
40+
else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
4441
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
4542

4643
//run the effect
@@ -91,7 +88,7 @@ <h3 class="ui-widget-header ui-corner-all">Effect</h3>
9188
<option value="transfer">Transfer</option>
9289
</select>
9390

94-
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
91+
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
9592

9693

9794
</div><!-- End demo -->

‎demos/hide/default.html‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,61 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Effect Methods - Hide Demo</title>
4+
<title>jQuery UI Effects - Hide Demo</title>
55
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
66
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
77
<script type="text/javascript" src="../../ui/effects.core.js"></script>
8+
<script type="text/javascript" src="../../ui/effects.blind.js"></script>
89
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
10+
<script type="text/javascript" src="../../ui/effects.clip.js"></script>
11+
<script type="text/javascript" src="../../ui/effects.drop.js"></script>
12+
<script type="text/javascript" src="../../ui/effects.explode.js"></script>
13+
<script type="text/javascript" src="../../ui/effects.fold.js"></script>
14+
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
15+
<script type="text/javascript" src="../../ui/effects.pulsate.js"></script>
16+
<script type="text/javascript" src="../../ui/effects.scale.js"></script>
17+
<script type="text/javascript" src="../../ui/effects.shake.js"></script>
18+
<script type="text/javascript" src="../../ui/effects.slide.js"></script>
19+
<script type="text/javascript" src="../../ui/effects.transfer.js"></script>
920
<link type="text/css" href="../demos.css" rel="stylesheet" />
1021
<style type="text/css">
1122
.toggler { width: 500px; height: 200px; }
1223
#button { padding: .5em 1em; text-decoration: none; }
13-
#hide { width: 240px; height: 135px; padding: 0.4em; }
14-
#hide h3 { margin: 0; padding: 0.4em; text-align: center; }
24+
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
25+
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
26+
.ui-effects-transfer { border: 2px dotted gray; }
1527
</style>
1628
<script type="text/javascript">
1729
$(function() {
30+
31+
//run the currently selected effect
32+
function runEffect(){
33+
//get effect type from
34+
var selectedEffect = $('#effectTypes').val();
35+
36+
//most effect types need no options passed by default
37+
var options = {};
38+
//check if it's scale, transfer, or size - they need options explicitly set
39+
if(selectedEffect == 'scale'){ options = {percent: 0}; }
40+
else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
41+
else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
42+
43+
//run the effect
44+
$("#effect").hide(selectedEffect,options,500,callback);
45+
};
46+
47+
//callback function to bring a hidden box back
48+
function callback(){
49+
setTimeout(function(){
50+
$("#effect:hidden").removeAttr('style').hide().fadeIn();
51+
}, 1000);
52+
};
53+
54+
//set effect from select menu value
1855
$("#button").click(function() {
19-
$('#hide').hide("bounce");
56+
runEffect();
2057
});
58+
2159
});
2260
</script>
2361
</head>
@@ -26,14 +64,33 @@
2664
<div class="demo">
2765

2866
<div class="toggler">
29-
<div id="hide" class="ui-widget-content ui-corner-all">
67+
<div id="effect" class="ui-widget-content ui-corner-all">
3068
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
3169
<p>
3270
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
3371
</p>
3472
</div>
3573
</div>
36-
<a href="#" id="button" class="ui-state-default ui-corner-all">Show Effect</a>
74+
75+
<select name="effects" id="effectTypes">
76+
<option value="blind">Blind</option>
77+
<option value="bounce">Bounce</option>
78+
<option value="clip">Clip</option>
79+
<option value="drop">Drop</option>
80+
<option value="explode">Explode</option>
81+
<option value="fold">Fold</option>
82+
<option value="highlight">Highlight</option>
83+
<option value="puff">Puff</option>
84+
<option value="pulsate">Pulsate</option>
85+
<option value="scale">Scale</option>
86+
<option value="shake">Shake</option>
87+
<option value="size">Size</option>
88+
<option value="slide">Slide</option>
89+
<option value="transfer">Transfer</option>
90+
</select>
91+
92+
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
93+
3794

3895
</div><!-- End demo -->
3996

‎demos/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,8 @@
250250
<dd><a href="slider/index.html">Slider</a></dd>
251251
<dd><a href="tabs/index.html">Tabs</a></dd>
252252
<dt>Effects</dt>
253+
<dd><a href="addClass/index.html">Add Class</a></dd>
254+
<dd><a href="removeClass/index.html">Remove Class</a></dd>
253255
<dd><a href="animate/index.html">Animate</a></dd>
254256
<dd><a href="effect/index.html">Effect</dd>
255257
<dd><a href="hide/index.html">Hide</a></dd>

‎demos/removeClass/default.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects - removeClass Demo</title>
5+
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js"></script>
8+
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
9+
<style type="text/css">
10+
.toggler { width: 500px; height: 200px; position: relative;}
11+
#button { padding: .5em 1em; text-decoration: none; }
12+
#effect { position: relative; }
13+
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
14+
.ui-effects-transfer { border: 2px dotted gray; }
15+
.first { width: 240px; height: 135px; padding: 0.4em; font-size: 1.2em; border-width: 1px; }
16+
.second { width: 480px; height: 135px; padding: 0.8em; font-size: 1.6em; border-width: 5px; }
17+
</style>
18+
<script type="text/javascript">
19+
$(function() {
20+
$("#button").click(function() {
21+
$('#effect').removeClass('second', 1000, callback);
22+
});
23+
24+
function callback(){
25+
setTimeout(function(){
26+
$('#effect').addClass('second');
27+
}, 1000);
28+
}
29+
});
30+
</script>
31+
</head>
32+
<body>
33+
34+
<div class="demo">
35+
36+
<div class="toggler">
37+
<div id="effect" class="first second ui-widget-content ui-corner-all">
38+
<h3 class="ui-widget-header ui-corner-all">Remove Class</h3>
39+
<p>
40+
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
41+
</p>
42+
</div>
43+
</div>
44+
45+
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
46+
47+
</div><!-- End demo -->
48+
49+
<div class="demo-description">
50+
51+
<p>Click the button above to preview the effect.</p>
52+
53+
</div><!-- End demo-description -->
54+
55+
</body>
56+
</html>

‎demos/removeClass/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Effects Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)