| <script type='text/javascript' src="js/jquery.min.js"></script> | |
| <script type='text/javascript'> | |
| // Size the parent iFrame | |
| function iframeResize() { | |
| var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work. | |
| parent.postMessage("resize::"+height,"*"); | |
| } | |
| $(document).ready(function() { | |
| // Resize iframe |
Dots are animated around to form numbers, left over dots are randomly moved around the canvas. Numbers are created using the getImageData() function.
First time I've used the getImageData() function and theres notes on how its working in the pen.
Pretty resource heavy, best viewed on desktop device.
Demo inspired after seeing this pen and having the need to figure out how it works - http://codepen.io/rachsmith/pen/fBoiD.
| <!--Some code was taken from | |
| http://matthew.wagerfield.com/parallax | |
| http://tympanus.net/codrops/2013/12/24/merry-christmas-with-a-bursting-gift-box/ | |
| License | |
| http://creativecommons.org/licenses/by-nc-sa/4.0/ | |
| --> | |
| <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
| <body> |
| var player; | |
| var videoID = 'Flze-rwT7lM'; // https://youtu.be/Flze-rwT7lM | |
| var videoPlayerPlaceholder = 'youtubePlayer'; | |
| var youtubePlayerInit = function() { | |
| if ((typeof YT !== "undefined") && YT && YT.Player && videoID) { | |
| player = new YT.Player(videoPlayerPlaceholder, { | |
| videoId: videoID, | |
| playerVars: { | |
| 'autoplay': 0, |
| <div class="input-group"> | |
| <button class="btn btn-default" id="play"> <span class='glyphicon glyphicon-play'></span></button><button class="btn btn-default" id="cancel"> <span class='glyphicon glyphicon-stop'></span> | |
| </button> | |
| <div class="content"> | |
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| </div> | |
| <div class="content"> |
| <header class="header js-header"> | |
| <nav class="nav nav-centered"> | |
| <a class="nav__link" href="">link</a> | |
| <a class="nav__link" href="">link</a> | |
| <a class="nav__link" href="">link</a> | |
| </nav> | |
| </header> | |
| <div class="wrapper"> | |
| <main class="main js-main"> |
| function isLocalStorageNameSupported() | |
| { | |
| var testKey = 'test', storage = window.sessionStorage; | |
| try | |
| { | |
| storage.setItem(testKey, '1'); | |
| storage.removeItem(testKey); | |
| return localStorageName in win && win[localStorageName]; | |
| } | |
| catch (error) |
| [ | |
| { | |
| "bus_stop_name":"Mieszka I / Kazimierza Wielkiego", | |
| "bus_lines":"7, 14, 17", | |
| "lat":"54.0840531909591", | |
| "lng":"18.7771153450012" | |
| }, | |
| { | |
| "bus_stop_name":"Armii Krajowej / Kasztanowa", | |
| "bus_lines":"3, 4, 7, 17", |
| const debounce = (fn, time) => { | |
| let timeout; | |
| return function() { | |
| const functionCall = () => fn.apply(this, arguments); | |
| clearTimeout(timeout); | |
| timeout = setTimeout(functionCall, time); | |
| } | |
| } |
| <template lang="pug"> | |
| div(class="gwp-contest__field", :class="{'has-error': errors.has(schema.model) }") | |
| div(class="dropzone") | |
| input(class="is-hidden", type="text", value="", ref="uploadedOutput") | |
| div(class="dropzone__upload") | |
| div(class="dropzone__text") | |
| div(class="dropzone__title") | |
| div(v-if="(howMany !== maxItems)") | |
| | {{ dropMsg }} |