martinpolley / forms_9_inline_help_16.html

Last active April 13, 2014


    
    View forms_9_inline_help_16.html 
  
  
      forms_9_inline_help_16.html
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            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>