Skip to content
Permalink
Browse files

demos: simplified class effect demos to work in IE6

  • Loading branch information...
rdworth committed Mar 3, 2009
1 parent aacb34f commit f445d3c145931a6737f8fa26faea8ef4256fc343
@@ -10,7 +10,7 @@
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.newClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; }
#effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script type="text/javascript">
$(function() {
@@ -43,7 +43,7 @@

<div class="demo-description">

<p>This demo adds a class which animates: line-height, text-indent, opacity, letter-spacing, width, height, padding, margin, font-size, border color, border-width, background color, and font color. </p>
<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>

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

@@ -10,7 +10,7 @@
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.newClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; }
#effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script type="text/javascript">
$(function() {
@@ -10,9 +10,8 @@
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; }
#effect.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.anotherNewClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; }
#effect.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; }
#effect.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script type="text/javascript">
$(function() {
@@ -10,8 +10,7 @@
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.newClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; }
#effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script type="text/javascript">
$(function() {

0 comments on commit f445d3c

Please sign in to comment.
You can’t perform that action at this time.