: I need this Font Picker for my project but I'm not able to get it working. I am trying to create a "FontPicker" just like a normal "color picker". I have see many websites implementing "font

Posted in: #Html #Javascript #Jquery #Php

I am trying to create a "FontPicker" just like a normal "color picker". I have see many websites implementing "font picker" please check out mklogo.com for example, where the fonts are categorised and gives an option for an user to choose any of them from the list....

In mklogo they have used three files 'index.html' , 'FontPicker.JS' and 'fonts.html'

Their Fontpicker.js contains

FontPicker_targetInput = null;
function FontPicker_writeDiv() {
document.writeln("<DIV ID="fontPickerDiv" STYLE="position:absolute;visibility:hidden;"> </DIV>");
}

function FontPicker_show(anchorname) {
this.showPopup(anchorname);
}

function FontPicker_pickFont(font,win) {
win.close();
pickFont(font);
}

// A Default "pickFont" function to accept the font passed back from popup.
// User can over-ride this with their own function.
function pickFont(font) {
if (FontPicker_targetInput==null) {
alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickFont' function to handle the picked font!");
return;
}
FontPicker_targetInput.value = font;
}
// This function is the easiest way to popup the window, select a font, and
// have the value populate a form field, which is what most people want to do.
function FontPicker_select(inputobj,linkname) {
if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") {
alert("fontpicker.select: Input object passed is not a valid form input object");
window.FontPicker_targetInput=null;
return;
}
window.FontPicker_targetInput = inputobj;
this.show(linkname);
}

// This function runs when you move your mouse over a font block, if you have a newer browser
function FontPicker_highlightColor(c) {
var thedoc = (arguments.length>1)?arguments[1]:window.document;
var d = thedoc.getElementById("fontPickerSelectedColor");
d.style.backgroundColor = c;
d = thedoc.getElementById("fontPickerSelectedColorValue");
d.innerHTML = c;
}

function FontPicker() {
var windowMode = false;
// Create a new PopupWindow object
if (arguments.length==0) {
var divname = "fontPickerDiv";
}
else if (arguments[0] == "window") {
var divname = '';
windowMode = true;
}
else {
var divname = arguments[0];
}

if (divname != "") {
var fp = new PopupWindow(divname);
}
else {
var fp = new PopupWindow();
fp.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars,resizable,alwaysRaised,dependent,titlebar=no";
//fp.setSize(500,500);
}

// Object variables
fp.currentValue = "#FFFFFF";

// Method Mappings
fp.writeDiv = FontPicker_writeDiv;
fp.highlightColor = FontPicker_highlightColor;
fp.show = FontPicker_show;
fp.select = FontPicker_select;

fp.setUrl("/fonts.html");
fp.offsetY = 25;
fp.autoHide();
return fp;
}

Their Index.html Contains

<html>
<head>
<title>mklogo - imagemagick logo generator and composite tool</title>
<link rel="stylesheet" href="http://mklogo.com/style.css" type="text/css">
<META NAME="Description" CONTENT="Converts text to an image, allowing font selection, effects, color, rotation, etc.">
</head>
<body>
<script language=javascript>
function rollLogo() {
document.getElementById('logo').src='http://mklogo.com/logo' + (1+Math.floor(Math.random()*6)) + '.png';
}
</script>
<img alt="mklogo" id=logo align=center src="http://mklogo.com/logo2.png" onclick="rollLogo()">
<p>

<script LANGUAGE="Javascript" SRC="http://mklogo.com/ColorPicker2.js"></script>
<script LANGUAGE="Javascript" SRC="FontPicker.js"></script>

<script language=javascript>
var cp = new ColorPicker();
var fp = new FontPicker('window');

function pickFont(font) {
document.getElementById('fimg').src='http://mklogo.com/img/font/' + font + '.png';
document.getElementById('fid').value=font;
}

if (document.getElementById('fid').value) {
pickfont(document.getElementById('fid').value);
}
</script>

<form action="gen.cgi" method=post>

<input type=hidden name=fid id=fid value="">
<table>

<tr>
<td>Text:</td>
<td><input name=text value="Logo Text">
</tr>
<tr valign=center>
<td style="padding-top:5px">Font:</td>

<td><img id=fimg src="http://mklogo.com/img/font/Helvetica.png" border=0>
</td>
<td>
<A HREF="#" onClick="fp.show('fpick');return false;" NAME="fpick" ID="fpick" class=pick>Pick</a>
</td>
</tr>
<tr>
<td>Size:</td>
<td><input name=size value="40" size=10> pt
</tr>

</table>

<p>
<input type=submit name=go value="Generate Image" style="display:inline;">

</p>

</form>

<SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>

<p style="border-top:1px dotted black; padding-top: 10px;">

</body>
</html>

and their fonts.html contains

<head>
<title>mklogo - select font</title>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>

<body>

<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Favorites"></form>
<div id="Favorites">

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1549,window); return false;" STYLE="text-decoration:none;"><img alt="Blade Runner Movie Font " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1549.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1265,window); return false;" STYLE="text-decoration:none;"><img alt="Candice " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1265.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1337,window); return false;" STYLE="text-decoration:none;"><img alt="Copperplate Gothic Bold " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1337.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1363,window); return false;" STYLE="text-decoration:none;"><img alt="Engravers MT Bold" style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1363.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1383,window); return false;" STYLE="text-decoration:none;"><img alt="Franklin Gothic Heavy " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1383.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1404,window); return false;" STYLE="text-decoration:none;"><img alt="Impact " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1404.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1417,window); return false;" STYLE="text-decoration:none;"><img alt="Jokerman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1417.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1429,window); return false;" STYLE="text-decoration:none;"><img alt="Leelawadee Bold" style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1429.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1550,window); return false;" STYLE="text-decoration:none;"><img alt="Loki Cola " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1550.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1440,window); return false;" STYLE="text-decoration:none;"><img alt="Maiandra GD Demi-Bold" style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1440.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1447,window); return false;" STYLE="text-decoration:none;"><img alt="Matisse ITC " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1447.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1460,window); return false;" STYLE="text-decoration:none;"><img alt="MisterEarl BT " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1460.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1477,window); return false;" STYLE="text-decoration:none;"><img alt="OCR A Extended " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1477.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1495,window); return false;" STYLE="text-decoration:none;"><img alt="Pump Demi BoldET " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1495.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1501,window); return false;" STYLE="text-decoration:none;"><img alt="Rockwell Extra Bold " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1501.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(456,window); return false;" STYLE="text-decoration:none;"><img alt="Shanghai " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/456.png"></a>

<A HREF="#" onClick="window.opener.FontPicker_pickFont(1541,window); return false;" STYLE="text-decoration:none;"><img alt="VictorianET " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="/img/font/1541.png"></a>

</div>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Print"></form>
<div id="Print">

</div>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Roman"></form>
<div id="Roman">
</div>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Sans-Serif"></form>
<div id="Sans-Serif">
</div>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Scripty"></form>
<div id="Scripty">
</div>

<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Uncategorized"></form>
<div id="Uncategorized">

</body>
</html></i>

I also mailed the admin of mklogo to ask him how can we use the font picker which is very important for my project. He replied back saying that "He Can Not Teach That,and he is busy running his business and not to mail him again"