CODEWITHSUNDEEP
jqueryfonts
Tomala
Tomala

Reputation: 557

jQuery changing font family and font size

I am trying to change font family and font size of the text that appears in a textarea and a container by choosing the font from the list, font size should be fixed. I am also trying to change color of the background when a font is picked.

That is my code:

    <script type="text/javascript">     
    function changeFont(_name) {
        document.body.style.fontFamily = _name;
        document.textarea = _name;
    } 
    </script>

</head>
<body style="font-family">   
    <form id="myform">
        <input type="text" /> 
        <button>erase</button> 
        <select id="fs" onchange="changeFont(this.value);">
            <option value="arial">Arial</option>
            <option value="verdana">Verdana</option>
            <option value="impact">Impact</option>
            <option value="'ms comic sans'">MS Comic Sans</option>
        </select>
        <div align="left">
            <textarea style="resize: none;" id="mytextarea" 
                 cols="25" rows="3" readonly="readonly" wrap="on">
                Textarea
            </textarea>
            <div id='container'>
                <div id='float'>
                    <p>This is a container</p>
                </div>
    </form>
</body>

When I try it in the browser the font family does not change in the text area. It only changes in the container. I also do now know how to set a new font size and background for the container and the textarea when the font family is picked.

I will appreciate any help guys!

Upvotes: 32

Views: 144656

Answers (4)

tom
tom

Reputation: 11

If you only want to change the font in the TEXTAREA then you only need to change the changeFont() function in the original code to:

function changeFont(_name) {
    document.getElementById("mytextarea").style.fontFamily = _name;
}

Then selecting a font will change on the font only in the TEXTAREA.

Upvotes: 1

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41885

Full working solution :

HTML:

<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>

jQuery:

$("#fs").change(function() {
    //alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());

});

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

Fiddle here: http://jsfiddle.net/AaT9b/

Upvotes: 56

David Hellsing
David Hellsing

Reputation: 108500

In some browsers, fonts are set explicit for textareas and inputs, so they don’t inherit the fonts from higher elements. So, I think you need to apply the font styles for each textarea and input in the document as well (not just the body).

One idea might be to add clases to the body, then use CSS to style the document accordingly.

Upvotes: 1

Andy
Andy

Reputation: 30135

In my opinion, it would be a cleaner and easier solution to just set a class on the body and set the font-family in css according to that class.
don't know if that's an option in your case though.

Upvotes: 5

Related Questions