Created
February 10, 2014 19:25
-
-
Save oomlaut/8922446 to your computer and use it in GitHub Desktop.
fixedsnap_ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #container{ | |
| width:960px; | |
| margin:0 auto; | |
| } | |
| header{ | |
| width:100%; | |
| height:200px; | |
| background-color:#ccc; | |
| } | |
| section#main{ | |
| width:100%; | |
| overflow:hidden; | |
| } | |
| footer{ | |
| width:100%; | |
| height:72px; | |
| background-color:#ccc; | |
| } | |
| .col{ | |
| float:right; | |
| display:inline; | |
| } | |
| #primary{ | |
| width:720px; | |
| } | |
| #secondary{ | |
| width:240px; | |
| background-color:#999; | |
| } | |
| /* these styles are optional */ | |
| .float-follow{ | |
| background:#efefef; | |
| height:290px; | |
| } | |
| .float-follow-wrapper{ | |
| margin-top:10px; | |
| } | |
| .float-follow *{ | |
| margin:0 0; | |
| padding:10px; | |
| } | |
| /* *** these styles are necessary */ | |
| .float-follow-fixbottom, | |
| .float-follow-fixtop{ position:fixed; } | |
| .float-follow-fixbottom{ bottom:0; } | |
| .float-follow-fixtop{ top:0; } | |
| /* TODO: IE6 style for "fixed" positioning */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>FCAC fixed/float POC</title> | |
| <link rel="stylesheet" href="normalize.css" type="text/css" media="screen" charset="utf-8"> | |
| <link rel="stylesheet" href="fixedsnap.css" type="text/css" media="screen" charset="utf-8"> | |
| <script src="jquery-1.7.1.min.js"></script> | |
| <script src="fixedsnap.js"></script> | |
| </head> | |
| <body id="poc"> | |
| <div id="container"> | |
| <header> | |
| <h1 id="fcac_poc">FCAC POC</h1> | |
| </header> | |
| <section id="main"> | |
| <div id="primary" class="col"> | |
| <h2>Main:Primary</h2> | |
| <div class="content"> | |
| <h1>heading <code><h1></code></h1> | |
| <h2>heading <code><h2></code></h2> | |
| <h3>heading <code><h3></code></h3> | |
| <h4>heading <code><h4></code></h4> | |
| <h5>heading <code><h5></code></h5> | |
| <h6>heading <code><h6></code></h6> | |
| <h1 class="h6">heading <code><h1 class="h6"></code></h1> | |
| <h2 class="h5">heading <code><h2 class="h5"></code></h2> | |
| <h3 class="h4">heading <code><h3 class="h4"></code></h3> | |
| <h4 class="h3">heading <code><h4 class="h3"></code></h4> | |
| <h5 class="h2">heading <code><h5 class="h2"></code></h5> | |
| <h6 class="h1">heading <code><h6 class="h1"></code></h6> | |
| <hr /> | |
| <p>The <a href="#">a element </a> example <code><a href="#"></code><br /> | |
| The <abbr title="Title text">abbr element</abbr> example <code><abbr title=""></code><br /> | |
| The <b>b element</b> example <code><b></code><br /> | |
| The <cite>cite element</cite> example <code><cite></code><br /> | |
| The <code>code element</code> example <code><code></code><br /> | |
| The <del>del element</del> example <code><del></code><br /> | |
| The <dfn title="Title text">dfn element</dfn> example <code><dfn="title"></code><br /> | |
| The <em>em element</em> example <code><em></code><br /> | |
| The <i>i element</i> example <code><i></code><br /> | |
| The img element <img src="http://placehold.it/16x16" alt="" width="16" height="16"> example <code><img src="#" alt="" /></code><br /> | |
| The <ins>ins element</ins> example <code><ins></code><br /> | |
| The <kbd>kbd element</kbd> example <code><kbd></code><br /> | |
| The <mark>mark element</mark> example <code><mark></code><br /> | |
| The <q>q element <q>inside</q> a q element</q> example <code><q></code><br /> | |
| The <s>s element</s> example <code><s></code> <span class="error">deprecated</span><br /> | |
| The <samp>samp element</samp> example <code><samp></code><br /> | |
| The <small>small element</small> example <code><small></code><br /> | |
| The <span>span element</span> example <code><span></code><br /> | |
| The <strike>strike</strike> element example <code><strike></code> <span class="error">deprecated</span><br /> | |
| The <strong>strong element</strong> example <code><strong></code><br /> | |
| The <sub>sub element</sub> example <code><sub></code><br /> | |
| The <sup>sup element</sup> example <code><sup></code><br /> | |
| The <var>var element</var> example <code><var></code><br /> | |
| The <u>u element</u> example <code><u></code> <span class="error">deprecated</span></p> | |
| <pre> | |
| preformatted text <code><pre></code> | |
| more preformatted text | |
| more preformatted text | |
| </pre> | |
| <div class="hr"> | |
| <hr /> | |
| </div> | |
| <section> | |
| <header> | |
| <hgroup> | |
| <h1>heading 1 <code class="small"><section><header><hgroup><h1></code></h1> | |
| <h2>heading 2 <code class="small"><section><header><hgroup><h2></code></h2> | |
| </hgroup> | |
| </header> | |
| <article> | |
| <header> | |
| <h2>heading 2 <code class="small"><article><h2></code></h2> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet <span class="sep">| <code><span.sep></code></span> consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </header> | |
| <a class="right" href="#"><img src="http://placehold.it/200x150" alt="" width="200" height="150"></a> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| <h3>heading 3 <code class="small"><article><h3></code></h3> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| <h4>heading 4 <code class="small"><article><h4></code></h4> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </article> | |
| <article> | |
| <header> | |
| <h2>heading 2 <code class="small"><article><h1></code></h2> | |
| </header> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </article> | |
| </section> | |
| <section> | |
| <header> | |
| <h1>heading 1 <code class="small"><section><header><h1></code></h1> | |
| </header> | |
| <article> | |
| <header> | |
| <h2>heading 2 <code class="small"><article><h2></code></h2> | |
| </header> | |
| <p>paragraph <code><p></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </article> | |
| <article> | |
| <header> | |
| <h2>heading 2 <code class="small"><article><h2></code></h2> | |
| </header> | |
| <p class="hr">paragraph <code><p.hr></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| <p class="hr-bottom">paragraph <code><p.hr-bottom></code>. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </article> | |
| </section> | |
| <blockquote> | |
| <p>blockquote <code><blockquote></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p> | |
| </blockquote> | |
| <dl> | |
| <dt>definition list item <code><dl> <dt></code></dt> | |
| <dd>definition list item description <code><dl> <dd></code></dd> | |
| <dd>definition list item description <code><dl> <dd></code></dd> | |
| <dd>definition list item description <code><dl> <dd></code></dd> | |
| <dt>definition list item <code><dl> <dt></code></dt> | |
| <dd>definition list item description <code><dl> <dd></code></dd> | |
| </dl> | |
| <ul> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |
| <ul> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |
| <ul> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ul> | |
| </li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ul> | |
| </li> | |
| <li>unordered list item <code><ul> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ul> | |
| <ol> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |
| <ol> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |
| <ol> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ol> | |
| </li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ol> | |
| </li> | |
| <li>ordered list item <code><ol> <li></code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li> | |
| </ol> | |
| <div class="vcard"> | |
| <address class="author"> | |
| <a class="fn org" href="http://www.domain.com">Lorem Ipsum Dolor <code><address></code> with vcard</a> | |
| </address> | |
| <span class="adr"><span class="street-address">0000 Consectetuer Road</span><br /> | |
| <span class="locality">Nonummy</span>, <span class="region">XX</span> <span class="postal-code">55555-5555</span><br /> | |
| <span class="country-name">United States</span> </span><br /> | |
| <span class="tel"><span class="type">Main</span>: <span class="value">(555) 555-5555</span></span><br /> | |
| <span class="tel"><span class="type">Fax</span>: <span class="value">(555) 555-5555</span></span><br /> | |
| <a class="email" href="mailto:info@domain.com">info@domain.com</a><br /> | |
| <a class="url" href="aim:goim?screenname=AIMscreename">AIM</a> <a class="url" href="ymsgr:sendIM?YIMscreename">YIM</a> <a class="url" href="xmpp:Jabberscreename">Jabber</a></div> | |
| <div class="clearfix"> | |
| <div class="col">x</div> | |
| <div class="col">y</div> | |
| </div> | |
| <div class="test-next"> | |
| <p>.col & clearfix test: this should clear x & y</p> | |
| </div> | |
| <table class="super"> | |
| <caption> | |
| table caption <code><caption></code> | |
| </caption> | |
| <thead> | |
| <tr> | |
| <th scope="col">table header <code><th></code></th> | |
| <th scope="col"><a href="#">linked table header</a> <code><th></code></th> | |
| <th scope="col"><a href="#">linked table header</a> <code><th></code></th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr> | |
| <th scope="col">table header <code><th></code></th> | |
| <th scope="col"><a href="#">linked table header</a> <code><th></code></th> | |
| <th scope="col"><a href="#">linked table header</a> <code><th></code></th> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <th scope="row">table header <code><th></code></th> | |
| <td>This is an example of table data <code><td></code></td> | |
| <td>This is an example of table data <code><td></code></td> | |
| </tr> | |
| <tr class="odd"> | |
| <th scope="row">table header <code><th></code></th> | |
| <td>This is an example of table data <code><td></code></td> | |
| <td>This is an example of table data <code><td></code></td> | |
| </tr> | |
| <tr> | |
| <th scope="row">table header <code><th></code></th> | |
| <td>This is an example of table data <code><td></code></td> | |
| <td>This is an example of table data <code><td></code></td> | |
| </tr> | |
| <tr class="odd"> | |
| <th scope="row">table header <code><th></code></th> | |
| <td>This is an example of table data <code><td></code></td> | |
| <td>This is an example of table data <code><td></code></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <form id="form-untitled" method="post" action="#"> | |
| <fieldset class="super"> | |
| <legend>Legend <code><legend></code></legend> | |
| <div class="error"> | |
| <p>Required fields marked with *</p> | |
| </div> | |
| <div class="success"> | |
| <p>Success!</p> | |
| </div> | |
| <div> | |
| <label for="input-search">Search</label> | |
| <input type="search" id="input-search" /> | |
| </div> | |
| <div> | |
| <label for="input-file-upload">File Upload</label> | |
| <input type="file" id="input-file-upload" multiple="multiple" /> | |
| </div> | |
| <div> | |
| <label for="input-color">Color input</label> | |
| <input type="color" id="input-color" value="#FF0000" /> | |
| </div> | |
| <div> | |
| <label for="input-number">Number input</label> | |
| <input type="number" id="input-number" max="10" min="0" value="5" /> | |
| </div> | |
| <div> | |
| <label for="input-range">Range input</label> | |
| <input type="range" id="input-range" max="10" min="0" value="5" /> | |
| </div> | |
| <div> | |
| <label for="input-date">Date input</label> | |
| <input type="date" id="input-date" value="2011-06-14" /> | |
| </div> | |
| <div> | |
| <label for="input-month">Month input</label> | |
| <input type="month" id="input-month" value="2011-06" /> | |
| </div> | |
| <div> | |
| <label for="input-week">Week input</label> | |
| <input type="week" id="input-week" value="2011-W52" /> | |
| </div> | |
| <div> | |
| <label for="input-datetime">Datetime input</label> | |
| <input type="datetime" id="input-datetime" value="2011-06-14T10:02:48-06:00" /> | |
| </div> | |
| <div> | |
| <label for="input-datetime-local">Datetime-local input</label> | |
| <input type="datetime-local" id="input-datetime-local" value="2011-06-14T10:02:48" /> | |
| </div> | |
| <div> | |
| <label for="input-first-name">First Name <span class="required">*</span></label> | |
| <input type="text" id="input-first-name" required="required" /> | |
| </div> | |
| <div> | |
| <label for="input-last-name">Last Name</label> | |
| <input type="text" id="input-last-name" /> | |
| </div> | |
| <div> | |
| <label for="input-email">E-mail Address</label> | |
| <input type="email" id="input-email" /> | |
| </div> | |
| <div> | |
| <label for="input-url">Website URL</label> | |
| <input type="url" id="input-url" placeholder="http://" /> | |
| </div> | |
| <div> | |
| <label for="input-tel-1">Home Phone</label> | |
| <input type="tel" id="input-tel-1" placeholder="(555) 555-5555" /> | |
| </div> | |
| <div> | |
| <label for="input-tel-2">Work Phone</label> | |
| <input type="tel" id="input-tel-2" placeholder="(555) 555-5555" /> | |
| </div> | |
| <div> | |
| <label for="input-street-address-1">Address 1</label> | |
| <input type="text" id="input-street-address-1" /> | |
| </div> | |
| <div> | |
| <label for="input-street-address-2">Address 2</label> | |
| <input type="text" id="input-street-address-2" /> | |
| </div> | |
| <div> | |
| <label for="input-locality">City</label> | |
| <input type="text" id="input-locality" /> | |
| </div> | |
| <div> | |
| <label for="select-region">State/Province</label> | |
| <select id="select-region"> | |
| <option value="0">Please select...</option> | |
| <option value="OT">(Other)</option> | |
| <optgroup label="States"> | |
| <option value="AL">Alabama</option> | |
| <option value="AK">Alaska</option> | |
| <option value="AZ">Arizona</option> | |
| <option value="AR">Arkansas</option> | |
| <option value="CA">California</option> | |
| <option value="CO">Colorado</option> | |
| <option value="CT">Connecticut</option> | |
| <option value="DE">Delaware</option> | |
| <option value="DC">District of Columbia</option> | |
| <option value="FL">Florida</option> | |
| <option value="GA">Georgia</option> | |
| <option value="HI">Hawaii</option> | |
| <option value="ID">Idaho</option> | |
| <option value="IL">Illinois</option> | |
| <option value="IN">Indiana</option> | |
| <option value="IA">Iowa</option> | |
| <option value="KS">Kansas</option> | |
| <option value="KY">Kentucky</option> | |
| <option value="LA">Louisiana</option> | |
| <option value="ME">Maine</option> | |
| <option value="MD">Maryland</option> | |
| <option value="MA">Massachusetts</option> | |
| <option value="MI">Michigan</option> | |
| <option value="MN">Minnesota</option> | |
| <option value="MS">Mississippi</option> | |
| <option value="MO">Missouri</option> | |
| <option value="MT">Montana</option> | |
| <option value="NE">Nebraska</option> | |
| <option value="NV">Nevada</option> | |
| <option value="NH">New Hampshire</option> | |
| <option value="NJ">New Jersey</option> | |
| <option value="NM">New Mexico</option> | |
| <option value="NY">New York</option> | |
| <option value="NC">North Carolina</option> | |
| <option value="ND">North Dakota</option> | |
| <option value="OH">Ohio</option> | |
| <option value="OK">Oklahoma</option> | |
| <option value="OR">Oregon</option> | |
| <option value="PA">Pennsylvania</option> | |
| <option value="RI">Rhode Island</option> | |
| <option value="SC">South Carolina</option> | |
| <option value="SD">South Dakota</option> | |
| <option value="TN">Tennessee</option> | |
| <option value="TX">Texas</option> | |
| <option value="UT">Utah</option> | |
| <option value="VT">Vermont</option> | |
| <option value="VA">Virginia</option> | |
| <option value="WA">Washington</option> | |
| <option value="WV">West Virginia</option> | |
| <option value="WI">Wisconsin</option> | |
| <option value="WY">Wyoming</option> | |
| </optgroup> | |
| <optgroup label="Provinces"> | |
| <option value="AB">Alberta</option> | |
| <option value="BC">British Columbia</option> | |
| <option value="MB">Manitoba</option> | |
| <option value="NB">New Brunswick</option> | |
| <option value="NF">Newfoundland</option> | |
| <option value="NT">Northwest Territories</option> | |
| <option value="NS">Nova Scotia</option> | |
| <option value="ON">Ontario</option> | |
| <option value="PE">Prince Edward Island</option> | |
| <option value="QC">Quebec</option> | |
| <option value="SK">Saskatchewan</option> | |
| <option value="YT">Yukon Territory</option> | |
| </optgroup> | |
| </select> | |
| </div> | |
| <fieldset id="fieldset-country"> | |
| <legend>Country</legend> | |
| <div> | |
| <label> | |
| <input type="radio" value="usa" checked="checked" /> | |
| USA</label> | |
| </div> | |
| <div> | |
| <label> | |
| <input type="radio" value="canada" /> | |
| Canada</label> | |
| </div> | |
| <div> | |
| <label> | |
| <input type="radio" value="other" /> | |
| Other:</label> | |
| <select id="select-country-name"> | |
| <option value="Please select...">Please select...</option> | |
| <option value="Afghanistan">Afghanistan</option> | |
| <option value="Albania">Albania</option> | |
| <option value="Algeria">Algeria</option> | |
| <option value="American Samoa">American Samoa</option> | |
| <option value="Andorra">Andorra</option> | |
| <option value="Angola">Angola</option> | |
| <option value="Anguilla">Anguilla</option> | |
| <option value="Antigua and Barbuda">Antigua and Barbuda</option> | |
| <option value="Argentina">Argentina</option> | |
| <option value="Armenia">Armenia</option> | |
| <option value="Ascension Island">Ascension Island</option> | |
| <option value="Australia">Australia</option> | |
| <option value="Austria">Austria</option> | |
| <option value="Azerbaijan">Azerbaijan</option> | |
| <option value="Bahamas">Bahamas</option> | |
| <option value="Bahrain">Bahrain</option> | |
| <option value="Bangladesh">Bangladesh</option> | |
| <option value="Barbados">Barbados</option> | |
| <option value="Belarus">Belarus</option> | |
| <option value="Belgium">Belgium</option> | |
| <option value="Belize">Belize</option> | |
| <option value="Benin">Benin</option> | |
| <option value="Bermuda">Bermuda</option> | |
| <option value="Bhutan">Bhutan</option> | |
| <option value="Bolivia">Bolivia</option> | |
| <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option> | |
| <option value="Botswana">Botswana</option> | |
| <option value="Brazil">Brazil</option> | |
| <option value="British Indian Ocean Territory">British Indian Ocean Territory</option> | |
| <option value="Brunei Darussalam">Brunei Darussalam</option> | |
| <option value="Bulgaria">Bulgaria</option> | |
| <option value="Burkina Faso">Burkina Faso</option> | |
| <option value="Burundi">Burundi</option> | |
| <option value="Camaroon">Camaroon</option> | |
| <option value="Cambodia">Cambodia</option> | |
| <option value="Cameroon">Cameroon</option> | |
| <option value="Cape Verde">Cape Verde</option> | |
| <option value="Cayman Islands">Cayman Islands</option> | |
| <option value="Central African Republic">Central African Republic</option> | |
| <option value="Chad">Chad</option> | |
| <option value="Chile">Chile</option> | |
| <option value="China">China</option> | |
| <option value="Colombia">Colombia</option> | |
| <option value="Comoros">Comoros</option> | |
| <option value="Congo">Congo</option> | |
| <option value="Cook Islands">Cook Islands</option> | |
| <option value="Costa Rica">Costa Rica</option> | |
| <option value="Cote D Ivoire">Cote D Ivoire</option> | |
| <option value="Croatia">Croatia</option> | |
| <option value="Cuba">Cuba</option> | |
| <option value="Cyprus">Cyprus</option> | |
| <option value="Czech Republic">Czech Republic</option> | |
| <option value="Denmark">Denmark</option> | |
| <option value="Djibouti">Djibouti</option> | |
| <option value="Dominica">Dominica</option> | |
| <option value="Dominican Republic">Dominican Republic</option> | |
| <option value="Ecuador">Ecuador</option> | |
| <option value="Egypt">Egypt</option> | |
| <option value="El Salvador">El Salvador</option> | |
| <option value="Equatorial Guinea">Equatorial Guinea</option> | |
| <option value="Eritrea">Eritrea</option> | |
| <option value="Estonia">Estonia</option> | |
| <option value="Ethiopia">Ethiopia</option> | |
| <option value="Falkland Islands">Falkland Islands</option> | |
| <option value="Faroe Islands">Faroe Islands</option> | |
| <option value="Federated States of Micronesia">Federated States of Micronesia</option> | |
| <option value="Fiji">Fiji</option> | |
| <option value="Finland">Finland</option> | |
| <option value="France">France</option> | |
| <option value="French Guiana">French Guiana</option> | |
| <option value="French Polynesia">French Polynesia</option> | |
| <option value="Gabon">Gabon</option> | |
| <option value="Georgia">Georgia</option> | |
| <option value="Germany">Germany</option> | |
| <option value="Ghana">Ghana</option> | |
| <option value="Greece">Greece</option> | |
| <option value="Greenland">Greenland</option> | |
| <option value="Grenada">Grenada</option> | |
| <option value="Guadeloupe">Guadeloupe</option> | |
| <option value="Guatemala">Guatemala</option> | |
| <option value="Guam">Guam</option> | |
| <option value="Guinea">Guinea</option> | |
| <option value="Guinea Bissau">Guinea Bissau</option> | |
| <option value="Guyana">Guyana</option> | |
| <option value="Haiti">Haiti</option> | |
| <option value="Holy See (Vatican City)">Holy See (Vatican City)</option> | |
| <option value="Honduras">Honduras</option> | |
| <option value="Hong Kong">Hong Kong</option> | |
| <option value="Hungary">Hungary</option> | |
| <option value="Iceland">Iceland</option> | |
| <option value="India">India</option> | |
| <option value="Indonesia">Indonesia</option> | |
| <option value="Iran">Iran</option> | |
| <option value="Ireland">Ireland</option> | |
| <option value="Isle of Man">Isle of Man</option> | |
| <option value="Israel">Israel</option> | |
| <option value="Italy">Italy</option> | |
| <option value="Jamaica">Jamaica</option> | |
| <option value="Japan">Japan</option> | |
| <option value="Jordan">Jordan</option> | |
| <option value="Kazakhstan">Kazakhstan</option> | |
| <option value="Kenya">Kenya</option> | |
| <option value="Kiribati">Kiribati</option> | |
| <option value="Korea">Korea</option> | |
| <option value="Kuwait">Kuwait</option> | |
| <option value="Kyrgyzstan">Kyrgyzstan</option> | |
| <option value="Laos">Laos</option> | |
| <option value="Latvia">Latvia</option> | |
| <option value="Lebanon">Lebanon</option> | |
| <option value="Lesotho">Lesotho</option> | |
| <option value="Liberia">Liberia</option> | |
| <option value="Libya">Libya</option> | |
| <option value="Liechtenstein">Liechtenstein</option> | |
| <option value="Lithuania">Lithuania</option> | |
| <option value="Luxembourg">Luxembourg</option> | |
| <option value="Macau">Macau</option> | |
| <option value="Macedonia">Macedonia</option> | |
| <option value="Madagascar">Madagascar</option> | |
| <option value="Malawi">Malawi</option> | |
| <option value="Malaysia">Malaysia</option> | |
| <option value="Maldives">Maldives</option> | |
| <option value="Mali">Mali</option> | |
| <option value="Malta">Malta</option> | |
| <option value="Marshall Islands">Marshall Islands</option> | |
| <option value="Martinique">Martinique</option> | |
| <option value="Mauritius">Mauritius</option> | |
| <option value="Mayotte">Mayotte</option> | |
| <option value="Mexico">Mexico</option> | |
| <option value="Moldova">Moldova</option> | |
| <option value="Monaco">Monaco</option> | |
| <option value="Mongolia">Mongolia</option> | |
| <option value="Montenegro">Montenegro</option> | |
| <option value="Montserrat">Montserrat</option> | |
| <option value="Morocco">Morocco</option> | |
| <option value="Mozambique">Mozambique</option> | |
| <option value="Myanmar">Myanmar</option> | |
| <option value="Namibia">Namibia</option> | |
| <option value="Nauru">Nauru</option> | |
| <option value="Nepal">Nepal</option> | |
| <option value="Netherlands">Netherlands</option> | |
| <option value="Netherlands Antilles">Netherlands Antilles</option> | |
| <option value="New Caledonia">New Caledonia</option> | |
| <option value="New Zealand">New Zealand</option> | |
| <option value="Nicaragua">Nicaragua</option> | |
| <option value="Niger">Niger</option> | |
| <option value="Nigeria">Nigeria</option> | |
| <option value="Niue">Niue</option> | |
| <option value="Norfolk Island">Norfolk Island</option> | |
| <option value="Northern Mariana Islands">Northern Mariana Islands</option> | |
| <option value="Norway">Norway</option> | |
| <option value="Oman">Oman</option> | |
| <option value="Pakistan">Pakistan</option> | |
| <option value="Palau">Palau</option> | |
| <option value="Palestine">Palestine</option> | |
| <option value="Panama">Panama</option> | |
| <option value="Papua New Guinea">Papua New Guinea</option> | |
| <option value="Paraguay">Paraguay</option> | |
| <option value="Peru">Peru</option> | |
| <option value="Philippines">Philippines</option> | |
| <option value="Pitcairn">Pitcairn</option> | |
| <option value="Poland">Poland</option> | |
| <option value="Portugal">Portugal</option> | |
| <option value="Puerto Rico">Puerto Rico</option> | |
| <option value="Qatar">Qatar</option> | |
| <option value="Reunion">Reunion</option> | |
| <option value="Romania">Romania</option> | |
| <option value="Russian Federation">Russian Federation</option> | |
| <option value="Rwanda">Rwanda</option> | |
| <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option> | |
| <option value="San Marino">San Marino</option> | |
| <option value="Sao Tome and Principe">Sao Tome and Principe</option> | |
| <option value="Saudi Arabia">Saudi Arabia</option> | |
| <option value="Senegal">Senegal</option> | |
| <option value="Serbia">Serbia</option> | |
| <option value="Seychelles">Seychelles</option> | |
| <option value="Sierra Leone">Sierra Leone</option> | |
| <option value="Singapore">Singapore</option> | |
| <option value="Slovakia">Slovakia</option> | |
| <option value="Slovenia">Slovenia</option> | |
| <option value="Solomon Islands">Solomon Islands</option> | |
| <option value="Somalia">Somalia</option> | |
| <option value="South Africa">South Africa</option> | |
| <option value="South Georgia">South Georgia</option> | |
| <option value="Spain">Spain</option> | |
| <option value="Sri Lanka">Sri Lanka</option> | |
| <option value="St. Kitts and Nevis">St. Kitts and Nevis</option> | |
| <option value="St. Lucia">St. Lucia</option> | |
| <option value="St. Pierre and Miquelon">St. Pierre and Miquelon</option> | |
| <option value="Sudan">Sudan</option> | |
| <option value="Suriname">Suriname</option> | |
| <option value="Swaziland">Swaziland</option> | |
| <option value="Sweden">Sweden</option> | |
| <option value="Switzerland">Switzerland</option> | |
| <option value="Syrian Arab Republic">Syrian Arab Republic</option> | |
| <option value="Taiwan">Taiwan</option> | |
| <option value="Tajikistan">Tajikistan</option> | |
| <option value="Tanzania">Tanzania</option> | |
| <option value="Thailand">Thailand</option> | |
| <option value="The Gambia">The Gambia</option> | |
| <option value="Togo">Togo</option> | |
| <option value="Tokelau">Tokelau</option> | |
| <option value="Tonga">Tonga</option> | |
| <option value="Trinidad and Tobago">Trinidad and Tobago</option> | |
| <option value="Tunisia">Tunisia</option> | |
| <option value="Turkey">Turkey</option> | |
| <option value="Turkmenistan">Turkmenistan</option> | |
| <option value="Turks and Caicos Islands">Turks and Caicos Islands</option> | |
| <option value="Tuvalu">Tuvalu</option> | |
| <option value="Uganda">Uganda</option> | |
| <option value="Ukraine">Ukraine</option> | |
| <option value="United Arab Emirates">United Arab Emirates</option> | |
| <option value="United Kingdom">United Kingdom</option> | |
| <option value="Uruguay">Uruguay</option> | |
| <option value="Uzbekistan">Uzbekistan</option> | |
| <option value="Vanuatu">Vanuatu</option> | |
| <option value="Venezuela">Venezuela</option> | |
| <option value="Viet Nam">Viet Nam</option> | |
| <option value="Virgin Islands">Virgin Islands</option> | |
| <option value="Western Samoa">Western Samoa</option> | |
| <option value="Yemen">Yemen</option> | |
| <option value="Yugoslavia">Yugoslavia</option> | |
| <option value="Zaire">Zaire</option> | |
| <option value="Zambia">Zambia</option> | |
| <option value="Zimbabwe">Zimbabwe</option> | |
| </select> | |
| </div> | |
| </fieldset> | |
| <div> | |
| <label for="input-postal-code">ZIP/Postal Code</label> | |
| <input type="text" id="input-postal-code" maxlength="9" /> | |
| </div> | |
| <div> | |
| <label for="select-information">Information<br /> | |
| <span>Select any that apply</span></label> | |
| <select id="select-information" size="4" multiple="multiple"> | |
| <option value="OptionA">Option A</option> | |
| <option value="OptionB">Option B</option> | |
| <option value="OptionC">Option C</option> | |
| <option value="OptionD">Option D</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="textarea-message">Message</label> | |
| <textarea id="textarea-message" cols="30" rows="5">Message</textarea> | |
| </div> | |
| <fieldset id="fieldset-opt-in-out"> | |
| <legend>Opt-in/out</legend> | |
| <div> | |
| <label> | |
| <input type="checkbox" value="Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." checked="checked" /> | |
| <b>Yes</b>, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</label> | |
| </div> | |
| <div> | |
| <label> | |
| <input type="checkbox" value="No, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." /> | |
| <b>No</b>, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label> | |
| </div> | |
| </fieldset> | |
| <div><a href="javascript:;" onclick="document.forms['form-untitled'].submit();">Submit (anchor)</a></div> | |
| <div> | |
| <input type="image" src="http://placehold.it/90x24" alt="Image (input)" width="90" height="24" /> | |
| </div> | |
| <div> | |
| <input type="reset" value="Reset (input)" /> | |
| </div> | |
| <div> | |
| <input type="button" value="Button (input)" /> | |
| </div> | |
| <div> | |
| <input type="submit" value="Submit (input)" /> | |
| </div> | |
| <div> | |
| <button type="reset">Reset (button)</button> | |
| </div> | |
| <div> | |
| <button type="button">Button (button)</button> | |
| </div> | |
| <div> | |
| <button type="submit">Submit (button)</button> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </div> | |
| <!-- HERE IS THE AFFECTED ELEMENT --> | |
| <div class="float-follow"> | |
| <h3>Here is a sample value add</h3> | |
| </div> | |
| <!-- #/AFFECTED --> | |
| <div class="content"> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| <p>Hi there!</p> | |
| </div> | |
| </div> | |
| <aside id="secondary" class="col"> | |
| <h2>Main:Sidebar</h2> | |
| </aside> | |
| </section> | |
| <footer> | |
| <h4>Fat Footer</h4> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($){ | |
| //console.log("jQuery:" + typeof($)); | |
| $.fn.floatFollow = function(options, callback){ | |
| var settings = { | |
| opacity: .8 | |
| }; | |
| $.extend(true, settings, options); | |
| callback = ($.isFunction(callback)) ? callback : function(){} ; | |
| var store = {}; | |
| var methods = { | |
| init: function($el){ | |
| store.width = $el.outerWidth(); | |
| store.height = $el.outerHeight(); | |
| store.wrapper = $('<div>', { | |
| "class": "float-follow-wrapper" | |
| }).width(store.width + 'px').height(store.height + 'px'); | |
| $el.before(store.wrapper); | |
| store.el = $el.width(store.width).height(store.height); | |
| methods.setViewHeight(); | |
| $el.bind('mouseover', function(){ | |
| $(window).scrollTop(store.offset.top); | |
| }); | |
| $(window).bind('scroll', function(){ | |
| methods.checkScroll(); | |
| }).bind('resize', function(){ | |
| methods.setViewHeight(); | |
| }); | |
| callback(); | |
| }, | |
| setElementOffset: function(){ | |
| store.offset = store.wrapper.offset(); | |
| }, | |
| checkScroll: function(){ | |
| var scrollPos = $(window).scrollTop(); | |
| if((scrollPos + store.viewHeight) < (store.offset.top + store.height)){ | |
| methods.fixBottom(); | |
| } else if (scrollPos > (store.offset.top)) { | |
| methods.fixTop(); | |
| } else { | |
| methods.snap(); | |
| } | |
| }, | |
| setViewHeight: function(){ | |
| store.viewHeight = $(window).height(); | |
| methods.setElementOffset(); | |
| methods.checkScroll(); | |
| }, | |
| transformEl: function(){ | |
| return store.el.css({opacity:settings.opacity, left: store.offset.left + 'px'}).appendTo('body'); | |
| }, | |
| revertEl: function(){ | |
| return store.el.css({opacity:1,left:'auto'}).appendTo(store.wrapper); | |
| }, | |
| fixBottom: function(){ | |
| methods.transformEl().addClass('float-follow-fixbottom'); | |
| }, | |
| fixTop: function(){ | |
| methods.transformEl().addClass('float-follow-fixtop'); | |
| }, | |
| snap: function(){ | |
| methods.revertEl().removeClass("float-follow-fixtop float-follow-fixbottom"); | |
| } | |
| }; | |
| return this.each(function(){ | |
| methods.init($(this)); | |
| }); | |
| }; | |
| //and here is the selector statement. opacity is optional | |
| $('.float-follow').floatFollow({opacity:.5}); | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment