You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ctakes.apache.org by se...@apache.org on 2015/02/26 21:19:03 UTC
svn commit: r1662557 - in /ctakes/site/new: css/examples.css examples.html
Author: seanfinan
Date: Thu Feb 26 20:19:02 2015
New Revision: 1662557
URL: http://svn.apache.org/r1662557
Log:
Using fade-in instead of slide for carousel animation
Modified:
ctakes/site/new/css/examples.css
ctakes/site/new/examples.html
Modified: ctakes/site/new/css/examples.css
URL: http://svn.apache.org/viewvc/ctakes/site/new/css/examples.css?rev=1662557&r1=1662556&r2=1662557&view=diff
==============================================================================
--- ctakes/site/new/css/examples.css (original)
+++ ctakes/site/new/css/examples.css Thu Feb 26 20:19:02 2015
@@ -1,14 +1,37 @@
-#neg-uncertain {
+.carousel-fade .carousel-inner .item {
+ /* Fade between carousel items instead of slide */
+ opacity: 0;
+ -webkit-transition-property: opacity;
+ transition-property: opacity;
+ -webkit-transition-delay: 0s;
+ transition-delay: 0s;
+ -webkit-transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.carousel-fade .carousel-inner .active {
+ opacity: 1
+}
+
+.carousel-indicators li {
+ /* lightish blue */
+ background-color: #2FA4E7;
+}
+
+.carousel-indicators .active {
+ /* blue */
+ background-color: #195C97;
+}
+
+.markuper {
/* Chrome, Safari, Opera */
- -webkit-animation-name: fadein1;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
/* Standard syntax */
- animation-name: fadein1;
animation-duration: 20s;
animation-timing-function: linear;
animation-delay: 0s;
@@ -16,93 +39,63 @@
animation-play-state: running;
}
+#neg-uncertain {
+ -webkit-animation-name: fadein1;
+ animation-name: fadein1;
+}
+
#coreference {
- /* Chrome, Safari, Opera */
-webkit-animation-name: fadein2;
- -webkit-animation-duration: 20s;
- -webkit-animation-timing-function: linear;
- -webkit-animation-delay: 0s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-play-state: running;
- /* Standard syntax */
animation-name: fadein2;
- animation-duration: 20s;
- animation-timing-function: linear;
- animation-delay: 0s;
- animation-iteration-count: infinite;
- animation-play-state: running;
}
#locationof {
- /* Chrome, Safari, Opera */
-webkit-animation-name: fadein3;
- -webkit-animation-duration: 20s;
- -webkit-animation-timing-function: linear;
- -webkit-animation-delay: 0s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-play-state: running;
- /* Standard syntax */
animation-name: fadein3;
- animation-duration: 20s;
- animation-timing-function: linear;
- animation-delay: 0s;
- animation-iteration-count: infinite;
- animation-play-state: running;
}
#tlink {
- /* Chrome, Safari, Opera */
-webkit-animation-name: fadein4;
- -webkit-animation-duration: 20s;
- -webkit-animation-timing-function: linear;
- -webkit-animation-delay: 0s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-play-state: running;
- /* Standard syntax */
animation-name: fadein4;
- animation-duration: 20s;
- animation-timing-function: linear;
- animation-delay: 0s;
- animation-iteration-count: infinite;
- animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadein1 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ /* For IE8 and earlier */
+ filter: alpha(opacity=0); }
5% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
20% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
25% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
/* Standard syntax */
keyframes fadein1 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
5% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
20% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
25% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
@@ -111,44 +104,44 @@ keyframes fadein1 {
@-webkit-keyframes fadein2 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
25% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
30% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
45% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
50% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
/* Standard syntax */
@keyframes fadein2 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
25% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
30% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
45% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
50% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
@@ -157,44 +150,44 @@ keyframes fadein1 {
@-webkit-keyframes fadein3 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
50% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
55% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
70% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
75% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
/* Standard syntax */
keyframes fadein3 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
50% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
55% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
70% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
75% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
@@ -203,38 +196,38 @@ keyframes fadein3 {
@-webkit-keyframes fadein4 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
75% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
80% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
95% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
/* Standard syntax */
@keyframes fadein4 {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
75% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
80% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
95% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
@@ -244,30 +237,30 @@ keyframes fadein3 {
@-webkit-keyframes fadein {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
25% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
75% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
/* Standard syntax */
@keyframes fadein {
0% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
25% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
75% {
opacity: 1.0;
- filter: alpha(opacity=100); /* For IE8 and earlier */ }
+ filter: alpha(opacity=100); }
100% {
opacity: 0.0;
- filter: alpha(opacity=0); /* For IE8 and earlier */ }
+ filter: alpha(opacity=0); }
}
Modified: ctakes/site/new/examples.html
URL: http://svn.apache.org/viewvc/ctakes/site/new/examples.html?rev=1662557&r1=1662556&r2=1662557&view=diff
==============================================================================
--- ctakes/site/new/examples.html (original)
+++ ctakes/site/new/examples.html Thu Feb 26 20:19:02 2015
@@ -20,8 +20,7 @@
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
- <!-- TODO: Add any additional css that might be necessary -->
- <!-- css for marked text animation -->
+ <!-- css for carousel and marked text animation -->
<link href="css/examples.css" rel="stylesheet">
<script type="text/javascript">
@@ -106,9 +105,18 @@
<div class="container">
- <div id="guiCarousel" class="carousel slide" data-interval="3000" style="width: 100%; height: 300px;">
+ <div id="guiCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000" style="width: 100%; height: 300px;">
+ <!-- Indicators -->
+ <ol class="carousel-indicators">
+ <li data-target="#guiCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#guiCarousel" data-slide-to="1"></li>
+ <li data-target="#guiCarousel" data-slide-to="2"></li>
+ <li data-target="#guiCarousel" data-slide-to="3"></li>
+ <li data-target="#guiCarousel" data-slide-to="4"></li>
+ <li data-target="#guiCarousel" data-slide-to="5"></li>
+ </ol>
<!-- Slides -->
- <div class="carousel-inner">
+ <div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item active">
<div class="row">
@@ -205,6 +213,7 @@
</div>
</div>
</div>
+
</div>
</div>
<!-- End Carousel -->
@@ -213,10 +222,10 @@
<div class="container-fluid">
<div class="row" style="position: relative;">
<img class="img-responsive" src="images/MarkedText.png">
- <img id="neg-uncertain" class="img-responsive" src="images/NegAndUncertain2.png" style="position: absolute; top: 19.3%">
- <img id="coreference" class="img-responsive" src="images/Coreference2.png" style="position: absolute; top: 62%">
- <img id="locationof" class="img-responsive" src="images/LocationOf2.png" style="position: absolute; top: 50.7%">
- <img id="tlink" class="img-responsive" src="images/Tlink2.png" style="position: absolute; top: 70.5%">
+ <img id="neg-uncertain" class="markuper img-responsive" src="images/NegAndUncertain2.png" style="position: absolute; top: 19.3%">
+ <img id="coreference" class="markuper img-responsive" src="images/Coreference2.png" style="position: absolute; top: 62%">
+ <img id="locationof" class="markuper img-responsive" src="images/LocationOf2.png" style="position: absolute; top: 50.7%">
+ <img id="tlink" class="markuper img-responsive" src="images/Tlink2.png" style="position: absolute; top: 70.5%">
</div>
</div>
@@ -228,7 +237,9 @@
<hr>
Apache cTAKES, cTAKES, Apache, and the cTAKES logo are trademarks of
<a href="http://www.apache.org">The Apache Software Foundation</a>.
- <img src="images/feather_20v.png" style="max-height: 20px; float: right; margin-right: 20px;">
+ <a href="http://www.apache.org">
+ <img src="images/feather_20v.png" style="max-height: 20px; float: right; margin-right: 20px;">
+ </a>
</footer>
<script src="https://code.jquery.com/jquery.js"></script>