Skip to content

Instantly share code, notes, and snippets.

View craiger522's full-sized avatar

craiger522

2 followers · 2 following
View GitHub Profile
@craiger522
craiger522 / show-hide-default-hidden
Created January 6, 2014 03:57
Show/hide toggle with default hidden
$(document).ready(function() {
var par = $('p');
$(par).hide();
$('#button').click(function(e) {
$(par).slideToggle('slow');
e.preventDefault();
});
});
@craiger522
craiger522 / Absolute centering
Created November 6, 2013 17:57
horizontal and vertical centering
.absolute-aligned {
position: relative; min-height: 500px;
background: hsl(200, 100%, 97%);
}
@craiger522
craiger522 / Centering with table cells
Created November 6, 2013 17:55
Centering with table cells display:table
.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%; }
.center-core { display: table-cell; text-align: center; vertical-align: middle; }
.center-core img { width: 33%; height: auto; }
@craiger522
craiger522 / centered ul nav with dropdowns
Created November 6, 2013 17:28
centered ul nav with dropdowns
<style>
body { width:960px; padding:100px 0; margin:0 auto; font-family:Calibri, sans-serif; }
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
@craiger522
craiger522 / Center ul navigation
Last active December 27, 2015 14:29
Center ul navigation
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/work/">Work</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
.nav{
border:1px solid #ccc;
@craiger522
craiger522 / Jquery: Get current page
Last active December 23, 2015 00:59
Jquery: Get current page and apply class to .nav li
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('.nav li a').each(function() {
if ($(this).attr('href') == pathname)
{
$(this).parent().addClass('active');
}
});
});
@craiger522
craiger522 / CSS: Image-Replacement
Created September 13, 2013 17:11 — forked from i2likelife/CSS-Image-Replacement
.ir {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}