· 5 years ago · Aug 16, 2020, 05:06 AM
1
2<!DOCTYPE html>
3<html lang="en-US">
4<head>
5<title>Tryit Editor v3.6</title>
6<meta name="viewport" content="width=device-width">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<meta property="og:image" content="https://www.w3schools.com/images/w3schools_logo.png">
9<meta property="og:image:type" content="image/png">
10<meta property="og:image:width" content="200">
11<meta property="og:image:height" content="200">
12<link href='https://fonts.googleapis.com/css?family=Source Code Pro' rel='stylesheet'>
13<link rel="stylesheet" href="/w3css/4/w3.css">
14<link rel="stylesheet" href="/lib/codemirror.css">
15<script src="/lib/codemirror.js"></script>
16<script src="/lib/codemirror_jsx.js"></script>
17<script>
18 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
19 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
20 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
21 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
22 ga('create', 'UA-3855518-1', 'auto');
23 ga('require', 'displayfeatures');
24 ga('send', 'pageview');
25</script>
26
27<script type='text/javascript'>
28var k42 = false;
29var googletag = googletag || {}; googletag.cmd = googletag.cmd || [];
30
31(function() {
32 var gads = document.createElement('script');
33 gads.async = true;
34 gads.type = 'text/javascript';
35 gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
36 var node = document.getElementsByTagName('script')[0];
37 node.parentNode.insertBefore(gads, node);
38})();
39
40var snhb = snhb || {}; snhb.queue = snhb.queue || [];
41snhb.options = {
42 logOutputEnabled : false,
43 autoStartAuction: false
44 };
45
46// GPT slots
47var gptAdSlots = [];
48googletag.cmd.push(function() {
49googletag.pubads().disableInitialLoad();
50googletag.pubads().enableSingleRequest();
51 var leaderMapping = googletag.sizeMapping().
52 // Mobile ad
53 addSize([0, 0], [320, 50]).
54 // Vertical Tablet ad
55 addSize([468, 0], [468, 60]).
56 // Horizontal Tablet
57 addSize([728, 0], [728, 90]).
58 // Desktop and bigger ad
59 addSize([970, 0], [[728, 90], [970, 90]]).build();
60 // addSize([970, 0], [728, 90]).build();
61 gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', [[728, 90], [970, 90]], 'div-gpt-ad-1428407818244-0').
62 // gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', [728, 90], 'div-gpt-ad-1428407818244-0').
63 defineSizeMapping(leaderMapping).addService(googletag.pubads());
64 googletag.pubads().setTargeting("content","try" + (function () {
65 var folder = location.pathname;
66 folder = folder.replace("/", "");
67 folder = folder.substr(0, folder.indexOf("/"));
68 return folder;
69 })());
70});
71
72</script>
73<script src="//cdn.snigelweb.com/sncmp/latest/sncmp_stub.min.js"></script>
74<style>
75#snigel-cmp-framework .sn-b-def.sn-blue {color: #ffffff!important;background-color: #4caf50!important;border-color: #4caf50!important;}
76#snigel-cmp-framework .sn-b-def { border-color: #4caf50!important;color: #4caf50!important;}
77#snigel-cmp-framework .sn-selector ul li { color: #4caf50!important}
78#snigel-cmp-framework .sn-selector ul li:after { background-color: #4caf50!important; }
79#snigel-cmp-framework .sn-footer-tab .sn-privacy a {color:#4caf50!important;}
80#snigel-cmp-framework .sn-arrow:after, #snigel-cmp-framework .sn-arrow:before { background-color: #4caf50!important; }
81#snigel-cmp-framework .sn-switch input:checked+span::before { background-color: #4caf50!important; }
82#adconsent-usp-link {border: 1px solid #4caf50!important;color: #4caf50!important;}
83#adconsent-usp-banner-optout input:checked+.adconsent-usp-slider {background-color:#4caf50!important;}
84#adconsent-usp-banner-btn {color:#ffffff;border: solid 1px #4caf50!important;background-color: #4caf50!important;}
85</style>
86<script type="text/javascript">
87__cmp("setLogo", "https://www.w3schools.com/images/img_logo_small.png");
88__cmp("setPrivacyPolicy", "https://www.w3schools.com/about/about_privacy.asp");
89</script>
90<script async type="text/javascript" src="//cdn.snigelweb.com/pub/w3schools.com/snhb-loader.min.js"></script>
91<script>
92 snhb.queue.push(function(){
93
94 snhb.addAdditionalAdSlotsToRefresh(gptAdSlots);
95
96 });
97</script>
98<script>
99if (window.addEventListener) {
100 window.addEventListener("resize", browserResize);
101} else if (window.attachEvent) {
102 window.attachEvent("onresize", browserResize);
103}
104var xbeforeResize = window.innerWidth;
105
106function browserResize() {
107 var afterResize = window.innerWidth;
108 if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
109 (xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
110 (xbeforeResize < (468) && afterResize >= (468)) ||(xbeforeResize >= (468) && afterResize < (468))) {
111 xbeforeResize = afterResize;
112
113 googletag.cmd.push(function() {
114 googletag.pubads().refresh([gptAdSlots[0]]);
115 });
116
117 }
118 if (window.screen.availWidth <= 768) {
119 restack(window.innerHeight > window.innerWidth);
120 }
121 fixDragBtn();
122 showFrameSize();
123}
124var fileID = "";
125var loadSave = false;
126function getSavedFile() {
127 loadSave = true;
128 var htmlCode;
129 var paramObj = {};
130 paramObj.fileid = "";
131 fileID = paramObj.fileid;
132 var paramA = JSON.stringify(paramObj);
133 var httpA = new XMLHttpRequest();
134 httpA.open("POST", globalURL, true);
135 httpA.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
136 httpA.onreadystatechange = function() {
137 if(httpA.readyState == 4 && httpA.status == 200) {
138 document.getElementById("textareaCode").value = httpA.responseText;
139 window.editor.getDoc().setValue(httpA.responseText);
140 loadSave = false;
141 }
142 }
143 httpA.send(paramA);
144}
145</script>
146<style>
147* {
148 -webkit-box-sizing: border-box;
149 -moz-box-sizing: border-box;
150 box-sizing: border-box;
151}
152body {
153 color:#000000;
154 margin:0px;
155 font-size:100%;
156}
157.trytopnav {
158 height:40px;
159 overflow:hidden;
160 min-width:380px;
161 position:absolute;
162 width:100%;
163 top:99px;
164 background-color:#f1f1f1;
165}
166.trytopnav a {
167 color:#999999;
168}
169.w3-bar .w3-bar-item:hover {
170 color:#757575 !important;
171}
172a.w3schoolslink {
173 padding:0 !important;
174 display:inline !important;
175}
176a.w3schoolslink:hover,a.w3schoolslink:active {
177 text-decoration:underline !important;
178 background-color:transparent !important;
179}
180#dragbar{
181 position:absolute;
182 cursor: col-resize;
183 z-index:3;
184 padding:5px;
185}
186#shield {
187 display:none;
188 top:0;
189 left:0;
190 width:100%;
191 position:absolute;
192 height:100%;
193 z-index:4;
194}
195#framesize span {
196 font-family:Consolas, monospace;
197}
198#container {
199 background-color:#f1f1f1;
200 width:100%;
201 overflow:auto;
202 position:absolute;
203 top:138px;
204 bottom:0;
205
206 height:auto;
207}
208#textareacontainer, #iframecontainer {
209 float:left;
210 height:100%;
211 width:50%;
212}
213#textarea, #iframe {
214 height:100%;
215 width:100%;
216 padding-bottom:10px;
217 padding-top:1px;
218}
219#textarea {
220 padding-left:10px;
221 padding-right:5px;
222}
223#iframe {
224 padding-left:5px;
225 padding-right:10px;
226}
227#textareawrapper {
228 width:100%;
229 height:100%;
230 background-color: #ffffff;
231 position:relative;
232 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
233}
234#iframewrapper {
235 width:100%;
236 height:100%;
237 -webkit-overflow-scrolling: touch;
238 background-color: #ffffff;
239 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
240}
241#textareaCode {
242 background-color: #ffffff;
243 font-family: consolas,"courier new",monospace;
244 font-size:15px;
245 height:100%;
246 width:100%;
247 padding:8px;
248 resize: none;
249 border:none;
250 line-height:normal;
251}
252.CodeMirror.cm-s-default {
253 line-height:normal;
254 padding: 4px;
255 height:100%;
256 width:100%;
257}
258#iframeResult, #iframeSource {
259 background-color: #ffffff;
260 height:100%;
261 width:100%;
262}
263#stackV {background-color:#999999;}
264#stackV:hover {background-color:#BBBBBB !important;}
265#stackV.horizontal {background-color:transparent;}
266#stackV.horizontal:hover {background-color:#BBBBBB !important;}
267#stackH.horizontal {background-color:#999999;}
268#stackH.horizontal:hover {background-color:#999999 !important;}
269#textareacontainer.horizontal,#iframecontainer.horizontal{
270 height:50%;
271 float:none;
272 width:100%;
273}
274#textarea.horizontal{
275 height:100%;
276 padding-left:10px;
277 padding-right:10px;
278}
279#iframe.horizontal{
280 height:100%;
281 padding-right:10px;
282 padding-bottom:10px;
283 padding-left:10px;
284}
285#container.horizontal{
286 min-height:200px;
287 margin-left:0;
288}
289#tryitLeaderboard {
290 overflow:hidden;
291 text-align:center;
292 margin-top:5px;
293 height:90px;
294}
295 .w3-dropdown-content {width:350px}
296
297@media screen and (max-width: 727px) {
298 .trytopnav {top:70px;}
299 #container {top:108px;}
300
301}
302@media screen and (max-width: 467px) {
303 .trytopnav {top:60px;}
304 #container {top:98px;}
305 .w3-dropdown-content {width:100%}
306}
307@media only screen and (max-device-width: 768px) {
308 #iframewrapper {overflow: auto;}
309 #container {min-width:320px;}
310 .stack {display:none;}
311 #tryhome {display:block;}
312}
313
314@font-face {
315font-family: 'fontawesome';
316src:url('../lib/fonts/fontawesome.eot?14663396');
317src:url('../lib/fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'),
318 url('../lib/fonts/fontawesome.woff?14663396') format('woff'),
319 url('../lib/fonts/fontawesome.ttf?14663396') format('truetype'),
320 url('../lib/fonts/fontawesome.svg?14663396#fontawesome') format('svg');
321font-weight:normal;
322font-style:normal;
323}
324.fa {
325 display:inline-block;
326 font:normal normal normal 14px/1 FontAwesome;
327 font-size:inherit;
328 text-rendering:auto;
329 -webkit-font-smoothing:antialiased;
330 -moz-osx-font-smoothing:grayscale;
331 transform:translate(0,0);
332}
333.fa-2x {
334 font-size:2em;
335}
336.fa-home:before {content: '\e800'; }
337.fa-save:before {content: '\e804'; }
338.fa-rotate:before {content: '\e813'; }
339.fa-menu:before { content: '\f0c9'; }
340.fa-adjust:before { content: '\e80b'; }
341.loader {
342 border: 6px solid #f3f3f3; /* Light grey */
343 border-top: 6px solid #3498db; /* Blue */
344 border-radius: 50%;
345 width: 60px;
346 height: 60px;
347 animation: spin 2s linear infinite;
348}
349#saveLoader {
350 margin:20px;
351}
352
353@keyframes spin {
354 0% { transform: rotate(0deg); }
355 100% { transform: rotate(360deg); }
356}
357#iframewrapper {
358
359}
360
361body.darktheme {
362 background-color:rgb(40, 44, 52);
363}
364body.darktheme #tryitLeaderboard{
365 background-color:rgb(40, 44, 52);
366}
367body.darktheme .trytopnav{
368 background-color:#616161;
369 color:#dddddd;
370}
371body.darktheme #container {
372 background-color:#616161;
373}
374body.darktheme .trytopnav a {
375 color:#dddddd;
376}
377body.darktheme ::-webkit-scrollbar {width:12px;height:3px;}
378body.darktheme ::-webkit-scrollbar-track-piece {background-color:#000;}
379body.darktheme ::-webkit-scrollbar-thumb {height:50px;background-color: #616161;}
380body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;}
381</style>
382<!--[if lt IE 8]>
383<style>
384#textareacontainer, #iframecontainer {width:48%;}
385#container {height:500px;}
386#textarea, #iframe {width:90%;height:450px;}
387#textareaCode, #iframeResult {height:450px;}
388.stack {display:none;}
389</style>
390<![endif]-->
391</head>
392<body>
393
394<div id='tryitLeaderboard'>
395<!-- TryitLeaderboard -->
396
397 <div id='div-gpt-ad-1428407818244-0'>
398 <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1428407818244-0'); });</script>
399 </div>
400
401</div>
402<script>globalURL = 'https://tryit.w3schools.com/code_datas.php';</script>
403<div id="saveModal" class="w3-modal" style="z-index:4">
404 <div class="w3-modal-content">
405 <div class="w3-display-container">
406 <span onclick="hideAndResetModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
407 <div id="preSave" class="w3-panel">
408 <h2>Save Your Code</h2>
409 <p>If you click the save button, your code will be saved, and you get an URL you can share with others.</p>
410 <div style="height:34px">
411 <p>
412 <button class="w3-btn w3-green" style="margin-right:15px" title="Save" onclick="saveFile(document.getElementById('textareaCode').value);">Save</button>
413 <button class="w3-btn w3-red" title="Cancel" style="margin-right:15px" onclick="hideAndResetModal();">Cancel</button>
414 </p>
415 </div>
416 <p>By clicking the "Save" button you agree to our <a href="javascript:void(0);" class="w3-hover-text-green" onclick="document.getElementById('saveDisclaimer').style.display='block';">terms and conditions</a>.</p>
417 <p><a href="/default.asp" class="w3-button w3-light-grey" onclick="event.preventDefault();displayError()">Report Error</a></p>
418 <div id="saveDisclaimer" style="display:none;">
419 <p>All code in shared files are supplied by users, and belongs to the poster.</p>
420 <p>All shared files are made public. No license is enforced.</p>
421 <p>Any code can be removed without warning (if it is deemed offensive, damaging or for any other reason).</p>
422 <p>w3schools.com are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
423 </div>
424 </div>
425 <div id="errorSave" style="display:none" class="w3-panel">
426 <h2>Your Code Could Not be Saved</h2>
427 <p>The code has too many characters.</p>
428 </div>
429 <div id="postSave" class="w3-panel" style="display:none;">
430 <div id="saveLoader" class="loader"></div>
431 <div id="saveModalSaved" style="display:none">
432 <h2>Your Code has Been Saved</h2>
433 <p>File has been saved to: <a id="shareLink" class="w3-hover-text-green" href="javascript:void(0);" target="_blank"><span id="shareLinkText"></span></a></p>
434 </div>
435 </div>
436 </div>
437 </div>
438</div>
439<div id="driveSaveModal" class="w3-modal" style="z-index:4">
440 <div class="w3-modal-content">
441 <div class="w3-display-container">
442 <span onclick="resetDriveSaveModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
443 <div id="driveText" class="w3-panel w3-large">
444 <h2>Save to Google Drive</h2>
445 <p>If you have a Google account, you can save this code to your Google Drive.</p>
446 <p>Google will ask you to confirm Google Drive access.</p>
447 <p><label class="w3-text-black"><b>Save file as:</b></label>
448 <input class="w3-input w3-border" type="text" id="googleFileName" value="tryjs_editor">
449 <button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white w3-margin-top" title="Save file to Google Drive" onclick="handleAuthClick(event,'save')"><img style="margin-right:5px" alt="Save file to Google Drive" title="Save file to Google Drive" src="/images/driveicon.png">Save file</button>
450 </div>
451 <div class="w3-panel w3-large loader" id="driveSavedPanel" style="display:none">
452 <p id="driveSavedText"></p>
453 </div>
454 </div>
455 </div>
456</div>
457
458<div id="driveLoadModal" class="w3-modal" style="z-index:4">
459 <div class="w3-modal-content">
460 <div class="w3-display-container">
461 <span onclick="resetDriveLoadModal()" class="w3-button w3-display-topright" style="font-weight:bold;">×</span>
462 <div class="w3-panel w3-large">
463 <h2>Open from Google Drive</h2>
464 <p>If you have saved a file to Google Drive, you can open it here:</p>
465 <p><button class="w3-button w3-light-grey w3-hover-grey w3-hover-text-white" title="Open file from Google Drive" onclick="handleAuthClick(event,'open')"><img style="margin-right:5px" alt="Open file from Google Drive" title="Open file from Google Drive" src="/images/driveicon.png">Open file</button></p>
466 </div>
467 </div>
468 </div>
469</div>
470
471<div class="trytopnav">
472<div class="w3-bar" style="overflow:auto">
473 <a id="tryhome" href="https://www.w3schools.com" target="_blank" title="w3schools.com Home" class="w3-button w3-bar-item topnav-icons fa fa-home" style="font-size:28px;margin-top:-2px"></a>
474 <a href="javascript:void(0);" onclick="openMenu()" id="menuButton" title="Open Menu"class="w3-dropdown-click w3-button w3-bar-item topnav-icons fa fa-menu" style="font-size:28px;margin-top:-2px"></a>
475 <a href="javascript:void(0);" onclick="click_savebtn()" title="Save" class="w3-button w3-bar-item topnav-icons fa fa-save" style="font-size:28px;margin-top:-2px"></a>
476 <a href="javascript:void(0);" onclick="restack(currentStack)" title="Change Orientation" class="w3-button w3-bar-item topnav-icons fa fa-rotate" style="font-size:28px;margin-top:-2px"></a>
477 <a href="javascript:void(0);" onclick="retheme()" title="Change Theme" class="w3-button w3-bar-item topnav-icons fa fa-adjust" style="font-size:28px;margin-top:-2px"></a>
478 <button class="w3-button w3-bar-item w3-green w3-hover-white w3-hover-text-green" style="font-size:16px" onclick="submitTryit(1);ga('send', 'event', 'runCode', 'click');">Run »</button>
479 <span class="w3-right w3-hide-small" style="padding:8px 8px 8px 8px;display:block"></span>
480 <span class="w3-right w3-hide-small" style="padding:8px 0;display:block;float:right;"><span id="framesize"></span></span>
481</div>
482
483</div>
484
485<div id="shield"></div>
486
487<a href="javascript:void(0)" id="dragbar"></a>
488<div id="container">
489<div id="navbarDropMenu" class="w3-dropdown-content w3-bar-block w3-border" style="z-index:5">
490<span onclick="openMenu()" class="w3-button w3-display-topright w3-transparent w3-hover-dark-grey" title="Close Menu" style="font-weight:bold;padding-top:10px;padding-bottom:11px;">×</span>
491 <div class="w3-bar-block">
492 <a class="w3-bar-item w3-button" href='javascript:void(0);' title="Change Orientaton" onclick="openMenu();restack(currentStack)"><i class="fa fa-rotate" style="font-size:26px;margin-left:-4px;margin-right:8px"></i><span style="position:relative;top:-4px;left:2px;">Change Orientation</span></a>
493 <a class="w3-bar-item w3-button" href="javascript:void(0);" title="Save" onclick="openMenu();click_savebtn()"><i class="fa fa-save" style="font-size:26px;margin-right:10px;"></i><span style="position:relative;top:-4px;left:2px;">Save Code</span></a>
494 <a class="w3-bar-item w3-button" href='javascript:void(0);' id="saveGDriveBtn" title="Save to Google Drive" onclick="openMenu();click_google_savebtn()"><img src="/images/driveicon_32.png" alt="Save to Google Drive" title="Save to Google Drive" style="margin-right:10px;width:24px;"><span style="position:relative;left:1px;">Save to Google Drive</span></a>
495 <a class="w3-bar-item w3-button" href='javascript:void(0);' id="loadGDriveBtn" title="Load from Google Drive" onclick="openMenu();click_google_loadbtn()"><img src="/images/driveicon_32.png" alt="Load from Google Drive" title="Load from Google Drive" style="margin-right:10px;width:24px;"><span style="position:relative;left:1px;">Load from Google Drive</span></a>
496 <a class="w3-bar-item w3-button" href='javascript:void(0);' title="Change Theme" onclick="openMenu();retheme()"><i class="fa fa-adjust" style="font-size:26px;margin-right:8px"></i><span style="position:relative;top:-4px;left:2px;">Change Theme, Dark/Light</span></a>
497 </div>
498 <footer class="w3-container w3-small w3-light-gray">
499 <p><a style="display:inline;padding:0;" href="/about/about_privacy.asp" target="_blank" onclick="openMenu();" class="w3-hover-none w3-hover-text-green">Privacy policy</a> and
500 <a style="display:inline;padding:0;" href="/about/about_copyright.asp" target="_blank" onclick="openMenu();" class="w3-hover-none w3-hover-text-green">Copyright 1999-2020</a></p>
501 </footer>
502</div>
503<div id="menuOverlay" class="w3-overlay w3-transparent" style="cursor:pointer;z-index:4"></div>
504 <div id="textareacontainer">
505 <div id="textarea">
506 <div id="textareawrapper">
507 <textarea autocomplete="off" id="textareaCode" wrap="logical" spellcheck="false"><!DOCTYPE html>
508<html>
509<body>
510
511<h2>My Heading</h2>
512
513<p>Play around with the code and click on the "Run" button to view the result.</p>
514
515<p id="demo"></p>
516
517<script>
518var x = 5;
519var y = 6;
520var z = x + y;
521document.getElementById("demo").innerHTML =
522"The value of z is: " + z;
523</script>
524
525</body>
526</html>
527</textarea>
528 <form id="codeForm" autocomplete="off" style="margin:0px;display:none;">
529 <input type="hidden" name="code" id="code" />
530 </form>
531 </div>
532 </div>
533 </div>
534 <div id="iframecontainer">
535 <div id="iframe">
536 <div id="iframewrapper"></div>
537 </div>
538 </div>
539</div>
540<div id="err_form" class="w3-modal" style="z-index:4">
541 <div class="w3-modal-content w3-display-container">
542 <span onclick="document.getElementById('err_form').style.display='none'" class="w3-button w3-display-topright w3-text-white w3-padding w3-green" style="font-weight:bold;">×</span>
543 <div class="w3-container w3-green">
544 <h2>Report a Problem:</h2>
545 </div>
546<form class="w3-container">
547<p><label for="err_email">Your E-mail:</label>
548<input class="w3-input w3-border" type="text" style="width:100%" id="err_email" name="err_email">
549</p>
550<p>
551<label for="err_email">Page address:</label>
552<input class="w3-input w3-border" type="text" style="width:100%" id="err_url" name="err_url" disabled="disabled">
553</p>
554<p>
555<label for="err_email">Description:</label>
556<textarea rows="10" class="w3-input w3-border" id="err_desc" name="err_desc" style="width:100%;resize:vertical"></textarea>
557</p>
558<button class="w3-btn w3-right w3-green w3-margin-bottom" type="button" onclick="sendErr()">Submit</button>
559</form>
560
561 </div>
562</div>
563<style>
564#backtotutcontainer {
565 position:absolute;
566 bottom:0;
567 background-color:#f1f1f1;
568 width:100%;
569 height:50px;
570 padding-left:10px;
571 color:#555;
572}
573.w3-btn:hover.w3-blue, .w3-btn:active.w3-blue {
574 background-color: #0d8bf2!important;
575 color: #fff!important;
576 box-shadow: none;
577}
578body.darktheme #backtotutcontainer {
579 background-color:#616161;
580 color:#ddd;
581}
582</style>
583
584<script>
585submitTryit()
586
587function submitTryit(n) {
588 if (window.editor) {
589 window.editor.save();
590 }
591 var text = document.getElementById("textareaCode").value;
592 var ifr = document.createElement("iframe");
593 ifr.setAttribute("frameborder", "0");
594 ifr.setAttribute("id", "iframeResult");
595 ifr.setAttribute("name", "iframeResult");
596 ifr.setAttribute("allowfullscreen", "true");
597 document.getElementById("iframewrapper").innerHTML = "";
598 document.getElementById("iframewrapper").appendChild(ifr);
599 if (loadSave == true ) {
600 ifr.setAttribute("src", "/code/opentext.htm");
601 } else if (fileID != "" && loadSave == false) {
602 var t=text;
603 t=t.replace(/=/gi,"w3equalsign");
604 t=t.replace(/\+/gi,"w3plussign");
605 var pos=t.search(/script/i)
606 while (pos>0) {
607 t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6);
608 pos=t.search(/script/i);
609 }
610 document.getElementById("code").value=t;
611 document.getElementById("codeForm").action = "https://tryit.w3schools.com/tryit_view.php?x=" + Math.random();
612 document.getElementById('codeForm').method = "post";
613 document.getElementById('codeForm').acceptCharset = "utf-8";
614 document.getElementById('codeForm').target = "iframeResult";
615 document.getElementById("codeForm").submit();
616 } else {
617 var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
618 ifrw.document.open();
619 ifrw.document.write(text);
620 ifrw.document.close();
621 //23.02.2016: contentEditable is set to true, to fix text-selection (bug) in firefox.
622 //(and back to false to prevent the content from being editable)
623 //(To reproduce the error: Select text in the result window with, and without, the contentEditable statements below.)
624 if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
625 ifrw.document.body.contentEditable = true;
626 ifrw.document.body.contentEditable = false;
627 }
628 }
629}
630var currentStack=true;
631if ((window.screen.availWidth <= 768 && window.innerHeight > window.innerWidth) || "" == " horizontal") {restack(true);}
632function restack(horizontal) {
633 var tc, ic, t, i, c, f, sv, sh, d, height, flt, width;
634 tc = document.getElementById("textareacontainer");
635 ic = document.getElementById("iframecontainer");
636 t = document.getElementById("textarea");
637 i = document.getElementById("iframe");
638 c = document.getElementById("container");
639 sv = document.getElementById("stackV");
640 sh = document.getElementById("stackH");
641 tc.className = tc.className.replace("horizontal", "");
642 ic.className = ic.className.replace("horizontal", "");
643 t.className = t.className.replace("horizontal", "");
644 i.className = i.className.replace("horizontal", "");
645 c.className = c.className.replace("horizontal", "");
646 if (sv) {sv.className = sv.className.replace("horizontal", "")};
647 if (sv) {sh.className = sh.className.replace("horizontal", "")};
648 stack = "";
649 if (horizontal) {
650 tc.className = tc.className + " horizontal";
651 ic.className = ic.className + " horizontal";
652 t.className = t.className + " horizontal";
653 i.className = i.className + " horizontal";
654 c.className = c.className + " horizontal";
655 if (sv) {sv.className = sv.className + " horizontal"};
656 if (sv) {sh.className = sh.className + " horizontal"};
657 stack = " horizontal";
658 document.getElementById("textareacontainer").style.height = "50%";
659 document.getElementById("iframecontainer").style.height = "50%";
660 document.getElementById("textareacontainer").style.width = "100%";
661 document.getElementById("iframecontainer").style.width = "100%";
662 currentStack=false;
663 } else {
664 document.getElementById("textareacontainer").style.height = "100%";
665 document.getElementById("iframecontainer").style.height = "100%";
666 document.getElementById("textareacontainer").style.width = "50%";
667 document.getElementById("iframecontainer").style.width = "50%";
668 currentStack=true;
669 }
670 fixDragBtn();
671 showFrameSize();
672}
673function showFrameSize() {
674 var t;
675 var width, height;
676 width = Number(w3_getStyleValue(document.getElementById("iframeResult"), "width").replace("px", "")).toFixed();
677 height = Number(w3_getStyleValue(document.getElementById("iframeResult"), "height").replace("px", "")).toFixed();
678 document.getElementById("framesize").innerHTML = "Result Size: <span>" + width + " x " + height + "</span>";
679}
680var dragging = false;
681var stack;
682function fixDragBtn() {
683 var textareawidth, leftpadding, dragleft, containertop, buttonwidth
684 var containertop = Number(w3_getStyleValue(document.getElementById("container"), "top").replace("px", ""));
685 if (stack != " horizontal") {
686 document.getElementById("dragbar").style.width = "5px";
687 textareasize = Number(w3_getStyleValue(document.getElementById("textareawrapper"), "width").replace("px", ""));
688 leftpadding = Number(w3_getStyleValue(document.getElementById("textarea"), "padding-left").replace("px", ""));
689 buttonwidth = Number(w3_getStyleValue(document.getElementById("dragbar"), "width").replace("px", ""));
690 textareaheight = w3_getStyleValue(document.getElementById("textareawrapper"), "height");
691 dragleft = textareasize + leftpadding + (leftpadding / 2) - (buttonwidth / 2);
692 document.getElementById("dragbar").style.top = containertop + "px";
693 document.getElementById("dragbar").style.left = dragleft + "px";
694 document.getElementById("dragbar").style.height = textareaheight;
695 document.getElementById("dragbar").style.cursor = "col-resize";
696
697 } else {
698 document.getElementById("dragbar").style.height = "5px";
699 if (window.getComputedStyle) {
700 textareawidth = window.getComputedStyle(document.getElementById("textareawrapper"),null).getPropertyValue("height");
701 textareaheight = window.getComputedStyle(document.getElementById("textareawrapper"),null).getPropertyValue("width");
702 leftpadding = window.getComputedStyle(document.getElementById("textarea"),null).getPropertyValue("padding-top");
703 buttonwidth = window.getComputedStyle(document.getElementById("dragbar"),null).getPropertyValue("height");
704 } else {
705 dragleft = document.getElementById("textareawrapper").currentStyle["width"];
706 }
707 textareawidth = Number(textareawidth.replace("px", ""));
708 leftpadding = Number(leftpadding .replace("px", ""));
709 buttonwidth = Number(buttonwidth .replace("px", ""));
710 dragleft = containertop + textareawidth + leftpadding + (leftpadding / 2);
711 document.getElementById("dragbar").style.top = dragleft + "px";
712 document.getElementById("dragbar").style.left = "5px";
713 document.getElementById("dragbar").style.width = textareaheight;
714 document.getElementById("dragbar").style.cursor = "row-resize";
715 }
716}
717function dragstart(e) {
718 e.preventDefault();
719 dragging = true;
720 var main = document.getElementById("iframecontainer");
721}
722function dragmove(e) {
723 if (dragging)
724 {
725 document.getElementById("shield").style.display = "block";
726 if (stack != " horizontal") {
727 var percentage = (e.pageX / window.innerWidth) * 100;
728 if (percentage > 5 && percentage < 98) {
729 var mainPercentage = 100-percentage;
730 document.getElementById("textareacontainer").style.width = percentage + "%";
731 document.getElementById("iframecontainer").style.width = mainPercentage + "%";
732 fixDragBtn();
733 }
734 } else {
735 var containertop = Number(w3_getStyleValue(document.getElementById("container"), "top").replace("px", ""));
736 var percentage = ((e.pageY - containertop + 20) / (window.innerHeight - containertop + 20)) * 100;
737 if (percentage > 5 && percentage < 98) {
738 var mainPercentage = 100-percentage;
739 document.getElementById("textareacontainer").style.height = percentage + "%";
740 document.getElementById("iframecontainer").style.height = mainPercentage + "%";
741 fixDragBtn();
742 }
743 }
744 showFrameSize();
745 }
746}
747function dragend() {
748 document.getElementById("shield").style.display = "none";
749 dragging = false;
750 var vend = navigator.vendor;
751 if (window.editor && vend.indexOf("Apple") == -1) {
752 window.editor.refresh();
753 }
754}
755if (window.addEventListener) {
756 document.getElementById("dragbar").addEventListener("mousedown", function(e) {dragstart(e);});
757 document.getElementById("dragbar").addEventListener("touchstart", function(e) {dragstart(e);});
758 window.addEventListener("mousemove", function(e) {dragmove(e);});
759 window.addEventListener("touchmove", function(e) {dragmove(e);});
760 window.addEventListener("mouseup", dragend);
761 window.addEventListener("touchend", dragend);
762 window.addEventListener("load", fixDragBtn);
763 window.addEventListener("load", showFrameSize);
764}
765function click_savebtn() {
766 if (window.editor) {
767 window.editor.save();
768 }
769 document.getElementById('saveModal').style.display = 'block';
770}
771function click_google_savebtn() {
772 if (window.editor) {
773 window.editor.save();
774 }
775 document.getElementById('driveSaveModal').style.display='block'
776}
777
778function click_google_loadbtn() {
779 document.getElementById('driveLoadModal').style.display='block'
780}
781function retheme() {
782 var cc = document.body.className;
783 if (cc.indexOf("darktheme") > -1) {
784 document.body.className = cc.replace("darktheme", "");
785 if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
786 localStorage.setItem("preferredmode", "light");
787 } else {
788 document.body.className += " darktheme";
789 if (opener) {opener.document.body.className += " darktheme";}
790 localStorage.setItem("preferredmode", "dark");
791 }
792}
793(
794function setThemeMode() {
795 var x = localStorage.getItem("preferredmode");
796 if (x == "dark") {
797 document.body.className += " darktheme";
798 }
799})();
800function colorcoding() {
801 var ua = navigator.userAgent;
802 //Opera Mini refreshes the page when trying to edit the textarea.
803 if (ua && ua.toUpperCase().indexOf("OPERA MINI") > -1) { return false; }
804 window.editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
805 mode: "text/html",
806 htmlMode: true,
807 lineWrapping: true,
808 smartIndent: false,
809 addModeClass: true
810 });
811// window.editor.on("change", function () {window.editor.save();});
812}
813colorcoding();
814
815function w3_getStyleValue(elmnt,style) {
816 if (window.getComputedStyle) {
817 return window.getComputedStyle(elmnt,null).getPropertyValue(style);
818 } else {
819 return elmnt.currentStyle[style];
820 }
821}
822//SAVE AND OPEN SCRIPT
823var oauthToken;
824var userAction;
825var pickerApiLoaded;
826var developerKey = 'AIzaSyAMZDPXiGcCNWs1UCWG9LS6kkW5YiABfJ0';
827var CLIENT_ID = '451843133508-ckbr5r6ch1ofqbmh87oll4u6ltinqv2t.apps.googleusercontent.com';
828var SCOPES = ['https://www.googleapis.com/auth/drive.file'];
829
830//Check if current user has authorized this application
831function checkAuth() {
832 gapi.auth.authorize(
833 {
834 'client_id': CLIENT_ID,
835 'scope': SCOPES.join(' '),
836 'immediate': true
837 }, handleAuthResult);
838}
839
840//Handle response from authorization server
841function handleAuthResult(authResult) {
842 if (authResult && !authResult.error) {
843 oauthToken = authResult.access_token;
844 loadApi();
845 }
846}
847
848// Initiate auth flow in response to user clicking authorize button
849function handleAuthClick(event,userClick) {
850 userAction = userClick;
851 gapi.auth.authorize(
852 {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
853 handleAuthResult);
854 return false;
855}
856
857// Load API library
858function loadApi() {
859 gapi.client.load('drive', 'v3');
860 gapi.load('picker', {'callback': onPickerApiLoad});
861}
862function onPickerApiLoad() {
863 pickerApiLoaded = true;
864 if (userAction=="save") {
865 userAction="";
866 document.getElementById('driveText').style.display='none';
867 document.getElementById('driveSavedPanel').style.display='block';
868 createFileWithHTMLContent(document.getElementById('googleFileName').value,document.getElementById('textareaCode').value)
869 }
870 if (userAction=="open") {
871 userAction="";
872 createPicker();
873 }
874}
875
876// Create and render a Picker object for picking HTML file
877function createPicker() {
878 if (pickerApiLoaded) {
879 var view = new google.picker.View(google.picker.ViewId.DOCS);
880 view.setMimeTypes("text/html");
881 var picker = new google.picker.PickerBuilder().
882 addView(view).
883 setOAuthToken(oauthToken).
884 setDeveloperKey(developerKey).
885 setCallback(pickerCallback).
886 build();
887 picker.setVisible(true);
888 }
889}
890// Put content of file in tryit editor
891function pickerCallback(data) {
892 var docID = '';
893 if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
894 var doc = data[google.picker.Response.DOCUMENTS][0];
895 docID = doc[google.picker.Document.ID];
896 getContentOfFile(docID);
897 }
898}
899
900//Get contents
901function getContentOfFile(theID){
902 gapi.client.request({'path': '/drive/v3/files/'+theID+'?alt=media&key='+developerKey,'method': 'GET',callback: function ( theResponseJS, theResponseTXT ) {
903 var myToken = gapi.auth.getToken();
904 var code = JSON.parse(theResponseTXT);
905 code = code.gapiRequest.data.body;
906 document.getElementById("textareaCode").value=code;
907 window.editor.getDoc().setValue(code);
908 submitTryit(1);
909 resetDriveLoadModal();
910 }
911 });
912}
913
914var createFileWithHTMLContent = function(name,data,callback) {
915 const boundary = '-------314159265358979323846';
916 const delimiter = "\r\n--" + boundary + "\r\n";
917 const close_delim = "\r\n--" + boundary + "--";
918 const contentType = 'text/html';
919
920 var metadata = {
921 'name': name,
922 'mimeType': contentType
923 };
924
925 var multipartRequestBody =
926 delimiter +
927 'Content-Type: application/json\r\n\r\n' +
928 JSON.stringify(metadata) +
929 delimiter +
930 'Content-Type: ' + contentType + '\r\n\r\n' +
931 data +
932 close_delim;
933
934 var request = gapi.client.request({
935 'path': '/upload/drive/v3/files',
936 'method': 'POST',
937 'params': {'uploadType': 'multipart'},
938 'headers': {
939 'Content-Type': 'multipart/related; boundary="' + boundary + '"'
940 },
941 'body': multipartRequestBody});
942 if (!callback) {
943 callback = function(file) {
944 console.log(file);
945 document.getElementById("driveSavedText").innerHTML = file.name + " saved in Google Drive";
946 document.getElementById("driveSavedPanel").className = "w3-panel w3-large";
947 };
948 }
949 request.execute(callback);
950}
951
952if (navigator.userAgent.indexOf("MSIE") > 0 || navigator.userAgent.indexOf("Edge") > 0) {
953 document.getElementById("saveGDriveBtn").style.display = "none";
954 document.getElementById("loadGDriveBtn").style.display = "none";
955}
956
957
958function resetDriveSaveModal() {
959 document.getElementById('driveSavedText').innerHTML='';
960 document.getElementById('driveSaveModal').style.display='none'
961 document.getElementById('driveSavedPanel').style.display='none'
962 document.getElementById('driveText').style.display='block'
963 document.getElementById("driveSavedPanel").className = "w3-panel w3-large loader";
964}
965function resetDriveLoadModal() {
966 document.getElementById('driveLoadModal').style.display='none'
967}
968
969function saveFile(code) {
970 document.getElementById('preSave').style.display='none';
971 if (code.length>20000) {
972 document.getElementById('errorSave').style.display='block';
973 return;
974 }
975 document.getElementById('postSave').style.display='block';
976 var paramObj = {};
977 paramObj.code = code;
978 var paramB = JSON.stringify(paramObj);
979 var httpB = new XMLHttpRequest();
980 httpB.open("POST", globalURL, true);
981
982 httpB.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
983
984 httpB.onreadystatechange = function() {
985 if(httpB.readyState == 4 && httpB.status == 200) {
986 if(httpB.responseText.substr(0,2) == "OK" ) {
987 var getId = httpB.responseText.substr(2);
988 document.getElementById("shareLink").href = "/code/tryit.asp?filename=" + getId;
989 document.getElementById("shareLinkText").innerHTML = "https://www.w3schools.com/code/tryit.asp?filename=" + getId;
990 document.getElementById('saveLoader').style.display = "none";
991 document.getElementById("saveModalSaved").style.display = "block";
992 }
993 }
994 }
995 httpB.send(paramB);
996}
997function hideAndResetModal() {
998 document.getElementById("saveModal").style.display = "none";
999 document.getElementById('preSave').style.display = "block";
1000 document.getElementById('errorSave').style.display = "none";
1001 document.getElementById('postSave').style.display = "none";
1002 document.getElementById("saveModalSaved").style.display = "none";
1003 document.getElementById('saveDisclaimer').style.display= "none";
1004 document.getElementById('saveLoader').style.display = "block";
1005}
1006
1007var addr = document.location.href;
1008function displayError() {
1009 document.getElementById("err_url").value = addr;
1010 document.getElementById("err_form").style.display = "block";
1011 document.getElementById("err_email").focus();
1012 hideSent();
1013}
1014function hideError() {
1015 document.getElementById("err_form").style.display = "none";
1016}
1017function hideSent() {
1018 document.getElementById("err_sent").style.display = "none";
1019}
1020function sendErr() {
1021 var xmlhttp;
1022 var err_url = document.getElementById("err_url").value;
1023 var err_email = document.getElementById("err_email").value;
1024 var err_desc = document.getElementById("err_desc").value;
1025 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
1026 xmlhttp = new XMLHttpRequest();
1027 } else {// code for IE6, IE5
1028 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
1029 }
1030 xmlhttp.open("POST", "/err_sup.asp", true);
1031 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
1032 xmlhttp.send("err_url=" + err_url + "&err_email=" + err_email + "&err_desc=" + escape(err_desc));
1033 document.getElementById("err_desc").value = "";
1034 hideError();
1035 document.getElementById("err_sent").style.display = "block";
1036}
1037function openMenu() {
1038 var x = document.getElementById("navbarDropMenu");
1039 var y = document.getElementById("menuOverlay");
1040 var z = document.getElementById("menuButton");
1041 if (z.className.indexOf("w3-text-gray") == -1) {
1042 z.className += " w3-text-gray";
1043 } else {
1044 z.className = z.className.replace(" w3-text-gray", "");
1045 }
1046 if (z.className.indexOf("w3-gray") == -1) {
1047 z.className += " w3-gray";
1048 } else {
1049 z.className = z.className.replace(" w3-gray", "");
1050 }
1051 if (x.className.indexOf("w3-show") == -1) {
1052 x.className += " w3-show";
1053 } else {
1054 x.className = x.className.replace(" w3-show", "");
1055 }
1056 if (y.className.indexOf("w3-show") == -1) {
1057 y.className += " w3-show";
1058 } else {
1059 y.className = y.className.replace(" w3-show", "");
1060 }
1061
1062}
1063// When the user clicks anywhere outside of the modal, close it
1064window.onclick = function(event) {
1065 if (event.target == document.getElementById("saveModal")) {
1066 hideAndResetModal();
1067 }
1068 if (event.target == document.getElementById("driveSaveModal")) {
1069 resetDriveSaveModal();
1070 }
1071 if (event.target == document.getElementById("driveLoadModal")) {
1072 resetDriveLoadModal();
1073 }
1074 if (event.target == document.getElementById("menuOverlay")) {
1075 openMenu();
1076 }
1077
1078}
1079</script>
1080
1081<script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
1082
1083
1084</body>
1085</html>