scratch – Diff between revs 91 and 96

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 91 Rev 96
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="quick asset upload"> 8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks"> 9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico"> 10 <link rel="icon" href="favicon.ico">
11   11  
12 <title>scratch</title> 12 <title>scratch</title>
13   13
14 <!-- Bootstrap core CSS --> 14 <!-- Bootstrap core CSS -->
15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <!-- Font Awesome --> 16 <!-- Font Awesome -->
17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
18 18
19 <!-- DropZone --> 19 <!-- DropZone -->
20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> 20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
21 21
22 <!-- Site-wide style CCS --> 22 <!-- Site-wide style CCS -->
23 <link href="css/style.css" rel="stylesheet"> 23 <link href="css/style.css" rel="stylesheet">
24 24
25 <!-- Local style --> 25 <!-- Local style -->
26 <link href="css/files/style.css" rel="stylesheet"> 26 <link href="css/files/style.css" rel="stylesheet">
27 </head> 27 </head>
28   28  
29 <body> 29 <body>
30   30  
31 <!-- Main component for a primary marketing message or call to action --> 31 <!-- Main component for a primary marketing message or call to action -->
32 <div class="paralax-background"></div> 32 <div class="paralax-background"></div>
33 <div class="jumbotron"> 33 <div class="jumbotron">
34 <h1>scratch copy</h1> 34 <h1>scratch copy</h1>
35 <p class="quote">the asset sharer</p> 35 <p class="quote">the asset sharer</p>
36 </div> 36 </div>
37   37  
38 <div class="container"> 38 <div class="container">
39 39
40 <ul class="nav nav-tabs"> 40 <ul class="nav nav-tabs">
41 <li><a href="index.html">Home</a></li> 41 <li><a href="index.html">Home</a></li>
42 <li class="active"><a href="#">File</a></li> 42 <li class="active"><a href="#">File</a></li>
43 <li><a href="text.html">Text</a></li> 43 <li><a href="text.html">Text</a></li>
44 <li><a href="draw.html">Draw</a></li> 44 <li><a href="draw.html">Draw</a></li>
45 <li><a href="link.html">Link</a></li> 45 <li><a href="link.html">Link</a></li>
46 </ul> 46 </ul>
47 47
48 <div id="main-panel" class="panel panel-default"> 48 <div id="main-panel" class="panel panel-default">
49 <div class="panel-heading"> 49 <div class="panel-heading">
50 <div id="actions" class="row"> 50 <div id="actions" class="row">
51 <div class="col-lg-5"> 51 <div class="col-lg-5">
52 <div class="btn-group btn-group-justified" role="group"> 52 <div class="btn-group btn-group-justified" role="group">
53 <!-- The fileinput-button span is used to style the file input field as button --> 53 <!-- The fileinput-button span is used to style the file input field as button -->
54 <div class="btn-group" role="group"> 54 <div class="btn-group" role="group">
55 <button id="uploadbutton" type="button" class="btn btn-default"> 55 <button id="uploadbutton" type="button" class="btn btn-default">
56 <i class="glyphicon glyphicon-plus"></i> 56 <i class="glyphicon glyphicon-plus"></i>
57 <span>Add...</span> 57 <span>Add...</span>
58 </button> 58 </button>
59 </div> 59 </div>
60 <div class="btn-group" role="group"> 60 <div class="btn-group" role="group">
61 <button type="submit" class="btn btn-default start"> 61 <button type="submit" class="btn btn-default start">
62 <i class="glyphicon glyphicon-upload"></i> 62 <i class="glyphicon glyphicon-upload"></i>
63 <span>Upload All</span> 63 <span>Upload All</span>
64 </button> 64 </button>
65 </div> 65 </div>
66 <div class="btn-group" role="group"> 66 <div class="btn-group" role="group">
67 <button type="reset" class="btn btn-default cancel"> 67 <button type="reset" class="btn btn-danger cancel">
68 <i class="glyphicon glyphicon-ban-circle"></i> 68 <i class="glyphicon glyphicon-ban-circle"></i>
69 <span>Cancel All</span> 69 <span>Cancel All</span>
70 </button> 70 </button>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 <div class="panel-body" id="uploadpanel"> 76 <div class="panel-body" id="uploadpanel">
77 <div class="table table-striped files" id="previews"> 77 <div class="table table-striped files" id="previews">
78 <div id="template" class="file-row"> 78 <div id="template" class="file-row">
79 <!-- This is used as the file preview template --> 79 <!-- This is used as the file preview template -->
80 <div> 80 <div>
81 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> 81 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
82 </div> 82 </div>
83 <div> 83 <div>
84 <p id="name" class="name" data-dz-name></p> 84 <p id="name" class="name" data-dz-name></p>
85 <div class="input-group"> 85 <div class="input-group">
86 <input id="URL" type="text" class="form-control" readonly> 86 <input id="URL" type="text" class="form-control" readonly>
87 <span class="input-group-btn"> 87 <span class="input-group-btn">
88 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button> 88 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
89 </span> 89 </span>
90 <span class="input-group-btn"> 90 <span class="input-group-btn">
91 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button> 91 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
92 </span> 92 </span>
93 <span class="input-group-btn"> 93 <span class="input-group-btn">
94 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 94 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
95 </span> 95 </span>
96 </div> 96 </div>
97 <div class="input-group"> 97 <div class="input-group">
98 <input id="deleteURL" type="text" class="form-control" readonly> 98 <input id="deleteURL" type="text" class="form-control" readonly>
99 <span class="input-group-btn"> 99 <span class="input-group-btn">
100 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 100 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
101 </span> 101 </span>
102 </div> 102 </div>
103 <strong class="error text-danger" data-dz-errormessage></strong> 103 <strong class="error text-danger" data-dz-errormessage></strong>
104 </div> 104 </div>
105 <div> 105 <div>
106 <p class="size" data-dz-size></p> 106 <p class="size" data-dz-size></p>
107 <div id="progress" class="progress active" role="progressbar"> 107 <div id="progress" class="progress active" role="progressbar">
108 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 108 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
109 </div> 109 </div>
110 </div> 110 </div>
111 <div> 111 <div>
112 <button id="start" class="btn btn-default start"> 112 <button id="start" class="btn btn-default start">
113 <i class="glyphicon glyphicon-upload"></i> 113 <i class="glyphicon glyphicon-upload"></i>
114 <span>Upload</span> 114 <span>Upload</span>
115 </button> 115 </button>
116 <button id="cancel" data-dz-cancel class="btn btn-default cancel"> 116 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
117 <i class="glyphicon glyphicon-ban-circle"></i> 117 <i class="glyphicon glyphicon-ban-circle"></i>
118 <span>Cancel</span> 118 <span>Cancel</span>
119 </button> 119 </button>
120 <button id="remove" data-dz-remove class="btn btn-danger remove"> 120 <button id="remove" data-dz-remove class="btn btn-danger remove">
121 <i class="glyphicon glyphicon-remove"></i> 121 <i class="glyphicon glyphicon-remove"></i>
122 <span>Remove</span> 122 <span>Remove</span>
123 </button> 123 </button>
124 </div> 124 </div>
125 </div> 125 </div>
126   126  
127 </div> 127 </div>
128 </div> 128 </div>
129 <!-- The global file processing state --> 129 <!-- The global file processing state -->
130 <div class="fileupload-process"> 130 <div class="fileupload-process">
131 <div id="total-progress" class="progress active" role="progressbar"> 131 <div id="total-progress" class="progress active" role="progressbar">
132 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 132 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136   136  
137 </div> <!-- /container --> 137 </div> <!-- /container -->
138 138
139 <div id="footer"> 139 <div id="footer">
140 <div class="container"> 140 <div class="container">
141 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 141 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
142 </div> 142 </div>
143 </div> 143 </div>
144   144  
145 <!-- jQuery --> 145 <!-- jQuery -->
146 <script src="bower_components/jquery/dist/jquery.min.js"></script> 146 <script src="bower_components/jquery/dist/jquery.min.js"></script>
147 <!-- BootStrap --> 147 <!-- BootStrap -->
148 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 148 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
149 <!-- DropZone --> 149 <!-- DropZone -->
150 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 150 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
151 <!-- Clipboard --> 151 <!-- Clipboard -->
152 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 152 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
153 <script> 153 <script>
154 $(document).ready(() => { 154 $(document).ready(() => {
-   155 $.get('session.php').then((token) => {
155 // Get the template HTML and remove it from the doument 156 // Get the template HTML and remove it from the doument
156 var previewNode = document 157 var previewNode = document
157 .querySelector("#template"); 158 .querySelector("#template");
158 previewNode.id = ""; 159 previewNode.id = "";
159 var previewTemplate = previewNode 160 var previewTemplate = previewNode
160 .parentNode 161 .parentNode
161 .innerHTML; 162 .innerHTML;
162 previewNode 163 previewNode
163 .parentNode 164 .parentNode
164 .removeChild(previewNode); 165 .removeChild(previewNode);
165   166
166 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 167 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
167 url: "file.php", // Set the url 168 url: 'file.php', // Set the url
168 paramName: "file", 169 paramName: 'file',
169 thumbnailWidth: 80, 170 thumbnailWidth: 80,
170 thumbnailHeight: 80, 171 thumbnailHeight: 80,
171 //parallelUploads: 20, 172 //parallelUploads: 20,
172 previewTemplate: previewTemplate, 173 previewTemplate: previewTemplate,
173 autoQueue: false, // Make sure the files aren't queued until manually added 174 autoQueue: false, // Make sure the files aren't queued until manually added
174 previewsContainer: "#previews", // Container to display the previews 175 previewsContainer: '#previews', // Container to display the previews
175 clickable: [ 176 clickable: [
176 "#uploadbutton", 177 '#uploadbutton',
177 "#uploadpanel" 178 '#uploadpanel'
178 ], 179 ],
179 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 180 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
-   181 }).on('sending', (file, xhr, formData) => {
-   182 // Append session token.
-   183 formData.append('token', token);
180 }).on("addedfile", (file) => { 184 }).on('addedfile', (file) => {
181 // Hookup the start button 185 // Hookup the start button
182 file.previewElement.querySelector(".start").onclick = () => { 186 file.previewElement.querySelector(".start").onclick = () => {
183 myDropzone.enqueueFile(file); 187 myDropzone.enqueueFile(file);
184 }; 188 };
185 }).on("totaluploadprogress", (progress) => { 189 }).on('totaluploadprogress', (progress) => {
186 document 190 document
187 .querySelector("#total-progress .progress-bar") 191 .querySelector('#total-progress .progress-bar')
-   192 .style
-   193 .width = progress + "%";
-   194 }).on('sending', (file) => {
-   195 // Show the total progress bar when upload starts
-   196 document.querySelector("#total-progress")
188 .style 197 .style
189 .width = progress + "%"; -  
190 }).on("sending", (file) => { -  
191 // Show the total progress bar when upload starts -  
192 document.querySelector("#total-progress") -  
193 .style -  
194 .opacity = 1; 198 .opacity = 1;
195 199
196 // And disable the start button. 200 // And disable the start button.
197 file 201 file
198 .previewElement 202 .previewElement
199 .querySelector(".start") 203 .querySelector(".start")
200 .setAttribute("disabled", "disabled"); 204 .setAttribute("disabled", "disabled");
201 }).on("queuecomplete", (progress) => { 205 }).on('queuecomplete', (progress) => {
202 document.querySelector("#total-progress") 206 document.querySelector("#total-progress")
203 .style 207 .style
204 .opacity = "0"; 208 .opacity = "0";
205 }).on("success", (file, data) => { 209 }).on('success', (file, data) => {
206 // Serialize JSON to object. 210 // Serialize JSON to object.
207 data = JSON.parse(data); 211 data = JSON.parse(data);
208 212
209 // Set the ID of the URL box. 213 // Set the ID of the URL box.
210 const boxURLID = '_' + Math 214 const boxURLID = '_' + Math
211 .random() 215 .random()
212 .toString(36) 216 .toString(36)
213 .substr(2, 9); 217 .substr(2, 9);
214 file 218 file
215 .previewElement 219 .previewElement
216 .querySelector("#URL") 220 .querySelector("#URL")
217 .value = location.protocol 221 .value = location.protocol
218 .concat("//") 222 .concat("//")
219 .concat(window.location.hostname) 223 .concat(window.location.hostname)
220 .concat("/") 224 .concat("/")
221 .concat(data.hash); 225 .concat(data.hash);
222 226
223 file 227 file
224 .previewElement 228 .previewElement
225 .querySelector("#URL") 229 .querySelector("#URL")
226 .setAttribute('id', boxURLID) 230 .setAttribute('id', boxURLID)
227   231  
228 // Set the ID of the delete URL box. 232 // Set the ID of the delete URL box.
229 const deleteBoxURLID = '_' + Math 233 const deleteBoxURLID = '_' + Math
230 .random() 234 .random()
231 .toString(36) 235 .toString(36)
232 .substr(2, 9); 236 .substr(2, 9);
233 file 237 file
234 .previewElement 238 .previewElement
235 .querySelector("#deleteURL") 239 .querySelector("#deleteURL")
236 .value = location.protocol.concat("//") 240 .value = location.protocol.concat("//")
237 .concat(window.location.hostname) 241 .concat(window.location.hostname)
238 .concat("/") 242 .concat("/")
239 .concat(data.timestamp) 243 .concat(data.timestamp)
240 .concat("/") 244 .concat("/")
241 .concat(data.hash); 245 .concat(data.hash);
242 246
243 file 247 file
244 .previewElement 248 .previewElement
245 .querySelector("#deleteURL") 249 .querySelector("#deleteURL")
246 .setAttribute('id', deleteBoxURLID) 250 .setAttribute('id', deleteBoxURLID)
247 251
248 // Set the ID of the URL clipboard button. 252 // Set the ID of the URL clipboard button.
249 const clipButtonID = '_' + Math 253 const clipButtonID = '_' + Math
250 .random() 254 .random()
251 .toString(36) 255 .toString(36)
252 .substr(2, 9); 256 .substr(2, 9);
253 file 257 file
254 .previewElement 258 .previewElement
255 .querySelector("#btn-clipboard") 259 .querySelector("#btn-clipboard")
256 .setAttribute('data-clipboard-target', '#' + boxURLID) 260 .setAttribute('data-clipboard-target', '#' + boxURLID)
257 261
258 file 262 file
259 .previewElement 263 .previewElement
260 .querySelector("#btn-clipboard") 264 .querySelector("#btn-clipboard")
261 .setAttribute('id', clipButtonID); 265 .setAttribute('id', clipButtonID);
262 266
263 new Clipboard('#' + clipButtonID); 267 new Clipboard('#' + clipButtonID);
264 268
265 // Set the ID of the delete URL clipboard button. 269 // Set the ID of the delete URL clipboard button.
266 const clipButtonDeleteID = '_' + Math 270 const clipButtonDeleteID = '_' + Math
267 .random() 271 .random()
268 .toString(36) 272 .toString(36)
269 .substr(2, 9); 273 .substr(2, 9);
270 file 274 file
271 .previewElement 275 .previewElement
272 .querySelector("#btn-clipboard-delete") 276 .querySelector("#btn-clipboard-delete")
273 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) 277 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
274 278
275 file 279 file
276 .previewElement 280 .previewElement
277 .querySelector("#btn-clipboard-delete") 281 .querySelector("#btn-clipboard-delete")
278 .setAttribute('id', clipButtonDeleteID); 282 .setAttribute('id', clipButtonDeleteID);
279 283
280 new Clipboard('#' + clipButtonDeleteID); 284 new Clipboard('#' + clipButtonDeleteID);
281 285
282 // Set the ID of the mailto button. 286 // Set the ID of the mailto button.
283 const mailToButtonID = '_' + Math 287 const mailToButtonID = '_' + Math
284 .random() 288 .random()
285 .toString(36) 289 .toString(36)
286 .substr(2, 9); 290 .substr(2, 9);
287 291
288 file 292 file
289 .previewElement 293 .previewElement
290 .querySelector("#btn-mailto") 294 .querySelector("#btn-mailto")
291 .setAttribute('id', mailToButtonID); 295 .setAttribute('id', mailToButtonID);
292   296  
293 file 297 file
294 .previewElement 298 .previewElement
295 .querySelector(".start") 299 .querySelector(".start")
296 .setAttribute("disabled", "disabled"); 300 .setAttribute("disabled", "disabled");
297 file 301 file
298 .previewElement 302 .previewElement
299 .querySelector(".cancel") 303 .querySelector(".cancel")
300 .setAttribute("disabled", "disabled"); 304 .setAttribute("disabled", "disabled");
301 305
302 $('#' + mailToButtonID).on('click', () => { 306 $('#' + mailToButtonID).on('click', () => {
303 window.location.href = "mailto:?subject="+ 307 window.location.href = "mailto:?subject="+
304 encodeURIComponent("Can't scratch this!") + "&body=" + 308 encodeURIComponent("Can't scratch this!") + "&body=" +
305 encodeURIComponent($('#' + boxURLID).val()); 309 encodeURIComponent($('#' + boxURLID).val());
306 }); 310 });
307 311
308 // Set the ID of the facebook button. 312 // Set the ID of the facebook button.
309 const faceBookButtonID = '_' + Math 313 const faceBookButtonID = '_' + Math
310 .random() 314 .random()
311 .toString(36) 315 .toString(36)
312 .substr(2, 9); 316 .substr(2, 9);
313   317  
314 file 318 file
315 .previewElement 319 .previewElement
316 .querySelector("#btn-facebook") 320 .querySelector("#btn-facebook")
317 .setAttribute('id', faceBookButtonID); 321 .setAttribute('id', faceBookButtonID);
318 322
319 switch(data.opengraph) { 323 switch(data.opengraph) {
320 case true: 324 case true:
321 // Enable the facebook button. 325 // Enable the facebook button.
322 file 326 file
323 .previewElement 327 .previewElement
324 .querySelector('#' + faceBookButtonID) 328 .querySelector('#' + faceBookButtonID)
325 .removeAttribute("disabled"); 329 .removeAttribute("disabled");
326 330
327 // Change the URL when the user clicks the button. 331 // Change the URL when the user clicks the button.
328 $('#' + faceBookButtonID).on('click', () => { 332 $('#' + faceBookButtonID).on('click', () => {
329 $('#' + boxURLID) 333 $('#' + boxURLID)
330 .val( 334 .val(
331 location.protocol.concat("//") 335 location.protocol.concat("//")
332 .concat(window.location.hostname) 336 .concat(window.location.hostname)
333 .concat("/") 337 .concat("/")
334 .concat("og") 338 .concat("og")
335 .concat("/") 339 .concat("/")
336 .concat(data.hash) 340 .concat(data.hash)
337 ); 341 );
338 }); 342 });
339 break; 343 break;
340 default: 344 default:
-   345 // Disable the facebook button.
341 // Disable the facebook button. 346 file
342 file 347 .previewElement
343 .previewElement 348 .querySelector('#' + faceBookButtonID)
344 .querySelector('#' + faceBookButtonID) 349 .setAttribute("disabled", "disabled");
345 .setAttribute("disabled", "disabled"); 350 break;
346 break; 351 }
347 } 352 });
348 }); 353
349 354 document.querySelector("#actions .start").onclick = () => {
350 document.querySelector("#actions .start").onclick = () => { 355 myDropzone.enqueueFiles(
351 myDropzone.enqueueFiles( 356 myDropzone
352 myDropzone 357 .getFilesWithStatus(Dropzone.ADDED));
353 .getFilesWithStatus(Dropzone.ADDED)); 358 };
354 }; 359
355 360 document.querySelector("#actions .cancel").onclick = () => {
356 document.querySelector("#actions .cancel").onclick = () => { 361 myDropzone.removeAllFiles(true);
357 myDropzone.removeAllFiles(true); 362 };
358 }; 363 });
359 364
360 // Scroll to the panel. 365 // Scroll to the panel.
361 $('html, body').animate({ 366 $('html, body').animate({
362 scrollTop: $('#main-panel').offset().top 367 scrollTop: $('#main-panel').offset().top
363 }, 'slow'); 368 }, 'slow');
364 }); 369 });
365 </script> 370 </script>
366 <!-- Jumbotron parallax effect --> 371 <!-- Jumbotron parallax effect -->
367 <script> 372 <script>
368 const jumboHeight = $('.jumbotron').outerHeight(); 373 const jumboHeight = $('.jumbotron').outerHeight();
369 function parallax(){ 374 function parallax(){
370 var scrolled = $(window).scrollTop(); 375 var scrolled = $(window).scrollTop();
371 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 376 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
372 } 377 }
373   378  
374 $(window).scroll(function(e){ 379 $(window).scroll(function(e){
375 parallax(); 380 parallax();
376 }); 381 });
377 </script> 382 </script>
378 </body> 383 </body>
379 </html> 384 </html>
380   385