Baker Huges Timeline Event

Simple layout for an individual BH timeline event. Take note of the scrolling text section.

by Pete Fecteau

HTML

<div id="callout-layer">
    <div class="callout type-3 template tech">
        <div class="icon"></div>
        <div class="innerWrap">
            <div class="close-icon"></div>
            <div class="header">
                <div class="line-left"></div>
                <div class="chevron"></div>
                <div class="line-right"></div>
                <div class="date">YYYY</div>
                <div class="category">Category</div>
            </div>
            <div class="content">
                <div class="slideshow">
                    <ul>
                        <li style="background-image:url('http://buttonpresser.com/bh_proto/images/001.jpg');">
                            <span>Caption</span>
                        </li>
                        <li style="background-image:url('http://buttonpresser.com/bh_proto/images/002.jpg');">
                            <span>Caption</span>
                        </li>
                        <li style="background-image:url('http://buttonpresser.com/bh_proto/images/003.jpg');">
                            <span>Caption</span>
                        </li>
                    </ul>
                </div>
                <div class="rightcol">
                    <h2 class="eventName">Event Name</h2>
                    <div class="eventExcerpt">
                        <excerpt>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et facilisis nibh. Cras condimentum nunc viverra, tristique risus sed, tristique metus. Quisque iaculis eros semper diam dignissim molestie. Suspendisse diam ligula, euismod vel mi et, pharetra ornare lorem. Aliquam erat volutpat. Nam aliquet mollis est varius sagittis. Proin consectetur nisi vitae lectus interdum feugiat. In lorem purus, vulputate nec malesuada in, consectetur a sem. Vivamus dignissim enim et ullamcorper rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam facilisis enim ut est dignissim...

CSS

/*-------------*/
/*--- RESET ---*/
/*-------------*/
html,body {padding:0;margin:0;}
body {
    font-family:'Helvetica', Arial, san-serif;
    font-size:14px;
    font-weight:normal;
    background-color:#002b5e;
    padding-top:36px;
}
h1,h2,h3,h4,h5 {margin:0;padding:0;line-height:100%}
ul,li {margin:0;padding:0;}
p {display:block;line-height:161%;margin:0 0 10px 0;}
p:first-of-type {margin:10px 0;}
p:last-of-type {margin-bottom:0;}


/*----------------------*/
/*--- ENVIRONMENTALS ---*/
/*----------------------*/
.clearfix {clear:both;}


/*----------------------*/
/*--- CALLOUT STYLES ---*/
/*----------------------*/
#callout-layer {}
#callout-layer .callout {
    position:relative;
    max-height:350px;
    width:500px;
    color:#FFF;
}
#callout-layer .callout.type-3 {width:810px;}
#callout-layer .callout .icon {
    height:36px;
    width:36px;
    background-image:url('http://buttonpresser.com/bh_proto/images/callout-sprite.png');
    background-repeat:no-repeat;
    position:relative;
    top:-36px;
    left:50%;
    margin:0 0 -36px -18px;
    cursor:pointer;
}
#callout-layer .callout.type-3 .icon {left:380px;}
#callout-layer .callout.biz .icon {background-position:-72px 0;}
#callout-layer .callout.ind .icon {background-position:-36px 0;}
#callout-layer .callout.tech .icon {background-position:0 0;}

#callout-layer .callout .innerWrap {
    height:400px;
    overflow-y:hidden;
    overflow-x:visible;
}
#callout-layer .callout .header {
    position:relative;
    width: 100%;
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0; /*remove the gaps between inline elements*/
    margin-bottom:20px;
}
#callout-layer .callout .header .line-left,
#callout-layer .callout .header .line-right {
    position: relative;
    width: 40%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}
#callout-layer .callout.type-3 .header .line-left,
#callout-layer .callout.type-3 .header .line-right {width:...

JavaScript

function bhSlideshow(delay) {
    var $slides = $('.slideshow ul li');
    
    $slides.each(function(i) {
        if (i === 0){
            return;
        }
        var slideDelay = (i * delay) + 's';
        $(this).css({
            "animation-name":'fadein',
            "animation-delay": slideDelay
        });
    });
}
bhSlideshow(6);

$('.callout .icon').click(function() {
  $('.innerWrap').animate({height: 400}, 400, "swing");
  $('.close-icon').animate({opacity: 1}, 400, "swing");
});