SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Resource

Ransom Note Formatting

Categories...
Client User Group
HTML, CSS and XML, Site Design, Write Once!
Language
JavaScript
Product
IE3, IE4, NS3, NS4
Task
Cross-Browser DHTML, HTML Enhancement
Technology
ECMA-262

Sponsored Links
Developer's Paradise : Inside Technique :
Ransom Note Formatting
Submission by SiteExperts Staff

Go to the resource:
Ransom Note Formatting
Add to Assistant

Short Description
A new javascript method Inspired by the original Macintosh Ransom Note Font.

Long Description
Extend the built-in JavaScript String object in this article inspired by a font from the original Macintosh. See how to add a ransom note text formatting method.

Author
Scott Isaacs
Submission URL
http://www.SiteExperts.com/tips/functions/ts10/page1.asp
Submission Date
Jun 9,1998
Related To
Inside Techniques
 

Discussion and Rate this Resource
Overall Rating: 4.5

mgrayson on Aug 17, 1999 at 7:58:37 AMRating: 4
Clever. Adding a mouseOver to additional scramble the text would make it a true Net ransom note.
a_sokolov on Aug 17, 1999 at 6:15:40 AMRating: 5
All great things are pretty simple! Add animation and a bit of color - and you'll look at it as a rabbit at boa. 
<!------ Try with animation ----------->
<body bgcolor=white>
<P id=a>Create randomly formatted HTML! </p>

<script language="JavaScript1.2">

var instr=document.all.a.innerText;
n=instr.length;
aaa=new Array(); 
for(var i=0;i<n;i++) { var cc=instr.substring(i,i+1);aaa[i]=cc+cc;} 

function fontattr(str,fam,color,size)
{
 var family='';
 switch(fam)
 {
  case 1: family='Arial'; break;
  case 2: family='Courier'; break;
  default: family='Times'; break;
 }
 return '<font face="'+family+'" size="'+size+'" color="'+color+'">'+str+'</font>';
}
function mutate(k)
{
 var c0=aaa[k].substring(0,1); if(c0==' ') return;
 var c=c0;
 var r=Math.random();
 if(r>0.8) 
 {// change position
  r=Math.random(); 
  if(r < 0.5) c=c.sub(); else c=c.sup();
 }
  r=Math.random(); if(r < 0.4) c=c.bold();
  r=Math.random(); if(r<0.3) c=c.italics();
  var sz=Math.round(2+4*Math.random());
  var fa=Math.round(3*Math.random());
  var cr=16*Math.round(4+10*Math.random());
  var cg=16*Math.round(4+10*Math.random());
  var cb=16*Math.round(4+10*Math.random());
  var co=cr.toString(16)+cg.toString(16)+cb.toString(16);
  c=fontattr(c,fa,co,sz);
  aaa[k]=c0+c;
}
function ani()
{
 var l=Math.round((n-1)*Math.random());
 mutate(l); var outstr='';
 for(var i=0;i<n;i++) outstr+=aaa[i].substring(1);
 document.all.a.innerHTML=outstr;
 setTimeout('ani()',50);
}
ani();
</script>
</body>
<!-- yours, A.B.C -->

To rate and comment on a resource, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password

Copyright © 1997-2008 InsideDHTML.com, LLC. All rights reserved.