Skip to content
Browse files

Minor Refactoring

Had to make some minor changes since the classes conflicted with the
new stylesheet.
  • Loading branch information...
1 parent 0932d97 commit 3e9ee71b2cb7661d06d8a47e0abc53fa59d89bc9 Matt Lantz committed Oct 31, 2012
Showing with 82 additions and 81 deletions.
  1. +23 −23 docs/demos/sampler.html
  2. +59 −58 docs/demos/stack.html
View
46 docs/demos/sampler.html
@@ -19,13 +19,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>AliceJS Sampler</title>
<link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link rel="stylesheet" href="fx/default.css">
<style type="text/css">
body, select {
font: 8pt Arial, sans-serif;
overflow-x: hidden;
}
- .card {
+ .cardx {
float: left;
background: transparent;
/*border: 1px dashed #CCC;*/
@@ -81,38 +82,37 @@
<!-- Test Elements -->
<div style="clear: both;">
- <div id="elem1" class="card"><img src="common/images/cards/ace_clubs.png" width="35" height="48"></div>
- <div id="elem2" class="card"><img src="common/images/cards/ace_diamonds.png" width="35" height="48"></div>
- <div id="elem3" class="card"><img src="common/images/cards/ace_hearts.png" width="35" height="48"></div>
- <div id="elem4" class="card"><img src="common/images/cards/ace_spades.png" width="35" height="48"></div>
+ <div id="elem1" class="cardx"><img src="common/images/cards/ace_clubs.png" width="35" height="48"></div>
+ <div id="elem2" class="cardx"><img src="common/images/cards/ace_diamonds.png" width="35" height="48"></div>
+ <div id="elem3" class="cardx"><img src="common/images/cards/ace_hearts.png" width="35" height="48"></div>
+ <div id="elem4" class="cardx"><img src="common/images/cards/ace_spades.png" width="35" height="48"></div>
</div>
<div style="clear: both;">
- <div id="elem5" class="card"><img src="common/images/cards/king_clubs.png" width="70" height="95"></div>
- <div id="elem6" class="card"><img src="common/images/cards/king_diamonds.png" width="70" height="95"></div>
- <div id="elem7" class="card"><img src="common/images/cards/king_hearts.png" width="70" height="95"></div>
- <div id="elem8" class="card"><img src="common/images/cards/king_spades.png" width="70" height="95"></div>
+ <div id="elem5" class="cardx"><img src="common/images/cards/king_clubs.png" width="70" height="95"></div>
+ <div id="elem6" class="cardx"><img src="common/images/cards/king_diamonds.png" width="70" height="95"></div>
+ <div id="elem7" class="cardx"><img src="common/images/cards/king_hearts.png" width="70" height="95"></div>
+ <div id="elem8" class="cardx"><img src="common/images/cards/king_spades.png" width="70" height="95"></div>
</div>
<div style="clear: both;">
- <div id="elem9" class="card"><img src="common/images/cards/queen_clubs.png" width="105" height="143"></div>
- <div id="elem10" class="card"><img src="common/images/cards/queen_diamonds.png" width="105" height="143"></div>
- <div id="elem11" class="card"><img src="common/images/cards/queen_hearts.png" width="105" height="143"></div>
- <div id="elem12" class="card"><img src="common/images/cards/queen_spades.png" width="105" height="143"></div>
+ <div id="elem9" class="cardx"><img src="common/images/cards/queen_clubs.png" width="105" height="143"></div>
+ <div id="elem10" class="cardx"><img src="common/images/cards/queen_diamonds.png" width="105" height="143"></div>
+ <div id="elem11" class="cardx"><img src="common/images/cards/queen_hearts.png" width="105" height="143"></div>
+ <div id="elem12" class="cardx"><img src="common/images/cards/queen_spades.png" width="105" height="143"></div>
</div>
<div style="clear: both;">
- <div id="elem13" class="card"><img src="common/images/cards/jack_clubs.png"><p>Jack of Clubs</p></div>
- <div id="elem14" class="card"><img src="common/images/cards/jack_diamonds.png"><p>Jack of Diamonds</p></div>
- <div id="elem15" class="card"><img src="common/images/cards/jack_hearts.png"><p>Jack of Hearts</p></div>
- <div id="elem16" class="card"><img src="common/images/cards/jack_spades.png"><p>Jack of Spades</p></div>
+ <div id="elem13" class="cardx"><img src="common/images/cards/jack_clubs.png"><p>Jack of Clubs</p></div>
+ <div id="elem14" class="cardx"><img src="common/images/cards/jack_diamonds.png"><p>Jack of Diamonds</p></div>
+ <div id="elem15" class="cardx"><img src="common/images/cards/jack_hearts.png"><p>Jack of Hearts</p></div>
+ <div id="elem16" class="cardx"><img src="common/images/cards/jack_spades.png"><p>Jack of Spades</p></div>
</div>
<div style="clear: both;">
- <div id="elem17" class="card"><img src="common/images/cards/10_clubs.png" width="175" height="238"></div>
- <div id="elem18" class="card"><img src="common/images/cards/10_diamonds.png" width="175" height="238"></div>
- <div id="elem19" class="card"><img src="common/images/cards/10_hearts.png" width="175" height="238"></div>
- <div id="elem20" class="card"><img src="common/images/cards/10_spades.png" width="175" height="238"></div>
+ <div id="elem17" class="cardx"><img src="common/images/cards/10_clubs.png" width="175" height="238"></div>
+ <div id="elem18" class="cardx"><img src="common/images/cards/10_diamonds.png" width="175" height="238"></div>
+ <div id="elem19" class="cardx"><img src="common/images/cards/10_hearts.png" width="175" height="238"></div>
+ <div id="elem20" class="cardx"><img src="common/images/cards/10_spades.png" width="175" height="238"></div>
</div>
- <script src="../../src/alice.core.js"></script>
- <script src="../../src/alice.plugins.cheshire.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
var a = alicejs;
View
117 docs/demos/stack.html
@@ -18,7 +18,9 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>AliceJS Stack</title>
- <link href="../favicon.ico" rel="icon" type="image/x-icon">
+ <link href="../images/favicon.ico" rel="icon" type="image/x-icon">
+ <link href="fx/default.css" rel="stylesheet">
+
<style type="text/css">
body, select {
font: 8pt Arial, sans-serif;
@@ -31,7 +33,7 @@
height: 190px;
}
- .card {
+ .cardx {
position: absolute;
width: 140px;
height: 190px;
@@ -58,60 +60,60 @@
<p>This is a demo of animating a stack of 54 playing card images.</p>
<div id="cards" class="cards">
- <div class="card"><img src="common/images/cards/2_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/2_clubs.png"></div>
- <div class="card"><img src="common/images/cards/2_hearts.png"></div>
- <div class="card"><img src="common/images/cards/2_spades.png"></div>
- <div class="card"><img src="common/images/cards/3_clubs.png"></div>
- <div class="card"><img src="common/images/cards/3_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/3_hearts.png"></div>
- <div class="card"><img src="common/images/cards/3_spades.png"></div>
- <div class="card"><img src="common/images/cards/4_clubs.png"></div>
- <div class="card"><img src="common/images/cards/4_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/4_hearts.png"></div>
- <div class="card"><img src="common/images/cards/4_spades.png"></div>
- <div class="card"><img src="common/images/cards/5_clubs.png"></div>
- <div class="card"><img src="common/images/cards/5_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/5_hearts.png"></div>
- <div class="card"><img src="common/images/cards/5_spades.png"></div>
- <div class="card"><img src="common/images/cards/6_clubs.png"></div>
- <div class="card"><img src="common/images/cards/6_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/6_hearts.png"></div>
- <div class="card"><img src="common/images/cards/6_spades.png"></div>
- <div class="card"><img src="common/images/cards/7_clubs.png"></div>
- <div class="card"><img src="common/images/cards/7_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/7_hearts.png"></div>
- <div class="card"><img src="common/images/cards/7_spades.png"></div>
- <div class="card"><img src="common/images/cards/8_clubs.png"></div>
- <div class="card"><img src="common/images/cards/8_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/8_hearts.png"></div>
- <div class="card"><img src="common/images/cards/8_spades.png"></div>
- <div class="card"><img src="common/images/cards/9_clubs.png"></div>
- <div class="card"><img src="common/images/cards/9_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/9_hearts.png"></div>
- <div class="card"><img src="common/images/cards/9_spades.png"></div>
- <div class="card"><img src="common/images/cards/10_clubs.png"></div>
- <div class="card"><img src="common/images/cards/10_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/10_hearts.png"></div>
- <div class="card"><img src="common/images/cards/10_spades.png"></div>
- <div class="card"><img src="common/images/cards/jack_clubs.png"></div>
- <div class="card"><img src="common/images/cards/jack_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/jack_hearts.png"></div>
- <div class="card"><img src="common/images/cards/jack_spades.png"></div>
- <div class="card"><img src="common/images/cards/queen_clubs.png"></div>
- <div class="card"><img src="common/images/cards/queen_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/queen_hearts.png"></div>
- <div class="card"><img src="common/images/cards/queen_spades.png"></div>
- <div class="card"><img src="common/images/cards/king_clubs.png"></div>
- <div class="card"><img src="common/images/cards/king_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/king_hearts.png"></div>
- <div class="card"><img src="common/images/cards/king_spades.png"></div>
- <div class="card"><img src="common/images/cards/ace_clubs.png"></div>
- <div class="card"><img src="common/images/cards/ace_diamonds.png"></div>
- <div class="card"><img src="common/images/cards/ace_hearts.png"></div>
- <div class="card"><img src="common/images/cards/ace_spades.png"></div>
- <div class="card"><img src="common/images/cards/joker_black.png"></div>
- <div class="card"><img src="common/images/cards/joker_red.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/2_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/3_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/4_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/5_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/6_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/7_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/8_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/9_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/10_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/jack_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/queen_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/king_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_clubs.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_diamonds.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_hearts.png"></div>
+ <div class="cardx"><img src="common/images/cards/ace_spades.png"></div>
+ <div class="cardx"><img src="common/images/cards/joker_black.png"></div>
+ <div class="cardx"><img src="common/images/cards/joker_red.png"></div>
</div>
<div class="controls">
@@ -122,8 +124,7 @@
-->
</div>
- <script src="../../src/alice.core.js"></script>
- <script src="../../src/alice.plugins.cheshire.js"></script>
+ <script src="../js/alice.min.js"></script>
<script type="text/javascript">
var elems = document.getElementById("cards").children;

0 comments on commit 3e9ee71

Please sign in to comment.
Something went wrong with that request. Please try again.