Dynamic Re-sizing fields

CallScripter 4.5
It is possible to adjust script elements (controls) based on the size of the browser window.

The following code will firstly create an alias for the script fields (float, textField).

The width of the page is then calculated using document.body.offsetWidth minus the offset. 
In this example it is 280 pixels for another float on the page and then the Text Box is indented by another 10 pixels from this.

The "$(window).resize(function() { }" function ensures the width is updated on each resize event.

In a javascript control:

function resizeFloatTextBox() {
    var textField = document.getElementById('csCon' + 'getCSObject([TextField])'.replace(/F/,''));
    var float = document.getElementById('csCon' + 'getCSObject([Float])'.replace(/F/,''));
    var offsetWidth = document.body.offsetWidth;
    var widthRaw = offsetWidth - 280;
    var widthRawInner = offsetWidth - 290;
    var width = widthRaw +'px';
    var widthInner = widthRawInner +'px';
    textField .style.width = widthInner;
    float .style.width = width;
}

resizeFloatTextBox();
$(window).resize(function() {
    resizeFloatTextBox();
});
 
Article ID: 50, , Modified: February 16, 2016 at 11:49 AM

Share this article

Print