KurtWM

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PromotionsViaXSLT.ascx.cs" Inherits="ArenaWeb.UserControls.Custom.Cccev.Web2.PromotionsViaXSLT" %>
<%@ Register TagPrefix="Arena" Namespace="Arena.Portal.UI" Assembly="Arena.Portal.UI" %>
<asp:ScriptManagerProxy ID="smpScripts" runat="server" />
<Arena:XmlTransform id="xmlTransform" runat="server"></Arena:XmlTransform>                              

KurtWM

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

KurtWM

<div itemscope itemtype="http://data-vocabulary.org/Event">
  ​<a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">After their highly-publicized search for a new drummer,
   Spinal Tap kicks off their latest comeback tour with a San
   Francisco show.</span>

KurtWM

body {
  font-family: sans-serif;
}

ul {
  list-style: none
}

li {
  background: slategrey;

KurtWM

<div id="msg"><span id="wheeldelta"></span><span id="panzoompan"></span></div>
<section id="panzoom-parent">
  <div class="panzoom">
    <img class="element" src="http://www.johnsonferry.org/portals/0/assets/common/images/JohnsonFerry_floorPlan_drawing_0.svg" />
  </div>
</section>
<section class="buttons">
  <button class="zoom-in">Zoom In</button>
  <button class="zoom-out">Zoom Out</button>
  <input type="range" class="zoom-range" min="1" max="5" step="0.05"/>

KurtWM

<div id="container">
  <img id="polar-bear-image" src="http://www.johnsonferry.org/portals/0/assets/newsevents/images/polarBearRunners_transpLeft_tinypng.png" alt="Polar Bear Run 2014" style="display: none;" />
  <h3>Header Goes Here</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet orci vel dui luctus accumsan. Fusce malesuada tristique orci, sit amet luctus neque placerat et. Aliquam consequat tellus auctor massa auctor, vel condimentum elit congue.</p>
    <img id="polar-bear-image" class="sample" src="http://www.johnsonferry.org/portals/0/assets/newsevents/images/polarBearRunners_transpLeft_tinypng.png" />
  <p><strong>Here is the actual PNG image used in the loop. The left side provides transparency to allow the image to seamlessly overlap itself. </strong></p>
  </div>

KurtWM

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.

KurtWM

JQuery PanZoom - Custom controls

This is a test implementation of the JQuery PanZoom plugin. The idea is to have SVG floor plans that can be cleanly scaled and panned.

This version does not have the slider zoom-indicator.

A Pen by KurtWM on CodePen.

License.

KurtWM

/*properties
    addClass, after, ajaxComplete, appendTo, attr, children, css, filter, find,
    first, prev, remove, removeAttr, removeClass, test, url
*/

var customButtonsCreated = false,
    // Douglas Crockford's short method for determining object types.
    typeOf = function (value) {
        "use strict";
        var s = typeof value;

KurtWM

.top-bar-section .right {
    display: none;
}

#main .live-prayer {
    height: 0;
    padding: 0;
    overflow: visible;
    border: none;
    box-shadow: none;