adjust font size at runtime

adjust font size at runtime

crcucbcrcucb Posts: 43Questions: 12Answers: 0

https://jyorkejudge.org/A2.php

I have read multiple posts about adjusting the font size and am unable to get it to work.
I can change the size with the following when the page loads:
table.dataTable {
font-size: 1em;
}

I have a slider control with the follow function.

The function runs but it doesn't seem to make any visible changes.

$('#size').on( 'change', function () {
var maintable = $('#Addresses').DataTable();

 var newSize = this.value+ 'em';

$('maintable.dataTable').css('font-size', newSize); // Apply the new font size
$('maintable.dataTable td').css('font-size', newSize); // Apply the new font size to the cells

  maintable.columns.adjust().draw();

console.log("just adjusted ", newSize);

} );

Replies

  • kthorngrenkthorngren Posts: 22,158Questions: 26Answers: 5,100
    edited July 13

    The selector $('maintable.dataTable td') is incorrect. maintable is a Javascript variable which won't work as part of the jQuery selector. Your table has this id="Adresses" assigned as the ID. So something like this will be more appropriate:

    $('#Adresses').css('font-size', newSize); // Apply the new font size
    $('#Adresses td').css('font-size', newSize); // Apply the new font size to the cells
    

    However this will only apply to the td on the current page displayed as these are the only rows in the document. Use cells().nodes() with to$() to get a jQuery object of all the Datatable cells. Then apply the CSS. Replace the second line with something like this:

    maintable.cells().nodes().to$().css('font-size', newSize);
    

    EDIT: Changed the #maintable to #Adresses to correct the code for the provided test case.

    Kevin

  • crcucbcrcucb Posts: 43Questions: 12Answers: 0

    thank you . this works except for the headers, they seem unaffected.

  • kthorngrenkthorngren Posts: 22,158Questions: 26Answers: 5,100
    edited July 13

    Maybe you need to add something like this:

    $('#Adresses th').css('font-size', newSize);
    

    The headers aren't returned as part of cells().nodes(). This returns only the cells in the tbody.

    Also note above I forgot to change the maintable to be #Adresses. I edited the code for correctness.

    Kevin

  • kthorngrenkthorngren Posts: 22,158Questions: 26Answers: 5,100
    edited July 13

    I see the issue. You have scrolling features enabled. In this case Datatables creates a duplicate table with the header and footer and hides the original to facilitate scrolling. The above selectors won't find the duplicated table. You can inspect the table to see this.

    Use this:

    $('table.dataTable thead th').css('font-size', newSize);
    

    Or to specify a specific Datatable use the original table's ID, Adresses for example, and select the div Datatables creates with this selector div#Adresses_wrapper. Then find the table below the div which has the duplicated header, like this:

    $('div#Adresses_wrapper table.dataTable thead th').css('font-size', newSize);
    

    Kevin

  • allanallan Posts: 64,743Questions: 1Answers: 10,712 Site admin

    If you want to adjust the size of all text in the table, you might be best just adding a class or style to the table element itself. That would be more efficient in terms of processing. It might need an !important depending on the other styles on the page.

    Allan

  • crcucbcrcucb Posts: 43Questions: 12Answers: 0

    Thank you Allen,
    I added a class to the table tag:

    <

    table cellpadding="0" cellspacing="0" border="0" class="display" id="Adresses" width="100%" class="dt-resizeable">

    At runtime, I am trying to reference the table and it's not finding it:
    const myElement = document.getElementById('dt-resizeable');

    In web developer tools, I notice the class that I specified is not present:

    <

    table cellpadding="0" cellspacing="0" border="0" class="display dataTable dtfc-has-start dtfc-has-left dtfc-scrolling-end dtfc-scrolling-right" id="Adresses" width="100%" aria-describedby="Adresses_info" style="position: absolute; top: 0px; left: 0px; width: 100%;">

  • allanallan Posts: 64,743Questions: 1Answers: 10,712 Site admin

    id="Adresses"

    But

    document.getElementById('dt-resizeable');

    I see a little problem there ;).

    You either want to change the selector to Adresses or use document.getElementsByClassName.

    Allan

  • crcucbcrcucb Posts: 43Questions: 12Answers: 0

    Sorry about that, I corrected that to the following but the header text still doesn't change, the datatable values do change:
    var newSize = this.value+ 'em';
    var myElement = document.getElementById('Addresses');
    myElement.style.fontSize = newSize;

    Thank you

  • kthorngrenkthorngren Posts: 22,158Questions: 26Answers: 5,100
    edited July 13

    As I said you have scrolling features enabled so you need to use a selector that finds the duplicated table which has the header and footer. Looks like your test case is down. Go to this example and past this into the console:

    $('table.dataTable').css('font-size', '0.5em');
    

    If you want to be more specific with the table that is adjusted, ie if you have more than one table on the page, then use this:

    $('div#example_wrapper table.dataTable').css('font-size', '1.5em');
    

    Paste it into the console of the same example.

    For your test case change #example_wrapper to #Adresses_wrapper.

    Kevin

  • crcucbcrcucb Posts: 43Questions: 12Answers: 0

    thank you, I finally understand and got it.

Sign In or Register to comment.