How to change font size in div after selecting text in this div only

Question

I use the code below to change the font size of text in a <div> . It changes the font size, but first you need to select the size from the drop-down list, and then click on it, and only then will the font size be affected. However, I would like the font size to be immediately resized for the selected text. Can you help me?

HTML

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <form id="myform"> <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/> <div id="name" class="name">dsfdsfsfdsdfdsf</div> <div id="address" class="address">sdfsdfdsfdsfdsf</div> <div id="address1" class="address1">sdfsdfdsfdsfdsf</div> 

Script

 $(".name").click(function(){ var id = this.id; $("#"+id).css('font-size', $('#size').val()+"px"); }); $(".name").click(function(){ var id = this.id;//get clicked id $("#"+id).css('font-family', $('#fs').val()); }); 

Answer 1

DO it and see.

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

Answer 2

It is not possible to catch an event if text is selected, but you can use mousedown / mouseup to simulate it and check for window.getSelection ():

 $(".name, .address, .address1").on("mousedown", function () { $(this).one("mouseup", function () { if (window.getSelection().toString().length > 0) $(this).css('font-size', $('#size').val()+"px"); }); }); 

Check it out on JSFiddle

upd : thanks for the minus. Updated Answer

Answer 3

this work is for you

 $("div").focus(function(){ $(this).css('font-size', $('dropdown').val()); }); 

first you can select the font size from the dropdown menu and then focus on the jquery div to get the size from the dropdown element and change the divfont as well

Answer 4

From what you explained in your question, I see that your code does what you want. Mohkhan answer - if you change the size selection field automatically, the font size of the div will be resized. Is that what you expect?

Also one more correction, you connect two click events with the same div, you can change the font in the first handler, for example

 <script type="text/javascript"> $(".name").click(function(){ var id = this.id; $("#"+id).css('font-size', $('#size').val()+"px"); $("#"+id).css('font-family', $('#fs').val()); }); </script> 

Answer 5

From your question, I suppose you want to change the size and font of the text when you click on it, and at the same time you want to change the size and font as soon as the drop-down value of the size or font is changed.

You can try the code below to achieve this.

JQuery

 var current_id; $("#fs").change(function(){ $("#"+current_id).css("font-family",$(this).val()); }); $("#size").change(function(){ $("#"+current_id).css("font-size",$(this).val()+"px"); }); $(".name,.address,.address1").click(function(){ var id = this.id; current_id = id; $("#"+id).css('font-size', $('#size').val()+"px"); }); $(".name,.address,.address1").click(function(){ var id = this.id;//get clicked id current_id = id; $("#"+id).css('font-family', $('#fs').val()); }); 

Violin: http://jsfiddle.net/tamilmani/pKyHL/

Answer 6

So much work, why don't you just do bbCode? That would be a lot easier.

Answer 7

This should do what you ask ... It seems like a good solution for me:

http://jsfiddle.net/CLjZt/2/

jQuery:

 $('div[data-entry=item]').click( function() { id = this.id; $('#fs').change( function(){ $("#"+id).css('font-family', $('#fs').val()); }); $('#size').change( function(){ $('#'+id).css('font-size', $('#size').val()+"px"); }); }); 

HTML:

 <form id="myform"> <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/> <div data-entry="item" id="name" class="name">dsfdsfsfdsdfdsf</div> <div data-entry="item" id="address" class="address">sdfsdfdsfdsfdsf</div> <div data-entry="item" id="address1" class="address1">sdfsdfdsfdsfdsf</div> 

The function adds a click event to the div [data-entry = item] selector, and then writes the identifier of the element that was clicked on the id variable. Then it launches two functions that listen for changes to #fs and #size select elements. If a change is detected, it uses the same selector that you created to make changes to the css properties in the value selected item .

(you can delete this data type and use the same identifier for all three elements, but I was not sure that for some reason you need both a class and an identifier)

Answer 8

Try it.

 $('.name, .address, .address1').focus(function(){ var fontSize = $('#size').val() + "px"; $(this).css('font-size', fontSize); }); 

If you want to select the text first and then change the font size when you select the font in the drop-down list (instead of first selecting the font size, as I have here), you can create a variable for the selected text and set the listener event to update whenever focus is on one of your divs

 var selectedDiv; $('.name, .address, .address1').focus(function(){ selectedDiv = this; }); 

Just create another event listener to change the font whenever the user selects the font size.

 $('#size').change(function(){ var fontSize = $('#size').val() + "px"; $(selectedDiv).css('font-size', fontSize); });