3 <title>Dynamic Web 2.0 Button using jQuery</title>
5 <script type="text/javascript" src="jquery.js"></script>
6 <script type="text/javascript" src="jquery.corner.js"></script>
8 <script type="text/javascript">
12 var fontName = "Verdana";
15 function getFontImageUrl() {
16 return '/cgi-bin/spritext.cgi?format=png'
17 + '&fontname=' + fontName
18 + '&fontsize=' + fontSize;
21 function getFontImage() {
22 var newImg = new Image();
23 newImg.src = getFontImageUrl();
26 function getFontInfoAndUpdate() {
27 $.getJSON("/cgi-bin/spritext.cgi", { fontname: fontName, fontsize: fontSize, format: "json" }, function(json) {
29 updateButton($("#input").val());
35 $("#fontsize").change(function() {
36 fontSize = $("#fontsize").val();
38 getFontInfoAndUpdate();
41 // $("#button").corner("15px");
43 $("#input").keyup(function() {
44 updateButton($(this).val());
50 var LETTER_SPACING = 60;
51 var widthMap = {A:31,B:32,C:33,D:35,E:32,F:30,G:34,H:35,I:18,J:15,K:32,L:30,M:39,N:35,O:36,P:30,Q:35,R:34,S:31,T:30,U:34,V:31,W:43,X:31,Y:29,Z:31};
53 function getLetterWidth(letter, fontSize) {
54 return widthMap[letter.toUpperCase()] * 1.5;
57 function updateButton(text) {
58 var letters = $("#letters");
63 for (var i = 0; i < text.length; i++)
68 letters.append($(document.createElement('div'))
69 .css({float: 'left', width: fontSize * 0.5, height: fontSize})
74 // var className = 'Verdana60';
75 var glyphInfo = fontInfo['u' + letter.charCodeAt(0)];
76 // var xPos = -((letterUC.charCodeAt(0) - "A".charCodeAt(0)) * LETTER_SPACING);
78 // var lWidth = getLetterWidth(letter, 60);
82 letters.append($(document.createElement('div'))
84 width: glyphInfo.w, height: fontSize,
85 'background': (-glyphInfo.x) + 'px ' + (-glyphInfo.y) + 'px'
86 + ' url(' + getFontImageUrl() + ')'
88 'margin-left': marginLeft
91 btnWidth += glyphInfo.w + 1;
96 // $("#button").width(btnWidth);
101 <style type="text/css">
106 background: transparent no-repeat;
109 #letters .Verdanavds60 {
110 background: url(http://localhost/cgi-bin/spritext.cgi?fontname=Verdana&fontsize=60);
126 Font Size: <input type="text" id="fontsize" name="fontsize" value="12" />
129 Floor text: <input type="text" id="input" value="Sh"></input>
134 <div id="letters"></div>