Permalink
Browse files

added agenda animation

  • Loading branch information...
1 parent 740a674 commit 2205da27faba2c6180b0fbdd9ccd373f47625661 @digitaltom digitaltom committed Mar 6, 2013
Showing with 165 additions and 84 deletions.
  1. +29 −11 css/hackweek.css
  2. +115 −73 index.html
  3. +21 −0 js/hackweek.js
View
40 css/hackweek.css
@@ -224,41 +224,59 @@ li {
background-color: #d4df4c;
z-index: 30;
position: relative;
+ min-height: 700px;
+ max-height: 100%;
}
-#monday{
- margin-left: 190px;
+
+#agenda-content{
+ position: absolute;
+ left: 220px;
+ width: 2500px;
}
-#monday-content{
+
+.agenda-day-content{
height: 100%;
background: #00843e;
- width: 400px;
- margin-left: 470px;
+ width: 0px;
+ height: 1200px;
+ display: none;
+ float: left;
+}
+
+.agenda-day {
+ float: left;
+ margin-top: 300px;
+ margin-left: 30px;
+}
+
+#monday{
+}
+#monday-content{
}
#tuesday{
- margin-left: 900px;
+}
+#tuesday-content{
}
#wednesday{
- margin-left: 1170px;
}
#thursday{
- margin-left: 1440px;
}
#friday{
- margin-left: 1685px;
}
+
.agenda-details{
color: #FFF;
- position: absolute;
font-family: 'Droid Sans', sans-serif;
text-align: left;
padding: 20px;
+ white-space: nowrap;
+ overflow: hidden;
}
.agenda-details h1 {
margin-top: 0;
}
.agenda-item{
top: 50%;
- position: absolute;
font-family: 'Droid Sans', sans-serif;
text-align: center;
margin-top: -150px;
View
188 index.html
@@ -79,96 +79,138 @@
</div>
</div>
- <div id="agenda" class="page-size">
+ <div id="agenda" class="">
+
<div id="agenda-offices">
<span class="current">DE</span>
<span>US</span>
<span>CZ</span>
<span>CHN</span>
</div>
+
<div id="agenda-year">
April 2013
</div>
- <div id="monday">
- <div class="agenda-item">
- <div class="day-name">
- MONDAY
- </div>
- <div class="day-number">
- 08
- </div>
- </div>
- </div>
- <div id="monday-content">
- <div class="agenda-details">
- <h1>
- Morning
- </h1>
- <p>
- <h3>09:00am Breakfast</h3>
- <li><b>Menu</b></li>
- <li>- Grilled Bacon</li>
- <li>- Fried Egg</li>
- <li>- Grilled Pork Sausage with Baked Beans</li>
- <li>- Fresh Baked Tomato</li>
- <li>- Sauteed Mushroom</li>
- </p>
- <p>
- <h3>10:00am - 12:00am Lightning Talks</h3>
- <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
- <li>- Managing Network Interfaces</li>
- <li>- RADOS Distributed Storage</li>
- <li>- Ceph: Our experience so far in Studio-Cluster</li>
- <li>- The SUSE sales cycle</li>
- </p>
- <h1>
- Afternoon
- </h1>
- <h3>16:00am - 17:00am Lightning Talks</h3>
- <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
- <li>- Managing Network Interfaces</li>
- </p>
- </div>
- </div>
- <div id="tuesday">
- <div class="agenda-item">
- <div class="day-name">
- TUESDAY
- </div>
- <div class="day-number">
- 09
- </div>
+
+ <div id="agenda-content">
+
+ <div id="monday" class="agenda-day">
+ <div class="agenda-item">
+ <div class="day-name">
+ MONDAY
+ </div>
+ <div class="day-number">
+ 08
+ </div>
+ </div>
</div>
- </div>
- <div id="wednesday">
- <div class="agenda-item">
- <div class="day-name">
- WEDNESDAY
- </div>
- <div class="day-number">
- 10
- </div>
+
+ <div class="agenda-day-content" id="monday-content">
+ <div class="agenda-details">
+ <h1>
+ Morning
+ </h1>
+ <p>
+ <h3>09:00am Breakfast</h3>
+ <li><b>Menu</b></li>
+ <li>- Grilled Bacon</li>
+ <li>- Fried Egg</li>
+ <li>- Grilled Pork Sausage with Baked Beans</li>
+ <li>- Fresh Baked Tomato</li>
+ <li>- Sauteed Mushroom</li>
+ </p>
+ <p>
+ <h3>10:00am - 12:00am Lightning Talks</h3>
+ <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
+ <li>- Managing Network Interfaces</li>
+ <li>- RADOS Distributed Storage</li>
+ <li>- Ceph: Our experience so far in Studio-Cluster</li>
+ <li>- The SUSE sales cycle</li>
+ </p>
+ <h1>
+ Afternoon
+ </h1>
+ <h3>16:00am - 17:00am Lightning Talks</h3>
+ <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
+ <li>- Managing Network Interfaces</li>
+ </p>
+ </div>
</div>
- </div>
- <div id="thursday">
- <div class="agenda-item">
- <div class="day-name">
- THURSDAY
+
+ <div id="tuesday" class="agenda-day">
+ <div class="agenda-item">
+ <div class="day-name">
+ TUESDAY
+ </div>
+ <div class="day-number">
+ 09
+ </div>
</div>
- <div class="day-number">
- 11
+ </div>
+
+ <div class="agenda-day-content" id="tuesday-content">
+ <div class="agenda-details">
+ <h1>
+ Morning
+ </h1>
+ <p>
+ <h3>09:00am Breakfast</h3>
+ <li><b>Menu</b></li>
+ <li>- Grilled Bacon</li>
+ <li>- Fried Egg</li>
+ <li>- Grilled Pork Sausage with Baked Beans</li>
+ <li>- Fresh Baked Tomato</li>
+ <li>- Sauteed Mushroom</li>
+ </p>
+ <p>
+ <h3>10:00am - 12:00am Lightning Talks</h3>
+ <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
+ <li>- Managing Network Interfaces</li>
+ <li>- RADOS Distributed Storage</li>
+ <li>- Ceph: Our experience so far in Studio-Cluster</li>
+ <li>- The SUSE sales cycle</li>
+ </p>
+ <h1>
+ Afternoon
+ </h1>
+ <h3>16:00am - 17:00am Lightning Talks</h3>
+ <li>- ownCloud (Klaas Freitag/ownCloud Inc.)</li>
+ <li>- Managing Network Interfaces</li>
+ </p>
+ </div>
+ </div>
+
+ <div id="wednesday" class="agenda-day">
+ <div class="agenda-item">
+ <div class="day-name">
+ WEDNESDAY
+ </div>
+ <div class="day-number">
+ 10
+ </div>
</div>
</div>
- </div>
- <div id="friday">
- <div class="agenda-item">
- <div class="day-name">
- FRIDAY
+ <div id="thursday" class="agenda-day">
+ <div class="agenda-item">
+ <div class="day-name">
+ THURSDAY
+ </div>
+ <div class="day-number">
+ 11
+ </div>
</div>
- <div class="day-number">
- 12
+ </div>
+ <div id="friday" class="agenda-day">
+ <div class="agenda-item">
+ <div class="day-name">
+ FRIDAY
+ </div>
+ <div class="day-number">
+ 12
+ </div>
</div>
</div>
+
</div>
</div>
View
21 js/hackweek.js
@@ -50,6 +50,27 @@ $(function () {
}
})
+ /* agenda */
+ $("#monday").mouseover(function () {
+ slidein_agenda_day($('#monday-content'))
+ })
+ $("#tuesday").mouseover(function () {
+ slidein_agenda_day($('#tuesday-content'))
+ })
+
+ function slidein_agenda_day(element) {
+ if (element.css('width') != "400px") {
+ $(".agenda-day-content").stop().animate({
+ 'width': '0px', 'opacity': 0
+ }, 800);
+ element.css({ width: 0, 'opacity': 0 })
+ .show()
+ .stop().animate({
+ 'width': '400px', 'opacity': 1
+ }, 800);
+ }
+ }
+
function toggle_terminal() {
if ($('#terminal').is(":visible")) {

0 comments on commit 2205da2

Please sign in to comment.