Skip to content

Instantly share code, notes, and snippets.

View csessig86's full-sized avatar

Chris Essig csessig86

71 followers · 87 following
View GitHub Profile
@csessig86
csessig86 / gist:5529025
Created May 6, 2013 23:12
Responsive maps blog 2
/* Sidebar */
#sidebar {
position: absolute;
top: 2%;
right: 1%;
height: 96%;
width: 30%;
z-index: 2;
border: 1px solid #999;
padding-left: 1%;
@csessig86
csessig86 / gist:5529066
Created May 6, 2013 23:20
Responsive maps blog 3
/* Styles from mobile devices */
@media (max-width: 625px) {
#sidebar_content {
display: none;
}
/* Sidebar */
#sidebar {
position: relative;
@csessig86
csessig86 / gist:5529158
Created May 6, 2013 23:35
Responsive maps blog 4
// Toggle for 'About this map' and X buttons
// Only visible on mobile
isVisibleDescription = false;
// Grab header, then content of sidebar
sidebarHeader = $('#sidebar_header').html();
sidebarContent = $('#sidebar_content').html();
// Then grab credit information
creditsContent = $('#credits_content').html();
$('.toggle_description').click(function() {
if (isVisibleDescription === false) {
@csessig86
csessig86 / gist:5529177
Last active December 17, 2015 01:30
Responsive maps blog 5
/* 'About this map' button, description box */
/* Mobile only */
.toggle_description {
display: none;
z-index: 8;
position: relative;
float: right;
right: 0%;
top: 0%;
}
@csessig86
csessig86 / gist:5529243
Created May 6, 2013 23:51
Responsive maps blog 6
/* Styles from mobile devices */
@media (max-width: 625px) {
.toggle_description {
display: inline;
}
}
@csessig86
csessig86 / gist:6236884
Created August 14, 2013 23:34
Reduce size of long images in the carousel and add border around it.
for (num in $('.topstory .image')) {
topstory = $('.topstory .image')[num];
topstory_image = $('.topstory img')[num];
if (parseFloat($(topstory).css('height')) > 300) {
$(topstory).css('margin-right', 'auto');
$(topstory).css('padding', '75px');
$(topstory).css('padding-top', '3px');
$(topstory).css('padding-bottom', '0px');
$(topstory).css('border', '1px solid #d3d3d3');
@csessig86
csessig86 / Bootstrap: Nav tabs.css
Created November 5, 2013 22:51
Bootstrap nav tabs used on election 2013 site
<ul class="nav nav-tabs">
{{#each body}}
<li id="{{whitespaceRemove city}}CI-li">
<a href="#{{whitespaceRemove city}}CI" data-ajax="false">{{city}}</a>
</li>
{{/each}}
</ul>
/***** Nav *****/
@csessig86
csessig86 / Media query: Scrolling for mobile.css
Created November 5, 2013 22:52
Creating scrolling overflow with CSS media query
@media (max-width: 600px) {
.detailed-candidate-box-border {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
@csessig86
csessig86 / Close button (Election 2013).css
Created November 5, 2013 22:53
Twitter style close button. As used with election 2013 site
<div class="close-button"><a href="#{{whitespaceRemove ../../city}}CI" data-ajax="false">&times;</a></div>
/**** Close button ****/
.close-button {
float: right;
margin: 5px;
text-shadow: 0 1px 2px 0 #444444;
}
.close-button a {
@csessig86
csessig86 / Copyright box.css
Created November 5, 2013 22:54
WCFCourier copyright box. Placed at bottom of page