Skip to content

Instantly share code, notes, and snippets.

@martinpolley

martinpolley/forms_9_inline_help_16.html

Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martinpolley/10123955 to your computer and use it in GitHub Desktop.
Save martinpolley/10123955 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
forms_9_inline_help_16.html
<!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&hellip;</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&hellip;</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