Difference between revisions of "Template:Harvard BioDesign/JS"

(Created page with " div { font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } .timeline { width: ...")
 
Line 1: Line 1:
−
             div {
+
             $(".timeline-item").hover(function () {
−
                font-family: Helvetica, Arial, sans-serif;
+
                 $(".timeline-item").removeClass("active");
−
                box-sizing: border-box;
+
                 $(this).toggleClass("active");
−
            }
+
                 $(this).prev(".timeline-item").toggleClass("close");
−
            .timeline {
+
                 $(this).next(".timeline-item").toggleClass("close");
−
                width: 400px;
+
             });
−
            }
+
−
            .timeline .timeline-item {
+
−
                width: 100%;
+
−
            }
+
−
            .timeline .timeline-item .info, .timeline .timeline-item .year {
+
−
                 color: #eee;
+
−
                display: block;
+
−
                float:left;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
            }
+
−
            .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
+
−
                color: #ccc;
+
−
                 -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
            }
+
−
            .timeline .timeline-item .year {
+
−
                font-size: 24px;
+
−
                font-weight: bold;
+
−
                width: 22%;
+
−
            }
+
−
            .timeline .timeline-item .info {
+
−
                width: 100%;
+
−
                width: 78%;
+
−
                margin-left: -2px;
+
−
                padding: 0 0 40px 35px;
+
−
                border-left: 4px solid #aaa;
+
−
                font-size: 14px;
+
−
                line-height: 20px;
+
−
            }
+
−
            .timeline .timeline-item .marker {
+
−
                background-color: #fff;
+
−
                border: 4px solid #aaa;
+
−
                height: 20px;
+
−
                width: 20px;
+
−
                border-radius: 100px;
+
−
                display: block;
+
−
                float: right;
+
−
                margin-right: -14px;
+
−
                z-index: 2000;
+
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
+
−
                color: #444;
+
−
                 -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
            }
+
−
            .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
+
−
                color: #9DB668;
+
−
            }
+
−
            .timeline .timeline-item .marker .dot {
+
−
                 background-color: white;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                display: block;
+
−
                border: 4px solid white;
+
−
                height: 12px;
+
−
                width: 12px;
+
−
                border-radius: 100px;
+
−
                float: right;
+
−
                z-index: 2000;
+
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                background-color: #9DB668;
+
−
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
+
−
             }
+

Revision as of 07:21, 2 July 2015

           $(".timeline-item").hover(function () {
               $(".timeline-item").removeClass("active");
               $(this).toggleClass("active");
               $(this).prev(".timeline-item").toggleClass("close");
               $(this).next(".timeline-item").toggleClass("close");
           });