Html demos with data uri
How do I make an html demos with data uri?
What is a html demos with data uri? How do you make a html demos with data uri? This script and codes were developed by Moncho Varela on 19 January 2023, Thursday.
Html demos with data uri - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Html demos with data uri</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
*,
*:after,
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* = scroll
----------------------------*/
::-webkit-scrollbar { width: 8px;
}
::-webkit-scrollbar { background:#ecf0f1;
}
::-webkit-scrollbar-thumb { background: #ddd;
}
/* = body
----------------------------*/
html,body{ position:relative; height:100%;
}
body{ background:#fff; background-size:cover; color:#777; overflow:auto; font-family: 'Oswald', 'sans-serif'; font-weight: 400;
}
.wrapper{ display: block; margin: 5px auto; width: 90%;
}
.btn{ margin:5px; color: #FFF; display: inline-block; background:#3498db; border: 1px solid #2980b9; padding:0.5em 1em; text-align: center; text-decoration:none; outline: none; white-space: nowrap; cursor: pointer; font-family: 'sans-serif'; font-weight: 300; font-size: 18px; border-radius: 2px; transition:all 0.2s ease;
}
.btn:hover{ border-color: #eee; background: #C0392B; color: #eee; transition:all 0.2s ease;
}
.pre { overflow: auto; width:100%; height:100px; margin: auto; margin-bottom:16px; display: block; border: 5px solid #eee; background:#fdfdfd; color:#2980b9; font-size:13px; font-family: cursive; font-weight: 300; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: -moz-pre-wrap; white-space: pre-wrap; white-space: pre\9;
}
#tx{ height: 200px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<div class="wrapper"> <h1>Show Html demos with data uri</h1> <textarea id="tx" class="pre"> <!-- demo --> <div id="typeWriter"></div> <script type="text/javascript" rel="javascript"> /* * HTML example * <div id="typeWriter"></div> + https://codepen.io/gavra/pen/tEpzn */ var typeWriter = (function(){ 'use strict'; // set up text to print, each item in array is new line var aText = new Array( "This a sample data of demo,", "The demo include javascript code of <a href='https://codepen.io/gavra'>gavra</a>", "I include this in my tag ( i love this )", "Thanks for see this demo and sorry for my English." ), iSpeed = 100, // time delay of print out iIndex = 0, // start printing array at this posision iArrLength = aText[0].length, // the length of the text array iScrollAt = 20, // start scrolling up at this many lines iTextPos = 0, // initialise text position sContents = '', // initialise contents variable iRow; // initialise current row return{ run: function(){ sContents = ' '; iRow = Math.max(0, iIndex-iScrollAt); var destination = document.getElementById("typeWriter"); while ( iRow < iIndex ) { sContents += aText[iRow++] + '<br />'; } destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_"; if ( iTextPos++ == iArrLength ) { iTextPos = 0; iIndex++; if ( iIndex != aText.length ) { iArrLength = aText[iIndex].length; setTimeout("typeWriter.run()", 500); } } else { setTimeout("typeWriter.run()", iSpeed); } } }; })(); // run typewriter typeWriter.run(); </script> </textarea> <a href="#" id="c" class="btn">Convert</a> <pre id="p_uri" class="pre"></pre> <span class="preview"></span>
</div> <script src="js/index.js"></script>
</body>
</html>
Html demos with data uri - Script Codes CSS Codes
*,
*:after,
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* = scroll
----------------------------*/
::-webkit-scrollbar { width: 8px;
}
::-webkit-scrollbar { background:#ecf0f1;
}
::-webkit-scrollbar-thumb { background: #ddd;
}
/* = body
----------------------------*/
html,body{ position:relative; height:100%;
}
body{ background:#fff; background-size:cover; color:#777; overflow:auto; font-family: 'Oswald', 'sans-serif'; font-weight: 400;
}
.wrapper{ display: block; margin: 5px auto; width: 90%;
}
.btn{ margin:5px; color: #FFF; display: inline-block; background:#3498db; border: 1px solid #2980b9; padding:0.5em 1em; text-align: center; text-decoration:none; outline: none; white-space: nowrap; cursor: pointer; font-family: 'sans-serif'; font-weight: 300; font-size: 18px; border-radius: 2px; transition:all 0.2s ease;
}
.btn:hover{ border-color: #eee; background: #C0392B; color: #eee; transition:all 0.2s ease;
}
.pre { overflow: auto; width:100%; height:100px; margin: auto; margin-bottom:16px; display: block; border: 5px solid #eee; background:#fdfdfd; color:#2980b9; font-size:13px; font-family: cursive; font-weight: 300; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: -moz-pre-wrap; white-space: pre-wrap; white-space: pre\9;
}
#tx{ height: 200px;
}
Html demos with data uri - Script Codes JS Codes
var showDemos = (function(){ 'use strict'; return { run: function(){ this.events(); }, _qS: function(el){ return document.querySelector(el); }, enc: function(el){ return 'data:text/html;charset=utf-8,<body>' + encodeURIComponent(el.value); }, dec: function(el){ return decodeURIComponent( el.value.replace('data:text/html;charset=utf-8,','')); }, events: function(){ var self = this, tx = this._qS('#tx'), p_uri = this._qS('#p_uri'), convert = this._qS('#c'), preview = this._qS('.preview') ; convert.addEventListener('click',function(){ p_uri.innerHTML = self.enc(tx); preview.innerHTML = '<a href="'+self.enc(tx)+'" class="btn" target="blank">Preview</a>'+ '- Or -'+'<a href="'+self.enc(tx)+'" class="btn" download>Download</a>'; },false); tx.addEventListener('keydown',function(){ p_uri.innerHTML = ''; },false); } };
})();
showDemos.run();
Developer | Moncho Varela |
Username | nakome |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 4,086 Kb |
Views | 2,024 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Youtube videos | 3,592 Kb |
Another webSQL | 6,565 Kb |
Biru Css framework | 22,756 Kb |
Welcome | 6,076 Kb |
Responsive Gallery with Json data | 4,454 Kb |
Filter divs only Javascript | 2,733 Kb |
IndexedDB demo | 6,577 Kb |
How to make spanish tortilla | 3,133 Kb |
A Pen by Moncho Varela | 7,581 Kb |
SWEditor v0.2.0 | 7,467 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS read more toggle | Idered | 2,344 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!