<!doctype html> | |
<html class="no-js" lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Forms: Inline Help</title> | |
<link rel="stylesheet" href="css/foundation.css" /> | |
<script src="js/modernizr.js"></script> | |
<style> | |
h2 { | |
margin-top: 2rem; | |
margin-bottom: 1rem; | |
} | |
img { | |
margin-bottom: 10px; | |
} | |
.field_row { | |
padding-bottom: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="row"> | |
<div class="medium-12 columns"> | |
<h2>Men's "Funk" slogan tee</h2> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="medium-1 columns"> | |
<img src="http://placehold.it/93&text=1"/> | |
<img src="http://placehold.it/93&text=2"/> | |
<img src="http://placehold.it/93&text=3"/> | |
</div> | |
<div class="medium-5 columns"> | |
<img src="http://placehold.it/500&text=Photo+1"/> | |
</div> | |
<div class="medium-6 columns"> | |
<form> | |
<div class="row field_row"> | |
<div class="medium-6 columns"> | |
<label for="color">Color</label> | |
<select id="color"> | |
<option value="none" disabled selected>Select…</option> | |
<option value="white">White</option> | |
<option value="navy">Navy</option> | |
<option value="black">Black</option> | |
</select> | |
</div> | |
</div> | |
<div class="row field_row"> | |
<div class="medium-6 columns"> | |
<label for="size">Size</label> | |
<select id="size"> | |
<option value="none" disabled selected>Select…</option> | |
<option value="xs">XS</option> | |
<option value="s">S</option> | |
<option value="m">M</option> | |
<option value="l">L</option> | |
<option value="xl">XL</option> | |
<option value="xxl">XXL</option> | |
<option value="xxxl">XXXL</option> | |
</select> | |
</div> | |
<div class="medium-6 columns"> | |
<div class="panel callout help" style="padding: 6px; margin-top: 12px; margin-bottom: 0; display: none;"> | |
<p style="font-size: 0.8rem;" aria-live="polite">Not sure what size you need? See our <a href="size_chart.html">size chart</a>.</p> | |
</div> | |
</div> | |
</div> | |
<div class="row field_row"> | |
<div class="medium-6 columns"> | |
<label for="quantity">Quantity</label> | |
<input type="number" id="quantity" value="1"> | |
</div> | |
</div> | |
<div class="row field_row"> | |
<div class="medium-6 columns"> | |
<button type="submit" value="submit" class="small button" style="width: 100%;">Add to cart</button> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> | |
<script src="js/jquery.js"></script> | |
<script src="js/foundation.min.js"></script> | |
<script> | |
$(document).foundation(); | |
</script> | |
<script> | |
$(document).ready(function(){ | |
$('.field_row input, .field_row select').on('focus', function(){ | |
$(this).parent().parent().find('.help').show(); | |
}); | |
$('.field_row input, .field_row select').on('blur', function(){ | |
$(this).parent().parent().find('.help').hide(); | |
}); | |
$('.field_row').hover( | |
function() { | |
$(this).find('.help').show(); | |
}, | |
function() { | |
if(!$(this).find('input, select').is(':focus')) | |
{ | |
$(this).find('.help').hide(); | |
} | |
} | |
); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment