Question

I have a bunch of divs that display text.

I have made these selectable and what I’m ideally looking to do is be able to change the font size of the text for the selected div.

I have a dialog that has a basic form with the font sizes in a select list, but I’m struggling to find a way to actually target the selectable from within the dialog.

$(function(){
    $('#template_inner').selectable({
           selected: function(event, ui){
            console.log(ui);
            // displays the HTML in the console

        }
    })


$( "#font-size-form" ).dialog({
    autoOpen: false,
    height: 200,
    width: 270,
    modal: true,
    position: ['top', 200],
    buttons: {
        "Select": function() {
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
    }
});

   $( ".font-size" )
       .button()
       .click(function() {
           $( "#font-size-form" ).dialog( "open" );
   });
});


<div id="font-size-form" title="Choose Font Size">
    <form action="" method="">
        <p>Please choose your font-size</p>
        <div class="">
            <select name="size">
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
                <option value="28">28</option>
                <option value="30">30</option>
                <option value="32">32</option>
            </select>
        </div>

    </form>
</div>

So, when I click on the div, then click to open the font size dialog box, select the font size, I’d like to change the font size of the text in the div.

Is this possible?

Many thanks

Answer 1

If you only have to remember the selection for the duration of the page, then you could save the font size as data (see documentation) on the selectable.

//in your dialog
"Select": function() {
  $('#template_inner .ui-selected').css('font-size', $('select[name="size"]').val() + 'px');
  $('#template_inner').data('fontSize', $('select[name="size"]').val());
}

//on your selectable
$('#template_inner').selectable({
  selected: function(event, ui){
    var defaultSize = 22;
    // Get the saved value or default on new selects.
    var size = $('#template_inner').data('fontSize') || defaultSize;
    $(ui.selected).css('font-size', size + 'px');
  }
})