Create a gist now

Instantly share code, notes, and snippets.

Off Screen Content with Genesis Theme
<?php
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'themeprefix_enqueue_scripts_styles' );
function themeprefix_enqueue_scripts_styles() {
wp_enqueue_style( 'themeprefix-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'themeprefix-offscreen', get_stylesheet_directory_uri() . '/js/offscreen.js', array( 'jquery' ), '1.0.0', true );
}
// Register Offscreen Content Widget
genesis_register_sidebar( array(
'id' => 'offscreen-content',
'name' => __( 'Offscreen Content', 'themeprefix' ),
'description' => __( 'This is the offscreen content section.', 'themeprefix' ),
) );
// Add offscreen content if active
add_action( 'genesis_before_header', 'themeprefix_offscreen_content_output' );
function themeprefix_offscreen_content_output() {
$button = '<button class="offscreen-content-toggle"><i class="icon ion-ios-close-empty"></i> <span class="screen-reader-text">' . __( 'Hide Offscreen Content', 'themeprefix' ) . '</span></button>';
if ( is_active_sidebar( 'offscreen-content' ) ) {
echo '<div class="offscreen-content-icon"><button class="offscreen-content-toggle"><i class="icon ion-ios-more"></i> <span class="screen-reader-text">' . __( 'Show Offscreen Content', 'themeprefix' ) . '</span></button></div>';
}
genesis_widget_area( 'offscreen-content', array(
'before' => '<div class="offscreen-content"><div class="offscreen-container"><div class="widget-area">' . $button . '<div class="wrap">',
'after' => '</div></div></div></div>'
));
}
/* Offscreen Content
---------------------------------------------------------------------------------------------------- */
.no-scroll {
overflow: hidden;
}
.offscreen-content {
background-color: rgba( 255, 255, 255, 1.0);
display: none;
height: 100%;
left: 0;
overflow-y: scroll;
padding: 20px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 10000;
}
.offscreen-content .wrap {
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
.offscreen-container {
display: table;
overflow: hidden;
table-layout: fixed;
text-align: center;
width: 100%;
}
.offscreen-container .widget-area {
display: table-cell;
padding-bottom: 20px;
vertical-align: middle;
width: 100%;
}
/* Offscreen Content Icon
--------------------------------------------- */
.icon {
font-size: 36px;
font-size: 3.6rem;
}
.offscreen-content-icon,
.offscreen-content-toggle {
position: fixed;
right: 20px;
top: 18px;
z-index: 10000;
}
.admin-bar .offscreen-content-icon,
.admin-bar .offscreen-content-toggle {
top: 52px;
}
.offscreen-content button,
.offscreen-content-icon button {
background-color: transparent;
color: #000;
font-size: 20px;
font-size: 2rem;
padding: 2px 10px 2px 12px;
}
.offscreen-content button:hover,
.offscreen-content-icon button:hover {
color: #d43c67;
}
/* Offscreen enews
--------------------------------------------- */
.offscreen-content .enews-widget {
background-color: #f5f5f5;
padding: 60px;
}
.offscreen-content .enews-widget form {
margin-left: 60px;
margin-right: 60px;
}
jQuery(function($) {
// Set offscreen container height
var windowHeight = $(window).height();
$( '.offscreen-container' ).css({
'height': windowHeight + 'px'
});
if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
var headerHeight = $( '.site-header' ).height();
$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
} else {
$( '.site-inner' ).removeAttr( 'style' );
}
$(window).resize(function() {
var windowHeight = $(window).height();
$( '.offscreen-container' ).css({
'height': windowHeight + 'px'
});
if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
var headerHeight = $( '.site-header' ).height();
$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
} else {
$( '.site-inner' ).removeAttr( 'style' );
}
});
// Set offscreen content variables
var body = $( 'body' ),
content = $( '.offscreen-content' ),
sOpen = false;
// Toggle the offscreen content widget area
$(document).ready(function() {
$( '.offscreen-content-toggle' ).click(function() {
__toggleOffscreenContent();
});
});
function __toggleOffscreenContent() {
if (sOpen) {
content.fadeOut();
body.toggleClass( 'no-scroll' );
sOpen = false;
} else {
content.fadeIn();
body.toggleClass( 'no-scroll' );
sOpen = true;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment