Содержание

1 A Purely JavaScript font
2 How to animate an element"s font, border, and background color
3 Animation Example - Colors

A Purely JavaScript font

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript Image Font</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="Jared Daniel J. Smith"> <meta name="Keywords" content="javascript, dhtml, font, image, graphic, icon, fonts, dom, mozilla, ie, internet explorer, browser, client"> <meta name="Description" content="Pure JavaScript font solution: DHTML rendering text, using a font composed of images."> <style> IMG {

 vertical-align: top;

} .tinyimg {

 height: 1px;
 width: 1px;

} </style> <script language=JavaScript> ///////////////////////////////////////////////////////// // A fair amount of these techniques come from the // very useful site javascript.faqts.ru. Thanks to // the many programmers who make that a very friendly // resource. - jared smith at dctkc com, March 19, 2004 ///////////////////////////////////////////////////////// // used during ctrlV and shiftIns "paste" text var inserted = false; // chars outside the normal range of 32 through 126 var oddchars = new Array(186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222); ////////////////////////////////////////// // add a single letter using DOM methods function addLetter(unicode, divID, height) {

 src = unicode+".gif";
 // create the img tag
 itag = document.createElement("IMG");
 itag.src = src;
 // get the original img height/width
 h = parseInt(itag.height);
 w = parseInt(itag.width);
 // find out their ratio
 r = (w/h);
 // make the ratio match the new height
 height = parseInt(height);
 width = height * r;
 // q,p,y,g,;,, descending chars = more height
 switch (unicode) { 
   case 40: case 41: case 44: case 59: case 106:
   case 112: case 113: case 121: case 103:
   width = width * 1.2;
   height = 
   (height>110)              ? height + (h/3) :
   (height>100&&height<111)  ? height + (h/2.3) :
   (height>90&&height<101)   ? height + (h/3.6) :
   (height>80&&height<91)    ? height + (h/5) :
   (height>70&&height<81)    ? height + (h/6.1) :
   (height>60&&height<71)    ? height + (h/7) :
   (height>50&&height<61)    ? height + (h/8.1) :
   (height>40&&height<51)    ? height + (h/9.6) :
   (height>30&&height<41)    ? height + (h/11) :
   (height>20&&height<31)    ? height + (h/13) :
   (height>10&&height<21)    ? height + (h/16) :
   (height>5&&height<11)     ? height + (h/23) : 5;
 }
 // assign height and width
 itag.height=height;
 itag.width=width;
 //itag.style.vertical-align="top";
 window.document.getElementById(divID).appendChild(itag);

} ////////////////////////////////////////// // add a block of text, one letter at a time function addTextBlock(txt, divID, height) {

 for (i=0; i<txt.length; i++) {
   t = txt.substr(i,1);
   addLetter(t.charCodeAt(0), divID, height);
 }

} ////////////////////////////////////////// // if we used ctrlV or shift-Ins to paste text function checkInsert(val, divID, height) {

 if (inserted) {
   clearText(divID);
   addTextBlock(val, divID, height);
   inserted=false;
 }

} ////////////////////////////////////////// // main function to be called for text editing function editText(me, event, divID, height) {

 keyCode = event.keyCode;
 if (keyCode>=32&&keyCode<=126||keyCode==8) {
   if (trapEditActions(me, event, keyCode, divID, height)) {
     addLetter(handleShift(event, keyCode), divID, height);
   }
 }
 for (i=0; i<oddchars.length; i++) {
   if (keyCode==oddchars[i]) {
     addLetter(handleShift(event, keyCode), divID, height);
   }
 }
 window.status=keyCode+":"+String.fromCharCode(keyCode)+"shift: "+event.shiftKey;

} ////////////////////////////////////////// // ie and moz don"t agree on how to get cursor position in textfield function getCursorPos(textElement) {

 if (textElement.createTextRange) {
   //save off the current value to restore it later,
   var sOldText = textElement.value;
   //create a range object and save off it"s text
   var objRange = document.selection.createRange();
   var sOldRange = objRange.text;
   //set this string to a small string that will not normally be encountered
   var sWeirdString = "#%~";
   //insert the weirdstring where the cursor is at
   objRange.text = sOldRange + sWeirdString; 
   objRange.moveStart("character", (0 - sOldRange.length - sWeirdString.length));
   //save off the new string with the weirdstring in it
   var sNewText = textElement.value;
   //set the actual text value back to how it was
   objRange.text = sOldRange;
   //look through the new string we saved off and find the location of
   //the weirdstring that was inserted and return that value
   for (i=0; i <= sNewText.length; i++) {
     var sTemp = sNewText.substring(i, i + sWeirdString.length);
     if (sTemp == sWeirdString) {
       var cursorPos = (i - sOldRange.length);
       return cursorPos;
     }
   }
 } else if (textElement.setSelectionRange) {
   var len = textElement.selectionEnd;
 }
 return len;

} ////////////////////////////////////////// // handle or skip cursor movement and deletion keys function trapEditActions(me, event, keyCode, divID, height) {

 // start, end, length attributes of the selection text
 if (window.getSelection) {
   start = parseInt(me.selectionStart);
   end = parseInt(me.selectionEnd);
   len = end - start;
   txt = me.value.substr(start,len);
 } else {
   txt = document.selection.createRange().text;
   if (txt.length==0) {
     start = getCursorPos(me);
     end = start;
     len = 0;
   } else {
     start = me.value.indexOf(txt);
     len = txt.length;
     end = start + len;
   }
 }
 // handle deletion keys first
 if (keyCode==46||keyCode==8) { // backspace or delete
   if (keyCode==46) { // delete
     if (len==0) { // delete one char to the right
       newtext = me.value.substr(0,start) + me.value.substr(start+1);
     } else { // delete selection
       newtext = me.value.replace(new RegExp(txt, "g"),"");
     }
   } else { // backspace
     if (len==0) { // delete one char to the left
       newtext = me.value.substr(0,start-1) + me.value.substr(start);
     } else { // delete selection
       newtext = me.value.replace(new RegExp(txt, "g"),"");
     }
   }
   clearText(divID);
   addTextBlock(newtext, divID, height);
   return false;
 }
 // turn "inserted" on if CtrlV; and skip the v
 if ((event.ctrlKey&&keyCode==86)||(event.shiftKey&&keyCode==45)) {
   inserted = true;
   return false;
 }
 // skip ctrlC
 if (event.ctrlKey&&keyCode==67) {
   return false;
 }
 // skip all other ctrl keys
 if (event.ctrlKey) {
   return false;
 }
 // skip all arrow and cursor movement keys
 switch (keyCode) {
   case 33: case 34: case 35: case 36: case 37:
   case 38: case 39: case 40: case 45:
   return false;
 }
 // handle any other key possibilities
 if (len>0) { // we have selected some text...
   if (keyCode>=32||keyCode<=126) {
     newtext = me.value.replace(new RegExp(txt, "g"), String.fromCharCode(keyCode));
   }
   clearText(divID);
   addTextBlock(newtext, divID, height);
   return false;
 } else if (end!=me.value.length) { // cursor is not at end...
   if (keyCode>=32||keyCode<=126) {
     newtext = me.value.substr(0,start) + String.fromCharCode(keyCode) + me.value.substr(start);
   }
   clearText(divID);
   addTextBlock(newtext, divID, height);
   return false;
 }
 
 // if we get here, we did NOT get an editing action.
 return true;

} ////////////////////////////////////////// // replace the display ID with "" function clearText(divID) {

 window.document.getElementById(divID).innerHTML="";

} ////////////////////////////////////////// // most keys have double meanings depending on shift function handleShift(event, k) {

 if (!event.shiftKey) { //unshifted
   if (k>=65&&k<=90) { //lowercase letters
     k = k + 32;
   }
   switch (k) { // outside the normal range, unshifted
     case 186: return 59; case 187: return 61; case 188: return 44;
     case 189: return 45; case 190: return 46; case 191: return 47;
     case 192: return 96; case 219: return 91; case 220: return 92;
     case 221: return 93; case 222: return 39; default: return k;
   }
 } else { // number keys &tc, shifted
   switch (k) {
     case 48: return 41; case 49: return 33; case 50: return 64;
     case 51: return 35; case 52: return 36; case 53: return 37;
     case 54: return 94; case 55: return 38; case 56: return 42;
     case 57: return 40; case 186: return 58; case 187: return 43;
     case 188: return 60; case 189: return 95; case 190: return 62;
     case 191: return 63; case 192: return 126; case 219: return 123;
     case 220: return 124; case 221: return 125; case 222: return 34;
     default: return k;
   }
 }

} </script> </head> <body onLoad="document.getElementById("entryspot").focus();" bgcolor="#eeeeee">

JavaScript Image Font Demo

<form name="fontdemo"> Font Height (px): <input type="text" name="fontheight" value="75" size="2">
Enter text: <input type="text" size="50" id="entryspot" onKeyDown="editText(this, event, "viewit", document.forms.fontdemo.fontheight.value);" onKeyUp="checkInsert(this.value, "viewit", document.forms.fontdemo.fontheight.value);">
<textarea id="textspot" cols=50 rows=10></textarea>
<input type="button" onClick="addTextBlock(document.forms.fontdemo.textspot.value, "viewit", document.forms.fontdemo.fontheight.value);" value="render this textbox"> <input type="button" onClick="clearText("viewit");" value="clear display text"> </form>

A Purely JavaScript font

This script comes with 95 images, each named after the unicode value for the letter it contains. For example, the letter "a" is stored as a tiny GIF image called "97.gif". The images are each about 1.5k, all together about 130K. They are preloaded into this document so JavaScript can render them quickly. This program was written as part of the solution to match screen fonts with SATO printer fonts in a WYSIWYG fashion. The images are actual scans from a SATO CL408e barcode printer.

Cross Browser DHTML

No, this will not work for browsers under about v.6, but it renders well in the current IE and Mozilla both. I used the DOM method for creating the images in your document; this is the fastest way to render. InnerHTML is used only once; to clear the display.

Scaleable

Change the font height above, and you can see that the font scales well, for being a kludgy scan of an admittedly simple barcode font. Set the fontsize to 1000, you will see that it loads the image just as fast as if it were 10 pixels high. Still, the speed is not useful for text more than about 50 characters at a time, since DELETE and BACKSPACE actions redraw all text. Perhaps there is a more elegant way to handle these.

Enjoy!

Now have fun with that barcode printer. This code is a stub for all kinds of applications. With some optimization, it could be used for online layout and design of more complex text than this simple font. I think all that"s left is kerning.

      </source>

javascriptfont.zip( 62 k)</a>

How to animate an element"s font, border, and background color

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Animation Example - how to animate an element"s font, border, and background color</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

/

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

hd img {

  vertical-align:middle;

}

hd h1 {

  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

doc {

  margin:10px;

}

examples {

  margin:60px 40px;

}

examples li {

  margin-bottom:1em;

}

examples li a {

  color:#666;
  font:85% verdana;

}

demo {

  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

animation-demo-scroll #demo p {

  width:600px;

}

animation-demo-motion #demo {

  color:yellow;
  font-size:0;

}

animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {

  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

animation-demo-colors #demo {

  border:3px solid #c3c;

}

animation-demo-scroll #demo {

  width:400px;
  height:200px;
  overflow:auto;

}

animation-demo-colors #demo {

}

target {

  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var attributes = {
     color: { to: "#f00" },
     backgroundColor: { to:  "rgb(0, 255, 0)" },
     borderTopColor: { to: "#dcdcdc" },
     borderRightColor: { to: "dcdcdc" },
     borderBottomColor: { to: "dcdcdc" },
     borderLeftColor: { to: "dcdcdc" }
  };
  
  var anim = new YAHOO.util.ColorAnim("demo", attributes);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-colors">

Animation Example - Colors

This example demonstrates how to animate an element"s font, border, and background color.

Click anywhere to start animation.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

</body> </html>

      </source>

JavaScript DHTML/Ajax Layer

Содержание

A Purely JavaScript font

JavaScript Image Font Demo

A Purely JavaScript font

Cross Browser DHTML

Scaleable

Enjoy!

How to animate an element"s font, border, and background color

Animation Example - Colors

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты