A Pen by KurtWM.

index.html

<div id="slider-container">
    <div class="slider-outer">
        <div>
            <a href="http://www.johnsonferry.org/Worship.aspx" target="_blank" title="Contemporary Service">
                <img src="http://www.johnsonferry.org/portals/0/assets/banners/contemporary_1280px.jpg"
                alt="Contemporary Service" style="width: 100%;">
            </a>
        </div>
        <div>
            <a href="http://www.johnsonferry.org/Worship.aspx" target="_blank" title="Traditional Service">
                <img src="http://www.johnsonferry.org/portals/0/assets/banners/traditional_1280px.jpg"
                alt="Traditional Service" style="width: 100%;">
            </a>
        </div>
        <div>
            <a href="default.aspx?page=3356&amp;promotionId=1000" target="_parent" title="The Cafe">
                <img src="http://www.johnsonferry.org/portals/0/assets/banners/cafe_1280px.jpg" alt="The Cafe"
                style="width: 100%;">
            </a>
        </div>
        <div>
            <a href="https://jfaccess.johnsonferry.org/default.aspx?page=3461" target="_blank"
            title="Sunday Bible Studies">
                <img src="http://www.johnsonferry.org/portals/0/assets/banners/classes_1280px.jpg"
                alt="Sunday Bible Studies" style="width: 100%;">
            </a>
        </div>
        <div>
            <a href="http://www.johnsonferry.org/children.aspx" target="_blank" title="Childrens Worship">
                <img src="http://www.johnsonferry.org/portals/0/assets/banners/children_1280px.jpg"
                alt="Childrens Worship" style="width: 100%;">
            </a>
        </div>
    </div>
    <div id="side-links">
        <ul>
            <li>
                <div id="watch-now-btn" class="button button-block button-rounded button-flat-primary-dark">
                    <span>Watch Online</span>
                    <div id="churchonline_counter" class="sunkenPanel">
                        <div class="live">Live Now</div>
                        <div class="info">
                            <div class="title"></div>
                            <div class="description"></div>
                        </div>
                        <ul class="time">
                            <li><span class="days"></span> <span class="label">days</span>
                            </li>
                            <li><span class="hours"></span> <span class="label">hrs</span>
                            </li>
                            <li><span class="minutes"></span> <span class="label">mins</span>
                            </li>
                            <li><span class="seconds"></span> <span class="label">secs</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <a href="http://jftraditional.churchonline.org" target="_blank" class="button button-rounded button-highlight">Traditional</a>
                        <a href="http://jfcontemporary.churchonline.org" target="_blank" class="button button-rounded button-highlight">Contemporary</a>
                    </div>
                </div>
            </li>
            <li>
                <a href="http://rightfromtheheart.org/sermon_archives/" target="_blank" class="button button-block button-rounded button-primary">
                    <span>Sermon Archives</span>
                </a>
            </li>
            <li>
                <a href="http://www.johnsonferry.org/ImNew/" target="_parent" class="button button-block button-rounded button-primary">
                    <span>I'm New</span>
                </a>
            </li>
            <li>
                <a href="http://www.johnsonferry.org/PrayerRequest/" target="_parent" class="button button-block button-rounded button-primary">
                    <span>Prayer Request</span>
                </a>
            </li>
            <li>
                <a href="http://jfaccess.johnsonferry.org/default.aspx?page=3355" target="_parent"
                class="button button-block button-rounded button-primary">
                    <span>Register for an Event</span>
                </a>
            </li>
        </ul>
    </div>
</div>

JF-Home-Page-Controls.markdown

JF Home Page Controls

This is the main home page content for the Johnson Ferry Baptist Church web site.

A Pen by KurtWM on CodePen.

License.

script.js

$(window).load(function(){
	$(".slider-outer").cycle({
		fx: 'fade',
		speed: 3000,
		timeout: 2000,
		pause: 'true',
		fit: 'false',
		width: '640',
		slideResize: '0',
		containerResize: '0',
		random: false
	});
});

$(function () {
  'use strict';
  var days,
    hours,
    minutes,
    seconds,
    intervalId;

  function goLive() {
    $('#churchonline_counter .live').show();
    $('#churchonline_counter .time, #churchonline_counter .info').hide();
  }

  $.ajax({
    url: "http://jfcontemporary.churchonline.org/event_times/next",
    dataType: "jsonp",
    success: function (data) {
      $('#churchonline_counter').show();

      if (typeof (data.current_timestamp) !== "undefined") {
        goLive();
      } else if (typeof (data.next_timestamp) !== "undefined") {
        $("#churchonline_counter .title").html(data.next_title);
        $("#churchonline_counter .description").html(data.next_description);

        var seconds_till = data.next_timestamp - (new Date().getTime() / 1000);

        days = Math.floor(seconds_till / 86400);
        hours = Math.floor((seconds_till % 86400) / 3600);
        minutes = Math.floor((seconds_till % 3600) / 60);
        seconds = Math.floor(seconds_till % 60);

        intervalId = setInterval(function () {
          seconds = seconds - 1;
          if (seconds < 0) {
            seconds = 59;
            minutes = minutes - 1;
            if (minutes < 0) {
              minutes = 59;
              hours = hours - 1;
              if (hours < 0) {
                hours = 23;
                days = days - 1;
                if (days < 0) {
                  days = 0;
                }
              }
            }
          }

          $("#churchonline_counter .days").html((days.toString().length < 2) ? "0" + days : days);
          $("#churchonline_counter .hours").html((hours.toString().length < 2) ? "0" + hours : hours);
          $("#churchonline_counter .minutes").html((minutes.toString().length < 2) ? "0" + minutes : minutes);
          $("#churchonline_counter .seconds").html((seconds.toString().length < 2) ? "0" + seconds : seconds);

          if (seconds === 0 && minutes === 0 && hours === 0 && days === 0) {
            goLive();
            clearInterval(intervalId);
          }
        }, 1000);
      }
    }
  });
})();

style.css

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300|Roboto+Condensed:400,700);
@import url('http://www.johnsonferry.org/css/ChurchonlineCountdown_vendorBased.css');
@import url('http://www.johnsonferry.org/css/buttons.css');
@import url('http://www.johnsonferry.org/css/sunkenPanel.css');

#slider-container
{
  position: relative;
  top: 0;
  left: -10px;
  background-color: Transparent;
  width: 960px;
  height: 360px;
}

.slider-outer
{  
overflow: hidden;
  position: relative; 
  width: 640px; 
  height: 360px;
}

#slider-container #side-links
{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 302px;
}

#slider-container #side-links>ul
{
  list-style: none;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}

#slider-container #side-links>ul>li
{
  border-top: 3px solid Transparent;
  list-style-type: none;
}

#slider-container #side-links>ul>li>a
{
  height: 54px;
  padding: 0 !important;
  color: #FFFFFF;
}

#slider-container #side-links>ul>li>a>span
{
  font-family: 'Roboto Condensed', Arial, FreeSans, Verdana, Helvetica, 'Liberation Sans', sans-serif;
  line-height: 1.5em;
  font-size: 1.5em;
  color: #FFFFFF;
  position: relative;
  top: 10px;
}

/* Button color overrides */

#slider-container #side-links ul li #watch-now-btn
{
  height: 124px !important;
  padding: 0 !important;
}

#slider-container>#side-links>ul>li>#watch-now-btn>span
{
  font-family: 'Roboto Condensed', Arial, FreeSans, Verdana, Helvetica, 'Liberation Sans', sans-serif;
  line-height: 1.5em;
  font-size: 1.5em;
}

#slider-container #side-links ul li #watch-now-btn:hover
{
background: #3e4fb8 !important;
}

#watch-now-btn div
{
  white-space: nowrap !important;
}
#watch-now-btn div a
{
  width: 84px;
  color: #FFFFFF;
  font-family: 'Roboto Condensed', Arial, FreeSans, Verdana, Helvetica, 'Liberation Sans', sans-serif;
  line-height: 32px;
  font-size: 14px;
}

/* LI first-child overrides. */

#slider-container #side-links>ul>li:nth-child(1)
{
  border-top: none;
}

#slider-container #side-links>ul>li:nth-child(1)>a
{
  height: 121px !important;
}

#slider-container #side-links>ul>li:nth-child(1)>a>span
{
  top: 0 !important;
}