в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:48:30Z

1 версия

Новая страница

* [[JavaScript DHTML/Ajax Layer/3D | 3D]]
* [[JavaScript DHTML/Ajax Layer/Accordion Panel | Accordion Panel]]
* [[JavaScript DHTML/Ajax Layer/Ajax Library | Ajax Library]]
* [[JavaScript DHTML/Ajax Layer/Animation Action | Animation Action]]
* [[JavaScript DHTML/Ajax Layer/Animation Attributes | Animation Attributes]]
* [[JavaScript DHTML/Ajax Layer/Animation Bounse | Animation Bounse]]
* [[JavaScript DHTML/Ajax Layer/Animation Color | Animation Color]]
* [[JavaScript DHTML/Ajax Layer/Animation Control Point | Animation Control Point]]
* [[JavaScript DHTML/Ajax Layer/Animation Path | Animation Path]]
* [[JavaScript DHTML/Ajax Layer/Animation Position | Animation Position]]
* [[JavaScript DHTML/Ajax Layer/Animation Scroll | Animation Scroll]]
* [[JavaScript DHTML/Ajax Layer/Animation Size | Animation Size]]
* [[JavaScript DHTML/Ajax Layer/AutoComplete Widget | AutoComplete Widget]]
* [[JavaScript DHTML/Ajax Layer/Banner | Banner]]
* [[JavaScript DHTML/Ajax Layer/Bezier | Bezier]]
* [[JavaScript DHTML/Ajax Layer/Border | Border]]
* [[JavaScript DHTML/Ajax Layer/Button | Button]]
* [[JavaScript DHTML/Ajax Layer/CheckBox | CheckBox]]
* [[JavaScript DHTML/Ajax Layer/DOM Utilities | DOM Utilities]]
* [[JavaScript DHTML/Ajax Layer/Data | Data]]
* [[JavaScript DHTML/Ajax Layer/Dock | Dock]]
* [[JavaScript DHTML/Ajax Layer/Drag Action | Drag Action]]
* [[JavaScript DHTML/Ajax Layer/Drag Constrain | Drag Constrain]]
* [[JavaScript DHTML/Ajax Layer/Drag Draw | Drag Draw]]
* [[JavaScript DHTML/Ajax Layer/Drag Effects | Drag Effects]]
* [[JavaScript DHTML/Ajax Layer/Draggable Layer | Draggable Layer]]
* [[JavaScript DHTML/Ajax Layer/Draggable List | Draggable List]]
* [[JavaScript DHTML/Ajax Layer/Fade | Fade]]
* [[JavaScript DHTML/Ajax Layer/Float | Float]]
* [[JavaScript DHTML/Ajax Layer/Graph | Graph]]
* [[JavaScript DHTML/Ajax Layer/HyperLink | HyperLink]]
* [[JavaScript DHTML/Ajax Layer/Image Clip | Image Clip]]
* [[JavaScript DHTML/Ajax Layer/Image Drag Drop | Image Drag Drop]]
* [[JavaScript DHTML/Ajax Layer/Image ListBox | Image ListBox]]
* [[JavaScript DHTML/Ajax Layer/Image Load | Image Load]]
* [[JavaScript DHTML/Ajax Layer/Image Rollover | Image Rollover]]
* [[JavaScript DHTML/Ajax Layer/Image Rotate | Image Rotate]]
* [[JavaScript DHTML/Ajax Layer/In Place Editor | In Place Editor]]
* [[JavaScript DHTML/Ajax Layer/Key Listener | Key Listener]]
* [[JavaScript DHTML/Ajax Layer/Knob | Knob]]
* [[JavaScript DHTML/Ajax Layer/Label | Label]]
* [[JavaScript DHTML/Ajax Layer/Layer Anchor | Layer Anchor]]
* [[JavaScript DHTML/Ajax Layer/Layer Container | Layer Container]]
* [[JavaScript DHTML/Ajax Layer/Layer Creation | Layer Creation]]
* [[JavaScript DHTML/Ajax Layer/Layer Destroy | Layer Destroy]]
* [[JavaScript DHTML/Ajax Layer/Layer Events | Layer Events]]
* [[JavaScript DHTML/Ajax Layer/Layer Focus | Layer Focus]]
* [[JavaScript DHTML/Ajax Layer/Layer Group | Layer Group]]
* [[JavaScript DHTML/Ajax Layer/Layer Limits | Layer Limits]]
* [[JavaScript DHTML/Ajax Layer/Layer Position | Layer Position]]
* [[JavaScript DHTML/Ajax Layer/Layer Resize Move | Layer Resize Move]]
* [[JavaScript DHTML/Ajax Layer/List | List]]
* [[JavaScript DHTML/Ajax Layer/Marquee | Marquee]]
* [[JavaScript DHTML/Ajax Layer/Mouse | Mouse]]
* [[JavaScript DHTML/Ajax Layer/Nested Layer | Nested Layer]]
* [[JavaScript DHTML/Ajax Layer/Panel | Panel]]
* [[JavaScript DHTML/Ajax Layer/Popup ToolTip | Popup ToolTip]]
* [[JavaScript DHTML/Ajax Layer/Progress Bar | Progress Bar]]
* [[JavaScript DHTML/Ajax Layer/Progress Dialog | Progress Dialog]]
* [[JavaScript DHTML/Ajax Layer/RSS | RSS]]
* [[JavaScript DHTML/Ajax Layer/Search Engine | Search Engine]]
* [[JavaScript DHTML/Ajax Layer/Text Animation | Text Animation]]
* [[JavaScript DHTML/Ajax Layer/Text Effects | Text Effects]]
* [[JavaScript DHTML/Ajax Layer/Timer Event | Timer Event]]
* [[JavaScript DHTML/Ajax Layer/Transaction | Transaction]]
* [[JavaScript DHTML/Ajax Layer/Window Dialog | Window Dialog]]
* [[JavaScript DHTML/Ajax Layer/XML | XML]]
* [[JavaScript DHTML/Ajax Layer/XMLHttpRequest | XMLHttpRequest]]

==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">
<h3>JavaScript Image Font Demo</h3>
<div id="viewit" style="height:100;"><br></div>
<br><BR><BR><BR>
<form name="fontdemo">
Font Height (px):
<input type="text" name="fontheight" value="75" size="2">
<br>
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);">
<br>
<textarea id="textspot" cols=50 rows=10></textarea>
<br>
<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>
<br>
<hr>
<h3>A Purely JavaScript font</h3>
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.
<h3>Cross Browser DHTML</h3>
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.
<h3>Scaleable</h3>
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.
<h3>Enjoy!</h3>
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.
<br><br>

<img src="100.gif" class=""> <img src="101.gif" class=""> <img src="102.gif" class="">
<img src="103.gif" class=""> <img src="104.gif" class=""> <img src="105.gif" class="">
<img src="106.gif" class=""> <img src="107.gif" class=""> <img src="108.gif" class="">
<img src="109.gif" class=""> <img src="110.gif" class=""> <img src="110.gif" class="">
<img src="112.gif" class=""> <img src="113.gif" class=""> <img src="114.gif" class="">
<img src="115.gif" class=""> <img src="116.gif" class=""> <img src="117.gif" class="">
<img src="118.gif" class=""> <img src="119.gif" class=""> <img src="120.gif" class="">
<img src="121.gif" class=""> <img src="122.gif" class=""> <img src="123.gif" class="">
<img src="124.gif" class=""> <img src="125.gif" class=""> <img src="126.gif" class="">
<img src="32.gif" class=""> <img src="33.gif" class=""> <img src="34.gif" class="">
<img src="35.gif" class=""> <img src="36.gif" class=""> <img src="37.gif" class="">
<img src="38.gif" class=""> <img src="39.gif" class=""> <img src="40.gif" class="">
<img src="41.gif" class=""> <img src="42.gif" class=""> <img src="43.gif" class="">
<img src="44.gif" class=""> <img src="45.gif" class=""> <img src="46.gif" class="">
<img src="47.gif" class=""> <img src="48.gif" class=""> <img src="49.gif" class="">
<img src="50.gif" class=""> <img src="51.gif" class=""> <img src="52.gif" class="">
<img src="53.gif" class=""> <img src="54.gif" class=""> <img src="55.gif" class="">
<img src="56.gif" class=""> <img src="57.gif" class=""> <img src="58.gif" class="">
<img src="59.gif" class=""> <img src="60.gif" class=""> <img src="61.gif" class="">
<img src="62.gif" class=""> <img src="63.gif" class=""> <img src="64.gif" class="">
<img src="65.gif" class=""> <img src="66.gif" class=""> <img src="67.gif" class="">
<img src="68.gif" class=""> <img src="69.gif" class=""> <img src="70.gif" class="">
<img src="71.gif" class=""> <img src="72.gif" class=""> <img src="73.gif" class="">
<img src="74.gif" class=""> <img src="75.gif" class=""> <img src="76.gif" class="">
<img src="77.gif" class=""> <img src="78.gif" class=""> <img src="79.gif" class="">
<img src="80.gif" class=""> <img src="81.gif" class=""> <img src="82.gif" class="">
<img src="83.gif" class=""> <img src="84.gif" class=""> <img src="85.gif" class="">
<img src="86.gif" class=""> <img src="87.gif" class=""> <img src="88.gif" class="">
<img src="89.gif" class=""> <img src="90.gif" class=""> <img src="91.gif" class="">
<img src="92.gif" class=""> <img src="93.gif" class=""> <img src="94.gif" class="">
<img src="95.gif" class=""> <img src="96.gif" class=""> <img src="97.gif" class="">
<img src="98.gif" class=""> <img src="99.gif" class="">
</body>
</html>

</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">
<div id="doc">
<h1>Animation Example - Colors</h1>
<p>This example demonstrates how to animate an element"s font, border, and background color.</p>
<p>Click anywhere to start animation.</p>
<div id="demo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div>
</div>
</body>
</html>

</source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>

← Предыдущая	Версия 09:58, 26 мая 2010
(нет различий)

JavaScript DHTML/Ajax Layer - История изменений

в 09:58, 26 мая 2010

Admin: 1 версия