Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am trying to create a "FontPicker" just like a normal "color picker". I have see many websites implementing "font picker" please check out http://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"

share|improve this question
    
I think your only option is to understand how it works and write your own code to do the same thing. –  paulmorriss Feb 16 '12 at 11:56
    
I've voted to close this as there's no real question being asked here, just "I need this to work" and a bunch of code from someone else's website. If you want to develop a web service, then you need to learn the server-side and client-side programming you need for it. Once you can read/write JavaScript and PHP, then you can attempt the project and post questions on StackOverflow when you get stuck. But simply copying code that you can't understand and asking someone to make it work for you is a bit unreasonable IMO. –  Lèse majesté Feb 16 '12 at 12:28
    
This is not so much a question but you asking the community to do your work for you. Please try to get the code working on your own and if you have errors come back to the community to ask for help with those specific errors. Also, the appropriate site for asking code question is Stackoverflow.com. I hope this helps you go in the right direction. –  RandomBen Feb 16 '12 at 12:31
    
Lèse majesté 1 and RandomBen i have not copied code from any website... if you people can not answer please dont even speak about that... who told i dont know about php or javascripts.. this is just a doubt ..... –  sri Feb 16 '12 at 13:49
    
you people could not answer the question.. so u have closed the topic only??? wow what a clever guyzz.z. –  sri Feb 16 '12 at 14:27
add comment

closed as off topic by paulmorriss, Lèse majesté, John Conde Feb 16 '12 at 12:29

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.