Question

I have an empty div element and in which I am havin an HTMLtext area and now I have 2 drop down lists one is for font name and the other is for font size.

Now If I write something in the textarea and If I select some font name from the drop down list the text should immediately reflect within the textarea so how do I do that?

Here is my code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    For Each f As System.Drawing.FontFamily In System.Drawing.FontFamily.Families
        DropFont.Items.Add(f.Name)
    Next
End Sub

This is my design code:

<div class="exampe">
 <textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea>
</div>


  <asp:DropDownList ID="DropFontSize" runat="server">
                                    <asp:ListItem Value="6">6</asp:ListItem>
                                    <asp:ListItem Value="8">8</asp:ListItem>
                                    <asp:ListItem Value="10">10</asp:ListItem>
                                    <asp:ListItem Value="12">12</asp:ListItem>
                                    <asp:ListItem Value="14">14</asp:ListItem>
                                    <asp:ListItem Value="18">18</asp:ListItem>
                                    <asp:ListItem Value="24">24</asp:ListItem>
                                    <asp:ListItem Value="32">32</asp:ListItem>
                                    <asp:ListItem Value="36">36</asp:ListItem>
                                    <asp:ListItem Value="40">40</asp:ListItem>
                                    <asp:ListItem Value="48">48</asp:ListItem>
                                    <asp:ListItem Value="52">52</asp:ListItem>
                                    <asp:ListItem Value="56">56</asp:ListItem>
                                    <asp:ListItem Value="62">62</asp:ListItem>
                                    <asp:ListItem Value="68">68</asp:ListItem>
                                    <asp:ListItem Value="72">72</asp:ListItem>
                                </asp:DropDownList>

Answer 1

You are going to have to use a client side script to achieve what you want to do. Ideally I would suggest using jQuery to plug into the change event of your drop down list and based on the selecetion made either apply a css class to your textarea or use the css property of your textarea to change the font family.

In your header or stylesheet set:

<style>
   .arial {
       font-family: arial;
   }

   .verdana {
       font-family: verdana;
   }
</style>

For the following html:

<select id="fonts">
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
</select>

<textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea>

use this jQuery to change styles:

$('#fonts').change(function() {
    var fontfamily = $('#fonts').val();
    $('#TextBox1').removeClass();
    $('#TextBox1').addClass(fontfamily);
});

Alternatively, to avoid creating all the font classes, just use the css property:

$('.target').change(function() {
    var fontfamily = $('.target').val();
    $('#TextBox1').css('font-family', fontfamily);
});

One sticking point you may come across with asp.net is getting the drop down list id as this generated dynamically. You could use a class instead to identify it or use inline script to obtain it’s client id propery within your javascript:

var ddlId = <%=DropFontSize.ClientID %>;
var fontfamily = $('#' + ddlId).val();