Simple Notepad Demo (Save/Import Files as well)
1 post
Page 1 of 1
Screenshot:
First goal is for cross platform compatibility with a good looking UI. So I went with JQuery Mobile so the UI is appropriate for mobile users as well. Second content box/div of JQuery Mobile had to be fixed to fit the users height of the page. Third was navigation being able to import files locally on the users computer without a server, and save the same way. A little CSS to have the textbox fill the area and then BAM! A simple notepad!
This notepad will also allow you to use the tab button for indentations as well. So go through the code, experiment, and have fun.
Full Code:
How This Works!First goal is for cross platform compatibility with a good looking UI. So I went with JQuery Mobile so the UI is appropriate for mobile users as well. Second content box/div of JQuery Mobile had to be fixed to fit the users height of the page. Third was navigation being able to import files locally on the users computer without a server, and save the same way. A little CSS to have the textbox fill the area and then BAM! A simple notepad!
This notepad will also allow you to use the tab button for indentations as well. So go through the code, experiment, and have fun.
Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Simple Notepad Demo</title>
<meta name='Description' content="A simple web based notepad demo.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta name='Keywords' content='simple, web, based, notepad, demo'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style type="text/css">
body {
padding:0px;
margin:0px;}
textarea#notepad, textarea#notepad:focus {
display:block;
margin:0px;
padding:0px;
width:100%;
height:100%;
border:0px;
font-family:monospace;
line-height:1;
min-height:1.4em;
line-height:1.4em;
font-size:1em;
border-radius:0px;
resize:none;}
</style>
<script type="text/javascript">
$(function() {
var fixgeometry = function() {
/* Some orientation changes leave the scroll position at something
* that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(document).ready(function() {
$(window).bind("orientationchange resize pageshow", fixgeometry);
});
// Using the <TAB>
$('textarea.tab').keydown(function(e) {
if(e.keyCode == 9) {
var start = $(this).get(0).selectionStart;
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
return false;}
});
// Using Spaces
$('textarea.space').keydown(function(e) {
if(e.keyCode == 9) {
var start = $(this).get(0).selectionStart;
$(this).val($(this).val().substring(0, start) + " " + $(this).val().substring($(this).get(0).selectionEnd));
$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;
return false;}
});
$('a#cleardoc').click(ClearDoc);
$('a#restartapp').click(RestartApp);
// Clear Doc
function ClearDoc() {
$("textarea#notepad").val("");
$("[ID$=preview]").html($('#notepad').val());}
// Restarts The Application
function RestartApp() {
location.reload(true);
$("[ID$=preview]").html($('#notepad').val());}
});
// Save Doc as HTML File
function saveTextAsFile() {
var textToWrite = document.getElementById("notepad").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "myfile.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();}
function destroyClickedElement(event) {
document.body.removeChild(event.target);}
// Load File into Editor
function loadfile(input){
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('notepad').value = e.target.result;
}
reader.readAsText(input.files[0]);}
</script>
<head>
<body>
<div data-role='page'>
<div id="menupanel" data-role="panel" data-position="right" data-display="overlay">
<ul ui="mainmenu" data-role="listview">
<li data-icon="false" class="ui-disabled" style="display:none;"><input type="file" onchange="loadfile(this)"></li>
<li data-icon="false"><input type="file" onchange="loadfile(this)"></li>
<li data-icon="false"><a href="#my-header" id='cleardoc'>Clear</a></li>
<li data-icon="false"><a href="#my-header" id='restartapp'>Restart</a></li>
<li data-icon="false"><a href="#my-header" onclick='saveTextAsFile()'>Save/Download</a></li>
<li data-icon="false"><a href="#my-header" data-rel="close">Close panel</a></li>
</ul>
</div><!-- /panel -->
<div class='header' id="head1" data-role='header' data-theme="c">
<h1>Simple Notepad Demo</h1>
<a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
</div>
<div class='content' data-role='content'>
<textarea id="notepad" class="space"></textarea>
</div>
</div>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023