Explore the logic behind small WEB APPLICATIONS: javascript tutorials

JavaScript WYSIWYG

A simple WYSIWYG

Cool yet Simple

JAVASCRIPT FILE

function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}

HTML FILE

<body onLoad="iFrameOn();">
<h2>Cool yet Simple</h2>
<form action="my_parse_file.php" name="myform" id="myform" method="post">

<p>Text goes here<br>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>

<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>

</p>
<br />
</form>
</body>

JavaScript digital clock

JAVASCRIPT,CSS DIGITAL CLOCK

Working demo:

Javascript CSS Digital Clock

This looks cool yet very easy to code.
Here comes the magical code that does this

<h2>Javascript CSS Digital Clock </h2>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime() { var currentTime = new Date();
var suf = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h == 0) { h = 12; }
else if (h > 12)
{ h = h - 12; suf="PM"; }
if (h < 10) { h = "0" + h; }
if (m < 10) { m = "0" + m; }
if (s < 10) { s = "0" + s; }
var myClock = document.getElementById('clockDisplay');
myClock.innerHTML = h + ":" + m + ":" + s + " " + suf; }
renderTime();
</script>

Textarea field counting

TEXTAREA FIELD COUNTING...

This is a pretty useful yet easy to code :)

Working Demo:

Textarea counter
Letters remaining-

For this you will require a single html file with the following script.

<html>
<head>
<title>Textarea counter</title>
<script type="text/javascript">
function count(txtid){
var limit = 150;
var current = document.getElementById(txtid).value;
if(current.length <= limit){

document.getElementById("stat").innerHTML = limit - current.length;
}
else{
alert("Dude max limit of letters reached");

}
}
</script>

</head>

<body>
<textarea id="txt" onkeydown="count(id)" onkeyup="count(id)"></textarea><br>
Letters remaining-
<span id="stat"></span>
</body>

</html>

Saturday, 23 March 2013

JavaScript WYSIWYG

Cool yet Simple

JavaScript digital clock

Javascript CSS Digital Clock

Textarea field counting