martinpolley/forms_9_inline_help_16.html

## 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>
	<!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>