Show text Word by Word Animation

HTML

<div id="msg"> </div>

Javascript


 var showText = function (target, message, index, interval) {  
  var indexSpace = message.indexOf(" ",index);  
  if (index <= message.length && indexSpace!=-1) { 
    var str = message.substring(index,indexSpace);
    $(target).append(str+" "); 
    index = indexSpace+1;
    setTimeout(function () { 
      showText(target, message, index, interval); 
    }, interval); 
  } 
}
    
$(function () { 
  var para = "Lorem Ipsum is simply dummy text";
  showText("#msg", para, 0, 100);  
}); 

Demo Fiddle

Advertisements

Find Pangram in JS

Pangram is a sentence containing every letter of the alphabet. A simple try in js to find Pangram. DEMO

var i, alphabets = "abcdefghijklmnopqrstuvwxyz";

function isPangramFun() {
    var isPangram = true;
    var input = document.getElementById("inputTxt").value;
    for (i = 0; i < 26; i++) {
        if (input.toLowerCase().indexOf(alphabets[i]) == -1) {
            isPangram = false;
            break;
        }
    }
    alert(isPangram ? "Pangram" : "Not Pangram");
}

Placing Items on a Circle

It can be quite challenging to place items on a circle, But with some help from maths we can 🙂 … DEMO

var radius = 200;
var fields = $('.field'), container = $('#container'),
    width = container.width(), height = container.height(),
    angle = 0, step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
    var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
    if (window.console) {
        console.log($(this).text(), x, y);
    }
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});