Skip to content

Instantly share code, notes, and snippets.

@johndhancock

johndhancock/customJS.js

Last active August 29, 2015 14:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save johndhancock/4199f6aa6ae3ef662308 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save johndhancock/4199f6aa6ae3ef662308 to your computer and use it in GitHub Desktop.
Download ZIP
Map repositioning on scroll
Raw
customJS.js
$(document).ready(function() {
//custom scripting goes here
// map setup
L.Browser.webkit3d = false;
var map;
map = L.map('map').setView([32.8935772, -96.8870228],10);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/macman.k8fboh62/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Staff Graphic | Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'bontonMap',
}).addTo(map);
map.scrollWheelZoom.disable();
//arrays of your lats and longs. These need to be in the same order as your waypoints in the story, with the first being the default map view
var mapPositions = [
[32.8206645,-96.7313396],
[29.817178,-95.4012915],
[29.4814305,-98.5144044],
[30.3077609,-97.7534014]
]
// resets your map center based on a supplied set of lats and longs from above
function adjustMap(i) {
map.setView(new L.LatLng(mapPositions[i][0], mapPositions[i][1]), 10);
}
function mapZooming() {
var windowHeight = $(window).height(); //getting the height of the window. We'll use this in combination with the window's scroll top to find out where down the page the bottom of the window is
var bottomThreshold = windowHeight * .2;
var triggers = [0]; // triggers will be the vertical pixel positions of each of your triggering waypoints
//replace "zoomer" with whatever class you use for your waypoints
$('.zoomer').each(function(k, v) {
var zoomerPosition = $(this).offset().top;
triggers.push(zoomerPosition); // populating your triggers array with each triggers vertical offset
})
triggers.push(100000000); //adding a last value to trigger that is stupidly large. This is to ensure this last number is at least as big as the bottom of your page
var currentLocation = 0; // current location is set to 0. we'll check this against new locations as they come in.
$(window).scroll(function() {
var windowTop = $(window).scrollTop(); //how far down we've scrolled
var windowBottom = windowTop + windowHeight; //how far down we've scrolled, plus the height of the window. This marks where the page is in vertical pixels at the bottom of the browser
// as we scroll, see where we fall in the list of vertical offsets for the waypoint triggers. we subtract 100 from the window bottom to give the item a little padding to scroll onto the screen before triggering the map reposition
for (i=0; i < triggers.length; i ++) {
if (windowBottom - bottomThreshold > triggers[i] && windowBottom < triggers[i + 1]) {
newLocation = i; //mark the index value of the location we're currently on
// if our new location doesn't match the current location, it means we've hit a trigger, and we should reposition the map
if (newLocation !== currentLocation) {
adjustMap(newLocation);
currentLocation = newLocation;
}
}
}
})
}
$(window).resize(function() {
mapZooming();
})
mapZooming();
});
Raw
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head prefix='og: http://ogp.me/ns#'>
<!-- Add Custom Meta Data -->
<meta content="dallas, dallas fort worth, dallas news, dallas fort worth news, dfw news, dallas local news, dallas fort worth local news, dallas breaking news, dallas fort worth breaking news, dallas weather, dallas fort worth weather, dallas traffic, dallas fort worth traffic, dallas sports, dallas fort worth sports, dallas entertainment, dallas fort worth entertainment, dallas newspaper, dallas morning news, dallas morning news newspaper" name="keywords" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta content="Description goes here" name="description" />
<title>Title goes here</title>
<meta property="og:url" content="URL goes here" />
<meta property="og:title" content="Title goes here"/>
<meta property="og:description" content="Description goes here" name="description"/>
<meta property="og:image" content="share image url goes here"/>
<meta property="og:image:height" content="400"/>
<meta property="og:image:width" content="600"/>
<meta name="twitter:card" content="summary_large_image">
<meta name='parsely-page' id='parsely-page' content='{"title": "Title goes here", "link": "URL goes here", "image_url": "Share image url goes here", "type": "post", "post_id": "########### <- UNIQUE POST ID HERE", "pub_date": "YEAR-MM-DD", "section": "SECTION GOES HERE", "author": ["AUTHOR GOES HERE"], tags": ["dallas", "dallas fort worth", "dallas news", "dallas fort worth news", "dfw news", "dallas local news", "dallas fort worth local news", "dallas breaking news", "dallas fort worth breaking news", "dallas weather", "dallas fort worth weather", "dallas traffic", "dallas fort worth traffic", "dallas sports", "dallas fort worth sports", "dallas entertainment", "dallas fort worth entertainment", "dallas newspaper", "dallas morning news", "dallas morning news newspaper"]}'/>
<meta property="og:keywords" content="dallas, dallas fort worth, dallas news, dallas fort worth news, dfw news, dallas local news, dallas fort worth local news, dallas breaking news, dallas fort worth breaking news, dallas weather, dallas fort worth weather, dallas traffic, dallas fort worth traffic, dallas sports, dallas fort worth sports, dallas entertainment, dallas fort worth entertainment, dallas newspaper, dallas morning news, dallas morning news newspaper"/>
<meta name='news_keywords' content='dallas, dallas fort worth, dallas news, dallas fort worth news, dfw news, dallas local news, dallas fort worth local news, dallas breaking news, dallas fort worth breaking news, dallas weather, dallas fort worth weather, dallas traffic, dallas fort worth traffic, dallas sports, dallas fort worth sports, dallas entertainment, dallas fort worth entertainment, dallas newspaper, dallas morning news, dallas morning news newspaper'/>
<!-- End Custom Meta Data -->
<meta property="fb:app_id" content="258290334265148"/>
<meta property="fb:page_id" content="20946638799"/>
<meta property="fb:admins" content="1043783589"/>
<link rel="shortcut icon" type="image/x-icon" href="http://www.dallasnews.com/favicon-premium.ico"/>
<link rel="stylesheet" type="text/css" href="css/theme.css" />
<link rel="stylesheet" type="text/css" href="/interactives/template/css/code.css" />
<link rel="stylesheet" type="text/css" href="/resrsc/premium/www/css/print.css" media="print"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,700italic%7CMerriweather:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script type="text/javascript" src="http://res.dallasnews.com/interactives/template/common/js/responsive-styles.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript">
WebFont.load({
google: { //change custom to google: if using google cdn font
families: ['Open+Sans', 'Merriweather'],
}
});
</script>
<script src="/interactives/template/common/js/jquery-1.10.2.min.js"></script>
<!-- Un-note the following line to use NDN video -->
<!--
<script type="text/javascript" async src="http://launch.newsinc.com/js/embed.js" id="_nw2e-js"></script>
-->
<!--[if lt IE 9]><script type="text/javascript" src="/interactives/template/common/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type="text/javascript">
DFP_networkId = "11222444";
var DFPSlotSizes = [];
if (jQuery(window).width() < 768)
{
var DFP_sitepage = "m.DMN/interactives";
DFPSlotSizes = [320,50]
var adSlot0 = googletag.defineSlot('/' + DFP_networkId + '/' + DFP_sitepage, DFPSlotSizes, "dfpAdPositionTop");
adSlot0.setTargeting("position", "x01");
adSlot0.addService(googletag.pubads());
}
else
{
var DFP_sitepage = "DMN/interactives";
DFPSlotSizes = [728,90]
var adSlot0 = googletag.defineSlot('/' + DFP_networkId + '/' + DFP_sitepage, DFPSlotSizes, "dfpAdPositionTop");
adSlot0.setTargeting("position", "Top");
adSlot0.addService(googletag.pubads());
}
</script>
<script type="text/javascript">
googletag.pubads().enableSingleRequest();
googletag.pubads().enableSyncRendering();
googletag.enableServices();
</script>
</head>
<body>
<script type="text/javascript" src="http://res.dallasnews.com/resources/cobrand/js/blogs/parselyDynamicTracking.js"></script>
<script type="text/javascript" src="http://res.dallasnews.com/interactives/template/common/js/responsive-header.js"></script>
<article>
<section id="contentHeader">
<img src="images/defaultImage.jpg" alt="FILL THIS IN">
<p class="cutline">Cutline goes here. You can remove this tag if you don't feel the lead image needs a cutline</p>
</section>
<!-- end contentHeader -->
<div id="wrapper">
<section class="bodyCopy">
<header id="storyHead">
<h3>Label, if needed</h3>
<h1>Main Headline</h1>
<h2>Deck head goes in this spot here</h2>
</header>
<!-- end storyHead -->
<section class="bylineBlock">
<p>By <a target="blank" href="mailto:emailaddresshere">Writer Name</a> | Staff Writer</p>
<p>Published Month Date, Year</p>
</section>
<!-- end bylineBlock -->
<div class="shareComments shareCommentsTop">
<ul id="share-bar1" class="width-auto-hack"></ul>
</div>
<!-- end shareComments -->
<div id="map">
</div>
<p class="intro"><span class="dropcap">A</span>n opening paragraph goes here. orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum tortor a eleifend sagittis. Quisque laoreet elit vitae turpis aliquet tincidunt. Nulla molestie vitae purus eget dignissim. Quisque blandit nibh lorem, non mollis velit rutrum ac. Pellentesque pharetra mattis luctus.</p>
<!-- story goes here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum tortor a eleifend sagittis. Quisque laoreet elit vitae turpis aliquet tincidunt. Nulla molestie vitae purus eget dignissim. Quisque blandit nibh lorem, non mollis velit rutrum ac. Pellentesque pharetra mattis luctus. Sed congue iaculis leo vel convallis. Aenean velit sapien, ultricies sit amet ligula sit amet, dapibus egestas metus. Quisque vitae cursus mauris, quis sagittis felis. Pellentesque in enim ut leo suscipit bibendum.</p>
<p>Fusce sed arcu magna. Quisque sit amet porttitor massa, eu suscipit sem. Quisque facilisis quis urna non elementum. Suspendisse quis nisl ut elit sagittis eleifend. Nullam sed tortor est. Nulla vitae volutpat risus, vel pretium nibh. Aenean lacinia tempor nisi, vitae laoreet turpis molestie ut. Vivamus ut nisl interdum, dictum sapien sed, condimentum neque. Curabitur eu eros urna. Curabitur et risus vestibulum, vulputate dui sed, pulvinar augue.</p>
<h3 class="zoomer" id="houston">This zooms to houston</h3>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<h3 class="zoomer" id="sanAntonio">This is zooms to San Antonio</h3>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<h3 class="zoomer" id="austin">This zooms to Austin</h3>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<p>Nullam massa magna, ullamcorper eget posuere eu, adipiscing vitae purus. Morbi ut magna pharetra, rhoncus elit id, mollis magna. Nulla quis mi arcu. Vivamus tincidunt ultricies tellus, a malesuada elit pretium ac. Praesent elementum cursus nibh quis porta. Suspendisse ante libero, rhoncus sed purus sed, tempus faucibus purus. Suspendisse aliquam massa id massa pulvinar fermentum. Phasellus facilisis et nulla a molestie. In enim mauris, gravida eu malesuada at, consequat in tellus. Aliquam erat volutpat. Etiam ac viverra magna, non facilisis lectus. Morbi purus ligula, sodales feugiat ipsum ut, viverra rutrum ipsum.</p>
<section class="credits clearFix">
<p>Author: <a href="mailto:emailaddress">Name</a></p>
<p>Editor: <a href="mailto:emailaddress">Name</a></p>
<p>Copy Editor: <a href="mailto:emailaddress">Name</a></p>
<p>Photos: <a href="mailto:emailaddress">Name</a></p>
<p>Graphics: <a href="mailto:emailaddress">Name</a></p>
<p>Designer: <a href="mailto:emailaddress">Name</a></p>
</section>
<!-- end credits -->
<section class="more clearFix">
<h1>More from The Dallas Morning News</h1>
<a href="#">
<img src="images/defaultImage.jpg" alt="Fill this in">
<h5>Story title goes here</h5>
<p>Description of the story goes in this spot here</p>
</a>
<a href="#">
<img src="images/defaultImage.jpg" alt="Fill this in">
<h5>Story title goes here</h5>
<p>Description of the story goes in this spot here</p>
</a>
<a href="#">
<img src="images/defaultImage.jpg" alt="Fill this in">
<h5>Story title goes here</h5>
<p>Description of the story goes in this spot here</p>
</a>
</section>
<!-- end more -->
<div class="shareComments">
<ul id="share-bar2" class="width-auto-hack"></ul>
<div id="comments"></div>
</div>
<!-- end shareComments -->
</section>
<!-- end bodyCopy -->
</div>
<!-- end wrapper -->
</article>
<!-- end relatedFooter -->
<script type="text/javascript" src="http://res.dallasnews.com/interactives/template/common/js/responsive-footer.js"></script>
<script type="text/javascript" src="js/customJS.js"></script>
<!-- Gigya -->
<!-- Can this be included when initialized? -->
<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=3_9lzrxJh-GQofXtoOq-ADFDpwOla0DXKJOvVl_KnlZPjeuRyBKYHjyaA2UYgGvXGv&amp;ver=3.0.4">
{
lang : 'en',
enabledProviders: 'facebook,twitter,google,linkedin,yahoo,messenger',
connectWithoutLoginBehavior: 'alwaysLogin'
}
</script>
<!-- Gigya Templates -->
<script id="gigya-new-user-tmpl" type="text/x-jquery-tmpl">
<div id='gigya-new-user-wrap' class='float-left'>
<h3 class='label'>Please provide your email address to join</h3>
<p>
<label>Email<br>
<input type='text' name='email' size='20' value='' class='input'>
</label>
</p>
<div class='button-wrap'>
<input id='gigya-new-user-button' style='width:auto;' type='button' value='Register' class='button-primary'>
</div>
</div>
</script>
<script id="gigya-account-linking-tmpl" type="text/x-jquery-tmpl">
<div id='gigya-sep-wrap'>
<div class="sep-line"></div>
<h3>OR</h3>
<div class="sep-line"></div>
</div>
<div id='gigya-account-linking-wrap'>
<h3 class='label'>Yes, Please link my existing account with ${user.loginProvider} for quick and secure access</h3>
<p>
<label>Email<br>
<input type='text' size='20' value='' class='input' name='email'>
</label>
</p>
<p>
<label>Password<br>
<input type='password' size='20' value='' class='input' name='password'>
</label>
</p>
<div class='button-wrap'>
<input id='gigya-new-account-button' style='width:auto;' type='button' value='Link Accounts' class='button-primary'>
</div>
</div>
</script>
<script id="gigya-header-tmpl" type="text/x-jquery-tmpl">
<div id='dialog-header'>
<div class="ui-helper-clearfix">
<img class='thumbnail' src='${user.thumbnailURL}'/>
<p class='text'>
<b>Hi ${user.firstName}</b>
{{if isEmailExist}}, The email is already used, please provide a new email or link to an existing account.{{/if}}
{{if isNewUser}}{{/if}}
</p>
</div>
</div>
</script>
<!-- End Gigya Templates -->
<!-- End Gigya -->
<script type="text/javascript">
var storyTitle = "TITLE HERE",
storyURL = "URL Here",
leadText = "DESCRIPTION HERE",
storyIMG = "SHARE IMAGE URL HERE",
storyAuthor = "AUTHOR NAME HERE",
comments = true,
share = true;
</script>
<script type="text/javascript">OAS_sitepage = 'SECTION URL HERE';</script>
<script type="text/javascript" src="/interactives/template/common/js/common-v1.js"></script>
<script type="text/javascript" src="/resrsc/js/biomniture.js"></script>
<script type="text/javascript" src="js/actions-v0.js"></script>
<!-- START Parse.ly Include: Standard -->
<div id="parsely-root" style="display: none">
<div id="parsely-cfg" data-parsely-site="dallasnews.com"></div>
</div>
<script>
(function(s, p, d) {
var h=d.location.protocol, i=p+"-"+s,
e=d.getElementById(i), r=d.getElementById(p+"-root"),
u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
:"static."+p+".com";
if (e) return;
e = d.createElement(s); e.id = i; e.async = true;
e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);
</script>
<!-- END Parse.ly Include: Standard -->
</body>
</html>
Raw
theme.css
/* COLORS */
/*
WARM GREY: #CECDC6, rgb(206,205,198); borders
LINK BLUE: #5CA3E6, rgb(92,163,230);
DARK GREY: #797470, rgb(121,116,112);
WARM BLACK: #3D3D3D, rgb(61,61,61); display type
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/*clearfix hack */
.clearFix:after {
content: "";
display: table;
clear: both; }
/* ***** KASON TEMPLATE STYLES ***** */
.width-auto-hack,
.gig-comments-container {
width: auto !important;
margin: 0;
padding: 0; }
.gig-share-bar-container td {
display: inline-block;
padding: .5em 0; }
.gig-share-bar-container td td {
display: table-cell;
padding: 0; }
/* ***** GLOBAL/ARTICLE STYLES STYLES ***** */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html {
font-size: 10px;
color: rgb(33,33,33);
}
body {
z-index: 0; }
article {
font-family: 'Open Sans', Arial, sans-serif;
width: 100%;
}
footer p {
max-width: none;
}
a {
color: #5CA3E6;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #797470;
}
#wrapper {
padding: 5rem 0;
position: relative;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1, h2, h3, h4 {
margin-bottom: 1.2rem;
}
h5, h6 {
margin-bottom: .6rem;
}
h1 {
font-size: 6rem;
line-height: 7.2rem;
}
h2 {
font-size: 4.8rem;
line-height: 6rem;
}
h3{
font-size: 3.6rem;
line-height: 4.2rem;
}
h4{
font-size: 2.4rem;
line-height: 3rem;
}
h5{
font-size: 2rem;
line-height: 2.4rem;
}
h6 {
font-size: 1.6rem;
line-height: 1.8rem;
}
/* --------- CONTENT HEADER -------- */
#contentHeader {
position: relative;
}
#contentHeader img {
width: 100%;
margin-bottom: .3rem;
}
#contentHeader .cutline {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.8rem;
max-width: none;
padding: 0 2rem;
}
/* --------- BODY COPY -------- */
.bodyCopy {
font-family: Merriweather, Georgia, Times, serif;
margin: 0 auto;
max-width: 1400px;
width: 90%;
}
.bodyCopy:after {
clear: both;
content: "";
display: table;
}
p {
font-size: 1.6rem;
line-height: 2.4rem;
margin: 0 auto 2.4rem;
max-width: 650px;
}
p:last-child {
margin-bottom: 0;
}
/* --------- STORY HEAD -------- */
#storyHead {
font-family: Merriweather, Georgia, serif;;
margin: 0 auto 2.4rem auto;
text-align: center;
color: #3d3d3d;
}
#storyHead h1 {
font-size: 6.4rem;
font-weight: normal;
letter-spacing: -.2rem;
line-height: 7.6rem;
margin-bottom: 1.8rem;
}
#storyHead h2 {
font-size: 3.2rem;
font-weight: normal;
line-height: 4.2rem;
}
#storyHead h3 {
border-bottom: 1px solid #CECDC6;
display: inline-block;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2.4rem;
font-weight: normal;
line-height: 3rem;
margin-bottom: 1.8rem;
padding-bottom: .6rem;
text-transform: uppercase;
}
.bylineBlock {
text-align: center;
}
.bylineBlock p {
color: #3d3d3d;
display: inline-block;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.4rem;
font-style: italic;
margin: 0 2.4rem .6rem 0;
text-align: center;
}
.bylineBlock p:last-of-type {
margin-right: 0;
}
/* --------- BODY DISPLAY TYPE -------- */
.intro {
font-size: 2.4rem;
line-height: 4rem;
}
.dropcap {
color: #3d3d3d;
float:left;
font-size: 12.5rem;
line-height: 10rem;
margin: 0rem .5rem 0rem 0;
padding-top: 1.5rem;
}
.subhead {
color: #3d3d3d;
font-family: Merriweather, Georgia, serif;
font-size: 2.4rem;
line-height: 3.2rem;
margin: 4.8rem auto 2.4rem auto;
}
@media (max-width: 860px) {
#storyHead h1 {
font-size: 4.8rem;
line-height: 5.4rem;
margin-bottom: 1.8rem;
}
#storyHead h2 {
font-size: 2.4rem;
line-height: 3rem;
margin-bottom: 3rem;
}
#storyHead h3 {
font-size: 1.4rem;
line-height: 1.8rem;
}
.intro {
font-size: 2.2rem;
line-height: 3.6rem;
}
.dropcap {
font-size: 11rem;
line-height: 8.6rem;
}
}
@media (max-width: 600px) {
.bylineBlock p {
display: block;
margin: 0 0 .3rem 0;
}
}
@media (max-width: 500px) {
#storyHead h1 {
font-size: 4.2rem;
line-height: 4.8rem;
letter-spacing: 0;
}
.intro {
font-size: 1.6rem;
line-height: 2.4rem;
}
.dropcap {
font-size: 10rem;
line-height: 7.6rem;
}
}
/* --------- IMAGE BLOCKS -------- */
.imageBlock img {
margin-bottom: .3rem;
width: 100%;
}
.cutline {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.3rem;
font-weight: bold;
line-height: 1.8rem;
max-width: none;
padding: 0;
}
/* Wide Image */
.wideImageBlock {
margin: 4.8rem auto;
width: 100%;
}
@media (max-width: 778px) {
.wideImageBlock {
margin: 2.4rem auto;
max-width: 650px;
}
}
/* Full Image */
.fullImageBlock {
margin: 4.8rem auto;
width: 100%;
}
.fullImageBlock p.cutline {
padding: 0 2rem;
}
/* Inline Image */
.inlineImageBlock {
margin: 0 auto 2.4rem;
max-width: 650px;
}
@media (max-width: 778px) {
.inlineImageBlock {
float: none;
margin: 2.4rem auto;
max-width: 650px;
}
}
/* --------- SLIDESHOW BLOCK -------- */
.slideshowBlock {
background-color: rgb(33,33,33);
margin: 4.8rem auto;
padding: 3.8rem 0;
}
.slideshowBlock .subhead {
color: white;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2.4rem;
font-weight: bold;
line-height: 3.2rem;
margin-bottom: 1rem;
}
.slideshowBlock img {
display: block;
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
.slideshowGroup {
margin: 0 auto 0;
max-width: 1200px;
}
.slideshowBlock p.cutline {
color: white;
margin-top: .5rem;
width: 80%;
float: left;
}
.controls {
max-width: 1200px;
margin: 0 auto;
}
.controls p, .controls p span {
color: white;
}
.slideshowBlock .next, .slideshowBlock .previous {
cursor: pointer;
width: 30px;
height: 30px;
float: right;
margin: 1rem 1.5rem 0 0;
opacity: .3;
}
.slideshowBlock .next:hover, .slideshowBlock .previous:hover {
opacity: .6;
}
.slideshowBlock .next:active, .slideshowBlock .previous:active {
opacity: .9;
}
.slideshowTracker {
font-family: 'Open Sans', Arial, sans-serif;
font-weight: bold;
float: right;
font-size: 1.4rem;
line-height: 1.8rem;
margin-top: 1.5rem;
}
@media (max-width: 1200px) {
.slideshowBlock {
padding: 5rem 5rem;
}
}
@media (max-width: 800px) {
.slideshowBlock p.cutline {
width: 75%;
}
}
@media (max-width: 700px) {
.slideshowBlock {
padding: 2rem;
}
.slideshowBlock p.cutline {
float: none;
width: 100%;
margin-bottom: 3rem;
}
.slideshowBlock p.subhead {
font-size: 2rem;
line-height: 3rem;
}
}
/* --------- RIGHT BLOCK & LEFT BLOCK -------- */
.rightBlock, .leftBlock {
font-family: 'Open Sans', Arial, sans-serif;
max-width: 275px;
width: 100%;
}
.rightBlock {
float: right;
margin: 0rem 0 4.8rem 4.8rem;
}
.leftBlock {
float: left;
margin: 0rem 4.8rem 4.8rem 0;
}
.rightBlock img, .leftBlock img {
margin: 0rem 0 .3rem 0;
width: 100%;
}
.rightBlock p.source, .leftBlock p.source {
font-size: 1.2rem;
line-height: 1.6rem;
}
@media (max-width: 1420px) {
.rightBlock, .leftBlock {
max-width: 400px;
}
}
/* --------- GRAPHICS -------- */
@media (max-width: 800px) {
.graphicBlock {
float: none;
margin: 4.8rem auto;
}
}
/* --------- RIGHT IMAGE BLOCK -------- */
@media (max-width: 778px) {
.rightImageBlock, .leftImageBlock {
float: none;
margin: 0 auto 4.8rem;
width: 100%;
max-width: 650px;
}
}
/* --------- PULL QUOTES -------- */
.pullquote {
border-top: 1px solid rgb(200,200,200);
border-bottom: 1px solid rgb(200,200,200);
font-size: 2.4rem;
line-height: 4.8rem;
padding: 1.8rem 0;
margin: 4.8rem auto;
max-width: 650px;
text-align: left;
}
.pullquote blockquote {
margin-bottom: 2.4rem;
}
.pullquote p.attribution {
font-family: 'Open Sans', Arial, sans-serif;
font-weight: bold;
max-width: none;
text-align: right;
}
.pullquote p.attribution:before {
content: '— ';
}
@media (max-width: 600px) {
.pullquote {
font-size: 2rem;
line-height: 3rem;
}
}
/* full width */
.fullQuote {
max-width: none;
}
/* right block */
.rightQuote, .leftQuote {
font-family: 'Merriweather', Georgia, serif;
max-width: 275px;
width: 100%;
}
.rightQuote {
margin: 0 0 4.8rem 4.8rem;
}
.leftQuote {
margin: 0 4.8rem 4.8rem 0;
}
@media (max-width: 1420px) {
.rightQuote, .leftQuote {
max-width: 400px;
}
}
@media (max-width: 778px) {
.rightQuote, .leftQuote {
float: none;
margin: 4.8rem auto 4.8rem;
max-width: 650px;
}
}
/* ---------- NDN EMBEDS ---------- */
.ndn_embed {
margin: 4.8rem auto;
max-width: 650px;
min-height: 170px;
position: relative;
width: 100%;
z-index: 0;
}
.ndn_embed p {
font-family: Arial, sans-serif !important;
}
/* ---------- YOUTUBE EMBEDS ---------- */
.videoBlock {
width:100%;
max-width: 650px;
margin: 4.8rem auto;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* --------- RELATED LINKS ------- */
.relatedLinks a {
color: #0074d9;
display: block;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.8rem;
margin-bottom: 1.8rem;
}
.relatedLinks a:last-child {
margin-bottom: 0;
}
.relatedLinks a:visited {
color: #aaaaaa;
}
@media (max-width: 800px) {
.relatedLinks {
border-bottom: 1px solid rgb(33,33,33);
border-top: 1px solid rgb(33,33,33);
float: none;
margin: 2.4rem auto;
padding: 2.4rem 0;
max-width: none;
width: 100%;
}
}
/* --------- FACTBOX ------- */
.factBox p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.4rem;
line-height: 2.0rem;
margin-bottom: 2rem;
}
@media (max-width: 800px) {
.factBox {
border-bottom: 1px solid rgb(33,33,33);
border-top: 1px solid rgb(33,33,33);
float: none;
margin: 2.4rem auto;
padding: 2.4rem 0;
max-width: 650px;
width: 100%;
}
}
/* --------- BREAKOUT MODULE ------- */
.breakoutModule {
margin: 4.8rem auto;
width: 100%;
}
.breakoutModule:after {
content: "";
display: table;
clear: both;
}
.breakoutModule h1 {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2.4rem;
font-weight: bold;
line-height: 3.2rem;
margin-bottom: 1rem;
}
.breakoutModule img {
margin-bottom: 1rem;
width: 100%;
}
.breakoutModule p {
font-family: 'Open Sans', Arial, sans-serif;
}
.twoAcross .breakoutBox {
float: left;
margin-right: 4%;
width: 48%;
}
.threeAcross .breakoutBox {
float: left;
margin-right: 5%;
width: 30%;
}
.fourAcross .breakoutBox {
float: left;
margin-right: 4%;
width: 22%;
}
.twoAcross .breakoutBox:last-child, .threeAcross .breakoutBox:last-child, .fourAcross .breakoutBox:last-child {
margin-right: 0;
}
@media (max-width: 500px) {
.breakoutModule {
border-bottom: 1px solid rgb(33,33,33);
border-top: 1px solid rgb(33,33,33);
margin: 2.4rem auto;
padding: 2.4rem 0;
}
.breakoutModule img {
float: left;
margin-right: 1rem;
width: 150px;
}
.twoAcross .breakoutBox, .threeAcross .breakoutBox, .fourAcross .breakoutBox {
margin-bottom: 2.4rem;
float: none;
width: 100%;
}
.twoAcross .breakoutBox:last-child, .threeAcross .breakoutBox:last-child, .fourAcross .breakoutBox:last-child {
margin-bottom: 0;
}
}
/* --------- CREDITS -------- */
.credits {
border-bottom: 1px solid rgb(33,33,33);
margin: 7rem auto 0;
max-width: 650px;
padding-bottom: 2.4rem;
}
.credits p {
display: block;
float: left;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1.2rem;
line-height: 1.6rem;
margin: 0 2rem 0rem 0;
}
.credits a {
color: rgb(33,33,33);
font-weight: bold;
}
/* --------- MORE -------- */
.more {
border-bottom: 1px solid rgb(33,33,33);
margin: 4.8rem auto 7rem;
max-width: 650px;
padding-bottom: 2.4rem;
}
.more h1 {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2rem;
font-weight: bold;
line-height: 2.6rem;
margin-bottom: 2rem;
}
.more a {
color: rgb(33,33,33);
display: block;
font-family: 'Open Sans', Arial, sans-serif;
float: left;
margin-right: 5%;
width: 30%;
}
.more a:after {
content: "";
display: table;
clear: both;
}
.more a:hover {
text-decoration: none;
}
.more a:last-child {
margin-right: 0;
}
.more a img {
margin-bottom: .5rem;
width: 100%;
}
.more a h5 {
color: rgb(33,33,33);
font-size: 1.6rem;
line-height: 2rem;
font-weight: bold;
margin-bottom: .5rem;
}
.more a p {
font-size: 1.3rem;
line-height: 1.7rem;
font-weight: normal;
}
@media (max-width: 600px) {
.more a {
float: none;
margin: 0 0 2.4rem;
width: 100%;
}
.more a img {
float: left;
width: 33%;
}
.more a h5, .more a p {
float: right;
width: 65%;
}
.more a h5 {
margin-top: -5px;
}
}
/* --------- SHARE AND COMMENTS -------- */
.shareComments {
margin: 4.8rem auto 0;
max-width: 65rem;
}
.shareCommentsTop {
max-width: 51rem;
width: 100%;
}
#share-bar1, #share-bar2 {
margin-bottom: 4rem;
}
.gig-counter {
margin-top: 6px !important;
}
.gig-bar-container img {
margin-right: .5rem;
width: 9rem;
}
@media (max-width: 860px) {
.shareComments {
margin: 2.4rem auto 0;
}
.shareCommentsTop {
max-width: 46rem;
}
.gig-bar-container img {
width: 80px;
}
}
/* ---------- AD STYLING ---------- */
#dfpAdPositionTop {
border-bottom: 1px solid rgb(200,200,200);
border-top: 1px solid rgb(200,200,200);
margin: 4.8rem 0;
padding: 2rem 0;
position: relative;
text-align: center;
z-index: 0;
}
.noRule {
border-bottom: none !important;
border-top: none !important;
}
#dfpAdPositionTop * {
margin: 0 auto !important;
}
#dfpAdPositionTop p {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 1rem;
font-weight: bold;
margin-bottom: .5rem !important;
}
@media print {
.bg-black {
position: relative;
}
}
#map {
width: 400px;
height: 400px;
position: fixed;
top: 0;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment