Home/ Questions/Q 8005881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:20:13+00:00

I am using the following code for 1) Display the changed content in DIV

  • 0

I am using the following code for
1) Display the changed content in DIV container so if someone types in textbox it should simultaneously display the typed content
2) on selection of fonts, font should be applied to that content

But its not working not sure what wrong i am doing ?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Change Contents</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

  <script type="text/javascript" language="javascript">
    $("#fs").change(function() {
    alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
});
</script>
</head>

<body>
<form id="myform">
    <button>erase</button>
    <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>

<br/>

<textarea class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
    <div id="float">
        <p>
            Text into container
        </p>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Pleae initialize your handler in the jQuery ready() clause.

    $(function() {
});

    Your code may look like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    …

    <textarea id=ta class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
    <div id="float">
        <p>
            Text into container
        </p>
    </div>
</div>
    <script>
    $(window).load(function(){
        $('#ta').keyup(function(){
            $('#float').html("<p>"+$(this).val()+"</p>");
        });
        $("#fs").change(function() {
            $('.changeMe').css("font-family", $(this).val());
        });         
        $("#size").change(function() {
            $('.changeMe').css("font-size", $(this).val() + "px");
        });
    });
    </script>
</body>
</html>

    Other changes :

    • use jquery 1.7.1 instead of this old version
    • use an id for the text area to detect change
    • use “keyup” instead of “change” so that the change is immediate (no need to click outside)

    If you want only the div to be changed, simply replace $('.changeMe') by $('#float') in the two last handlers.

    • 0