Skip to content

Instantly share code, notes, and snippets.

Jay Holtslander JayHoltslander

Block or report user

Report or block JayHoltslander

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@JayHoltslander
JayHoltslander / picture-element.css
Created Sep 27, 2017
<picture> Element for responsive images.
View picture-element.css
<!--
SOURCE REFERENCES
See:
* https://www.html5rocks.com/en/tutorials/responsive/picture-element/
* https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/
-->
<style>
.responsive-image {
height: 100%;
@JayHoltslander
JayHoltslander / example.html
Last active Jun 29, 2017
Marvel App Optimized YouTube Embed. Use in conjunction with the instructions at https://help.marvelapp.com/hc/en-us/articles/208395615-How-do-I-embed-video-
View example.html
<!-- "playlist" must be the same individual video id in order for continuous looping to work -->
<iframe src="https://www.youtube.com/embed/Zdjg9yhBqTU?modestbranding=1&playlist=Zdjg9yhBqTU&controls=0&showinfo=0&rel=0&iv_load_policy=3&autoplay=1&loop=1&keyboard=1" allowfullscreen="0" frameborder="0"></iframe>
View iOS-8-web-app.html
<!doctype html>
<html>
<head>
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
@JayHoltslander
JayHoltslander / 0_reuse_code.js
Created Nov 29, 2016
Here are some things you can do with Gists in GistBox.
View 0_reuse_code.js
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
View javascript.js
// SHOW/HIDE SOCIAL MONARCH PLUGIN DEPENDING ON SCROLL POSITION
if( $(window).width() >= 1025) { // if above default responsive breakpoint
$(document).ready(function() {
$(".et_social_sidebar_networks").hide(); // hide initially
var topOfOthDiv = $(".content").offset().top - 390; // set div position
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { // scrolled below div?
$(".et_social_sidebar_networks").show(); // show
}
@JayHoltslander
JayHoltslander / README.md
Created Sep 25, 2015 — forked from magnetikonline/README.md
IE 7/8/9/10/11 Virtual machines from Microsoft - Linux w/VirtualBox installation notes.
View README.md
@JayHoltslander
JayHoltslander / snippet.html
Last active Aug 29, 2015
Bootstrap Media Query Testing Snippet
View snippet.html
<!-- PASTE THIS SOMEWHERE IN YOUR PAGE TO REFERENCE BREAKPOINTS. -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
</div>
@JayHoltslander
JayHoltslander / gist:54f657b0962494ce4dde
Created Oct 16, 2014
iOS 8 Web App (Prevent opening in Safari)
View gist:54f657b0962494ce4dde
<!DOCTYPE html>
<html>
<head>
<title>Stay Standalone!</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-title" content="Web App title to override title element name">
View Edge to edge Bootstrap columns.html
<div class="container">
<section class="edge-to-edge">
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/640x480/777" alt="">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/640x480/333" alt="">
</div>
@JayHoltslander
JayHoltslander / 5 even columns in Bootstrap 2.md
Last active Aug 29, 2015
5 Even Columns in Bootstrap 2 (HTML & CSS)
View 5 even columns in Bootstrap 2.md

#5 even columns in Bootstrap 2

Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.

The HTML

Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.

<div class="row-fluid fivecolumns">
You can’t perform that action at this time.