Clever Geek Handbook

Can you change the height / width of an ASP.NET control from a Javascript function?

What is the best way to change the height and width of an ASP.NET control from a Javascript client function?

Thanks, Jeff

+1


source to share


3 answers


Due to the name change introduced by ASP.NET, I use the function at the bottom to find the ASP.NET controls. Once you have your control, you can set the height / width as needed.



example usage:

<input type='button' value='Expand' onclick='setSize("myDiv", 500, 500);' />

...

function setSize(ctlName, height, width ) {
    var ctl = asp$( ctlName, 'div' );
    if (ctl) {
       ctl.style.height = height + 'px';
       ctl.style.width = width + 'px';
    }
}


function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}
0


source


You can use .ClientID controls and some javascript and change it that way.



You can do this with CSS height or width, or on some controls directly above the control itself.

+1


source


Yes it is possible. ASP controls render as HTML controls in the browser with some added attributes. If you pointed your ASP.Net to an ID during its creation, it will also appear as the ID of the HTML control.

You should be able to access the controls using the javascript getElementById () function, and you should be able to change the CSS attributes (the style mentioned in the post above this).

If you are using JQuery, choosing and setting CSS styles can be easier, for example

$ ("# myControl"). css ("width") == myNewValue;

Greetings

+1


source






More articles:


All Articles