Last active
August 29, 2015 14:00
-
-
Save TravisL12/dc90b246dafe11be2e3c to your computer and use it in GitHub Desktop.
Strava Demo stuff
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
| body { | |
| font-family: Helvetica; } | |
| .container { | |
| margin: 20px auto; | |
| width: auto; | |
| background: #f00; | |
| padding: 20px; } | |
| .container ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; } | |
| .container ul.dropdown { | |
| position: relative; | |
| text-align: center; } | |
| .container ul.dropdown:hover .innerdropdown { | |
| display: block; } | |
| .container ul.dropdown:hover:before { | |
| border-top: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| border-bottom: 10px solid red; | |
| border-left: 10px solid red; } | |
| .container ul.dropdown:before { | |
| content: ''; | |
| position: absolute; | |
| margin-left: 25%; | |
| border-top: 10px solid blue; | |
| border-right: 10px solid blue; | |
| border-bottom: 10px solid transparent; | |
| border-left: 10px solid transparent; } | |
| .container ul.innerdropdown { | |
| display: none; } | |
| .container ul.innerdropdown li { | |
| background: #fff; | |
| border: 1px solid; } | |
| .container ul.innerdropdown li:hover { | |
| background: #ccc; } | |
| .container:after { | |
| content: ''; | |
| display: block; | |
| clear: both; } | |
| .container h1 { | |
| text-align: center; } | |
| .container .inner { | |
| float: left; | |
| border: 1px solid #777; | |
| box-sizing: border-box; } | |
| .container #a { | |
| background: #FFC0CB; | |
| width: 20%; | |
| min-height: 200px; } | |
| .container #b { | |
| background: lightblue; | |
| width: 78%; | |
| margin-left: 2%; | |
| padding: 10px; } |
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
| var printEach = document.getElementById('submit-each'); | |
| var eachValue = document.getElementById('number-each'); | |
| var domVal = document.getElementById('print-here'); | |
| function myEach(num, callback){ | |
| if(typeof num == 'object' || num > 20){ | |
| printToDom(); | |
| return; | |
| } | |
| for(var i = 0; i < num; i++){ | |
| callback(num, i) | |
| } | |
| } | |
| function clearChild(el){ | |
| while (el.firstChild) { | |
| el.removeChild(el.firstChild); | |
| } | |
| } | |
| function printToDom(x,y){ | |
| var newDiv = document.createElement('div') | |
| newDiv.innerHTML = 'value: ' + x + ' , index: ' + y; | |
| domVal.appendChild(newDiv); | |
| } | |
| printEach.addEventListener('click', function(){ | |
| clearChild(domVal); | |
| myEach(eachValue.value, printToDom) | |
| }); |
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
| body{ | |
| font-family: Helvetica; | |
| } | |
| .container{ | |
| margin: 20px auto; | |
| width: auto; | |
| background: #f00; | |
| padding: 20px; | |
| ul{ | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| &.dropdown{ | |
| position: relative; | |
| text-align: center; | |
| &:hover{ | |
| .innerdropdown{ | |
| display: block; | |
| } | |
| &:before{ | |
| border-top: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| border-bottom: 10px solid red; | |
| border-left: 10px solid red; | |
| } | |
| } | |
| &:before{ | |
| content: ''; | |
| position: absolute; | |
| margin-left: 25%; | |
| border-top: 10px solid blue; | |
| border-right: 10px solid blue; | |
| border-bottom: 10px solid transparent; | |
| border-left: 10px solid transparent; | |
| } | |
| } | |
| &.innerdropdown{ | |
| display: none; | |
| li{ | |
| background: #fff; | |
| border: 1px solid; | |
| &:hover{ | |
| background: #ccc; | |
| } | |
| } | |
| } | |
| } | |
| &:after{ | |
| content: ''; | |
| display: block; | |
| clear: both; | |
| } | |
| h1{ | |
| text-align: center; | |
| } | |
| .inner{ | |
| float: left; | |
| border: 1px solid #777; | |
| box-sizing: border-box; | |
| } | |
| #a{ | |
| background: #FFC0CB; | |
| width: 20%; | |
| min-height: 200px; | |
| } | |
| #b{ | |
| background: lightblue; | |
| width: 78%; | |
| margin-left: 2%; | |
| padding: 10px; | |
| } | |
| } |
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> | |
| <link rel="stylesheet" type="text/css" href="application.css"> | |
| <title>Strava Demo</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="inner" id="a"> | |
| <h1>A</h1> | |
| <ul class="dropdown"> | |
| <li>Strava Stuff! | |
| <ul class="innerdropdown"> | |
| <li>I</li> | |
| <li>Love</li> | |
| <li>DropDown</li> | |
| <li>Menus!</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="inner" id="b"> | |
| <h1>B</h1> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia arcu non ultrices tempor. Nullam a euismod tortor. Morbi sit amet libero pulvinar, facilisis elit sed, fermentum nisi. Vestibulum porta risus quis aliquet pharetra. Praesent porta nisi quis suscipit interdum. Sed vel dui non dolor semper accumsan eget nec lectus. Suspendisse molestie nisl at nisl commodo dictum. Sed iaculis cursus consequat. Sed dictum, dolor sit amet ultrices porta, elit lorem ullamcorper dui, faucibus pulvinar arcu metus vitae enim. Suspendisse id auctor mi. Sed fringilla eros enim, eget eleifend sem tristique a. Praesent accumsan ante eu semper posuere. Sed a nunc in ligula sollicitudin tincidunt. Sed eget elit lacus. | |
| </p> | |
| </div> | |
| </div> | |
| <div> | |
| <h1>Other stuff</h1> | |
| <label>Enter an integer to print out 'Each'</label><br> | |
| <input id='number-each' type='number' value='0'> | |
| <button id='submit-each' type='submit'>Print Each Function!</button> | |
| <div id="print-here"></div> | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <script type="text/javascript" src="application.js"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment