Skip to content

Instantly share code, notes, and snippets.

View jlord's full-sized avatar
😃
Hello, hi!

Jessica Lord jlord

😃
Hello, hi!
16.3k followers · 30 following
View GitHub Profile
@jlord
jlord / index.html
Created March 11, 2013 22:11
DIY Front End Dev Skill Sample Page
<html>
<!-- the head tag holds information and resources for the page -->
<head>
<!-- the title tag holds the page title -->
<title>Hello WWW!</title>
</head>
<style>
/* changing background color and the margin (spacing) between the edges and our content */
body {
@jlord
jlord / x.html
Created November 11, 2012 18:55
index.hmtl
<html>
<!-- I'm ommiting a lot of stuff, keeping this to the point -->
<head>
<!-- load in tabletop and mustache -->
<script src="/wp-content/themes/Starkers/tabletop.js" type="text/javascript"></script>
<script src="/wp-content/themes/Starkers/ICanHaz.js" type="text/javascript"></script>
</head>
<style>
/* confine your image to a circle */
.instaImgCirc img {border-radius: 1000px;}
@jlord
jlord / index.html
Created October 6, 2012 21:37
trying to have two instances of tabletop work
<html>
<body>
<div class="span1">
<h3>Lastest Instagram</h3>
<div id="instagram"></div>
</div>
</div><!-- end span1 -->
<div class="span2">
<div id="pocketReader"></div>
@jlord
jlord / index.html
Created September 8, 2012 23:16
Separate text from images in a page in Wordpress.
<?php
$posttext = $post->post_content;
$regex = '~<img [^\>]*\ />~';
preg_match_all($regex, $posttext, $images);
$posttext = preg_replace($regex, '', $posttext); ?>
<div id="thePostText">
<?php echo $posttext; ?>
</div>
@jlord
jlord / ICanHaz.js
Created August 10, 2012 01:31
Counting items in a Google Spreadsheet
/*!
ICanHaz.js version 0.10 -- by @HenrikJoreteg
More info at: http://icanhazjs.com
*/
(function () {
/*
mustache.js — Logic-less templates in JavaScript
See http://mustache.github.com/ for more info.
*/
@jlord
jlord / index.html
Created August 10, 2012 00:05
Mapping locations from a Google spreadsheet
<html>
<head>
<title>I'm learning</title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<script src="http://zeptojs.com/zepto.js" type="text/javascript"></script>
<script src="map.js" type="text/javascript"></script>
<script src="tabletop.js" type="text/javascript"></script>
<style>
body {margin: 0; padding: 0; text-align: center;}
@jlord
jlord / ICanHaz.js
Created August 9, 2012 22:59
Create a table from a Google Spreadsheet
/*!
ICanHaz.js version 0.10 -- by @HenrikJoreteg
More info at: http://icanhazjs.com
*/
(function () {
/*
mustache.js — Logic-less templates in JavaScript
See http://mustache.github.com/ for more info.
*/
@jlord
jlord / index.html
Created August 9, 2012 21:45
Create a pie chart from a google spread sheet!
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
@jlord
jlord / index.html
Created May 31, 2012 23:21
A CSS Sidebar Menu
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</head>
<style>
h2 {font-family: 'Arvo', serif; font-weight: 400; font-size: 16px; color: #333; margin: 0px;}
a {text-decoration: none; }
#sidebar { position: relative; float: left; width: 360px;}
#sidebar h2 { margin-left: 8px; }
@jlord
jlord / index.html
Created May 31, 2012 22:08
A CSS Breadcrumb Style
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style>
#container {position: relative; float: right; height: 40px; }
/* This creates the boxes, the left one is on top and nudged right over the right box */
.left { position: relative; float: left; height: 40px; background: #BCEDDC; right: 7px; z-index: 2; }
.right { position: relative; float: right; height: 40px; background: #BCEDDC; }
.left p, .right p { line-height: 4px; font-family: 'Arvo'; font-size: 18px; color: #333; white-space: nowrap; }
.left p { margin-right: 30px; margin-left: 30px; }