1. Howdy! Welcome to our community of more than 100.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net

Ajax Help

Discussion in 'Webdesign / HTML' started by randomspce, Apr 5, 2012.

  1. randomspce

    randomspce New Member

    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hello Experts,

    I am a newbie and I am trying to create Ajax + PHP program .. The idea is that the user will type in some text (in this example "Test"), select a font and a size, press the "Try it" button, and an image will appear (replacing one that was there before) with a version of that text rendered using that font.

    The list of fonts needs to be created dynamically, meaning it's not hard-coded anywhere.PHP script on separate file can call convert -list font and parse out all the font names (the ones following "Font:"). It's up to you whether you create a JSON variable from the result (new way) or create HTML in your PHP (old way).

    This is my code
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="generate.js"></script>
    </head>
    <body>


    <div>
    <textarea id="userInput" rows="4" cols="50"></textarea><br /><br />
    <select name="fonts" id="fontPicker">
    <option value="Arial,Arial,Helvetica,sans-serif">Arial,Arial,Helvetica,sans-serif</option><option value="Arial Black,Arial Black,Gadget,sans-serif">Arial Black,Arial Black,Gadget,sans-serif</option><option value="Comic Sans MS,Comic Sans MS,cursive">Comic Sans MS,Comic Sans MS,cursive</option><option value="Courier New,Courier New,Courier,monospace">Courier New,Courier New,Courier,monospace</option><option value="Georgia,Georgia,serif">Georgia,Georgia,serif</option><option value="Impact,Charcoal,sans-serif">Impact,Charcoal,sans-serif</option><option value="Lucida Console,Monaco,monospace">Lucida Console,Monaco,monospace</option><option value="Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans Unicode,Lucida Grande,sans-serif</option><option value="Palatino Linotype,Book Antiqua,Palatino,serif">Palatino Linotype,Book Antiqua,Palatino,serif</option><option value="Tahoma,Geneva,sans-serif">Tahoma,Geneva,sans-serif</option><option value="Times New Roman,Times,serif">Times New Roman,Times,serif</option><option value="Trebuchet MS,Helvetica,sans-serif">Trebuchet MS,Helvetica,sans-serif</option><option value="Verdana,Geneva,sans-serif">Verdana,Geneva,sans-serif</option> </select>&nbsp;&nbsp;

    <select name="fontSize" id="sizePicker">
    <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="14">14</option><option value="16">16</option><option value="18">18</option><option value="20">20</option><option value="22">22</option><option value="24">24</option><option value="26">26</option><option value="28">28</option><option value="30">30</option><option value="32">32</option><option value="36">36</option><option value="40">40</option><option value="44">44</option><option value="48">48</option><option value="54">54</option><option value="60">60</option><option value="66">66</option><option value="72">72</option> </select><br /><br />

    <input type="button" name="try" value="Try It" onclick="createImg()" />
    </div>
    <p id="displayImg">
    </p>
    </body>
    </html>

    and my Javascript file
    function createImg(){
    var text = document.getElementById("userInput").value;
    var fontList = document.getElementById("fontPicker");
    var font = fontList.options[fontList.selectedIndex].text;
    var sizeList = document.getElementById("sizePicker");
    var size = sizeList.options[sizeList.selectedIndex].text;

    //var text = document.getElementById("userInput").style.fontSize=size;

    document.getElementById("displayImg").innerHTML=text;

    }



    Please give me clues
     

Share This Page