JavaScript Typing Effect

Well, I was kind of out-of-subject, so I thought of blogging on a simple, damn simple JavaScript program which shows up a typing effect.

After coding it, I just looked up some other methods of doing it. But, all of them took more than twenty lines of code. Mine takes up a measly 6-10 lines of code.

The Program uses a simple timing function, with a variable which is incremented every time the function is called. A function is timed and the timing is placed inside the same function, so that it gets called consecutively.

Let me show you how –

<html>
<head>
<title>Typing Effect - by Zillion</title>
<script type='text/javascript'>
var index = 0;
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, nulla at tempus tristique, nisl leo molestie est, ut vestibulum mauris mauris a odio. Sed at massa vitae ipsum venenatis porta. Integer iaculis pretium tempus. Donec viverra sollicitudin velit non gravida. Phasellus sit amet tortor odio. Vivamus lectus nisl, suscipit porttitor bibendum ut, tristique quis dui. Vestibulum non eros leo. Maecenas tincidunt semper turpis, a tristique purus pretium sit amet. Praesent nec neque tortor.Donec suscipit tristique ante quis molestie. Phasellus ac lacus non felis faucibus dictum vitae ac ipsum. Sed pharetra nulla sodales nulla porta imperdiet. Quisque pretium hendrerit laoreet.';
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
// The time taken for each character here is 100ms. You can change it if you want.
}
</script>
</head>
<body onload='type()'>
<!-- And here, you create the container in which you display the typed text -->
<div id='screen'></div>
</body>
</html>

I also found out that this could be used to show HTML being typed out. Try this out with text='<html><h1>This typing effect is just great.</h1></html>’ or any other HTML code. This works with HTML and the browser does not show the executed code, because the browser tries to interpret HTML as one block, as a whole. But since this HTML code snippet is just added character-by-character, the code does not get executed.

Advertisements

Facebook’s new Picture viewer

<post>

Facebook’s picture viewer got a new makeover yet again, with a striking back look (black was prevalent in the last-to-last picture viewer too). The comments section was shifted to the right along with the ads.

The Good : It has become sleeker, loads faster and has brought the comments section to the top, just like Google+’s picture viewer. Some details like a ‘Like’ button, a ‘Share’ button and ‘Wall Photos’ and of course, the ‘Previous’ and ‘Next’ button  come up only when the user hovers over the picture, thus making it take up less space. The ads have also come up to the top. The user does not need to scroll down in order to Comment or Share.

The Bad : The photo has become smaller as compared to the previous photo viewer. Since the photo and comments come side-by-side, the photo does not get enough of emphasis. The picture viewer has not been able to give the photo the place it should get the way Google+ has done it.

Recommendations : The opacity could be removed from the back. The comments section should be given less priority than the picture. It could show up only when the user hovers over the picture, or it could be given a hiding functionality. The Share feature could get more space, it could be made up into a button. When hidden, random comments could show up somewhere.

Facebook's new Picture Viewer
Facebook's new Picture Viewer

</post>

An algebraic program – x^2 + (a+b)x + ab

<post>

Splitting the middle term in such an algebraic expression could be a difficult task while dealing with large numbers.

For example,splitting the middle term in the expression x^2 + 200x + 22400 will not be easy. The task is to find two numbers whose sum is 200 and product is 22400 (the numbers are 140 and 160).

To solve such a problem, I wrote some JavaScript.

Check out the program here – middle term.html.

Enter the sum and product of the two numbers (like ‘200’ and ‘22400’) and there you go!

The program takes the sum and product as two variables, say a and b respectively.

var a = document.getElementById(‘a’).value;
var b = document.getElementById(‘b’).value;

Then it performs a loop taking a variable i=0 initially keeping it smaller than the sum (since both the numbers sum up to a). Then It takes another variable which is equal to a-i. Now we have two variables which sum up to a.

Now it performs an if statement which finds out if the numbers multiply to b. If it is so, then the program terminates the loop and displays the result. If it does not, it continues till i is equal to a.

var i;
for (i=0; i {
var j = a – i;
if (i+j==a && i*j==b)
{
document.getElementById(‘myDiv’).innerHTML += ‘Possible for : ‘ + i + ‘ & ‘ + j + ‘<br/>’;
break;
}
else
{
document.getElementById(‘myDiv’).innerHTML += ‘Not possible for : ‘ + i + ‘ & ‘ + j + ‘<br/>’;
}
}
}

P.S.: Numbers beyond 10000000 are not allowed. If it was, such large numbers could make the program unresponsive.


</post>