Use javascript to alter width of a div

Question

I have some javascript code and a button which already has an event/action assigned to it, and I want to add a second event to the button. Currently the relevant bit of code looks like this:

   events: {onclick: "showTab('"+n+"')"}, 

how do I amend this code so that it also increases the 'wdith' property of a div with class='panel', by a fixed amount eg 50px?

Thanks

EDIT:

I understand. Problem is I don't know how to change id, only classname. The div is constructed in javascript using buildDomModel as follws:

  this.buildDomModel(this.elements["page_panels"],
        { tag: "div", className: "tab_panel",
          id: "tab_panel",
          childs: [...]}
 )

But the id doesn't get changed to 'tab_panel'. HOWEVER, classname does get changed to 'tab_panel' which is why i tried to use getelementbyclass. So the div has no id and I don't know how to create one using the buildDomModel but I can give unique class. I have put the code in original post too.

Answer 1

This:

 
 
 
  
  events: {onclick: "showTab('"+n+"'); $('div.panel').width('50px');"},
 
  

Or you might want to add below line to showTab function.

 
 
 
  
  $('div.panel').width('50px');
 
  

Update:

Or you can do with vanilla javascript:

function setWidth()
{
   var div = document.getElementById('div_id');
   div.setAttribute('width', '50px');
}

Or if you want to apply the width to just one specific div, give that div an id and use this function instead:

events: {onclick: "showTab('"+n+"'); setWidth();"},

And later use it like this:

setWidth();

Or you might want to add below line to showTab function.

 setWidth(); 

Update 2:

Ok modify the function like this:

function setWidth(){
  jQuery('.tab_panel').each(function(){
    jQuery(this).attr('style', 'width:' + (jQuery(this).width() + 50));
  });
}

Note that with jQuery it should be this code in all:

 function setWidth(){ jQuery('.tab_panel').each(function(){ jQuery(this).attr('style', 'width:' + (jQuery(this).width() + 50)); }); } 

Answer 2

instead of the function you can use this line of JQuery code:

 $('div.tab_panel').attr('style',"width:100px");

any way if you dont want it to be JQuery then this function should work :

function setWidth() {
        var divs = document.getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) {
            // check if this div has panel class 
            if (divs[i].getAttribute('class') === 'tab_panel') {
                // set the style now 
                divs[i].setAttribute('style', 'width:100px');
            }
        }
    } 

putting width attribute to div wouldnt work, you need to set its style,

so i expect any of the code i provided to work.

Answer 3

oh no the one i sent early just set width to a new value this one should fix your problem :

 var x = $('div.tab_panel')[0].style.width.replace("px", "");
        x = x + 50;
        $('div.tab_panel').attr('style',  "width:" + x + "px");

ok here is a non JQuery Version :

        function setWidth() {
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].getAttribute('class') === 'tab_panel') {
                var x = divs[i].style.width.replace("px", "");
                x = x + 50;
                divs[i].setAttribute('style', 'width:' + x + 'px');
            }
        }

Answer 4

ok here it is :

JQuery:

        function Button1_onclick() {
        var x = $('div.tab_panel')[0].clientWidth;
        x = x + 50;
        $('div.tab_panel').attr('style',  "width:" + x + "px");
    }

non JQuert:

function setWidth() {
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].getAttribute('class') === 'tab_panel') {
                var x = divs[i].offsetWidth;
                x = x + 50;
                divs[i].setAttribute('style', 'width:' + x + 'px');
            }
        }
    } 

this should work