CODEWITHSUNDEEP
asp.nethtmltextarea
coder
coder

Reputation: 13248

Changing font name and size in HTML text area with ASP.net

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>

Upvotes: 1

Views: 4358

Answers (3)

Andy Rose
Andy Rose

Reputation: 16984

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();

Upvotes: 2

coder
coder

Reputation: 13248

I have achieved in doing by this way

  <script type="text/javascript">
    $(document).ready(function () {
        $("#DropFont").change(
    function () {
        var fontname = $("#DropFont").val();
        $("#TextBox1").css("font-family", fontname);
    }
),

$("#DropFontSize").change(
    function () {
        var fontsize = $("#DropFontSize").val();
        $("#TextBox1").css("font-size", fontsize);
}
)
})
  </script>

Upvotes: 0

huMpty duMpty
huMpty duMpty

Reputation: 14470

You should add the AutoPostBack to your textbox and as well as AutoPostBack to the dropdownlist. By using SelectedIndexChanged Event of the dropdown you can match the text from text box and the value of dropdown list

Hope this helps

Upvotes: 1

Related Questions