Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View forms_9_inline_help_16.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
<!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
Something went wrong with that request. Please try again.