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 ‘width’ property of a div with class=’panel’, by a fixed amount e.g. 50px?

EDIT:

I understand. Problem is I don’t know how to change id, only classname. The div is constructed in JavaScript using buildDomModel as follows:

  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()
{
   // since you are using a class panel, means more than one div, using loop

   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') === 'panel')
     {
        // set the width now
        divs[i].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:

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

And later use it like this:

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

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

setWidth();

Update 2:

Ok modify the function like this:

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')
     {
        // get previous width
        var prevWidth = getComputedWidth(divs[i]);
        // set the width now
        divs[i].setAttribute('width', (prevWidth + 50));
     }
   }
}

function  getComputedWidth(theElt){
        if(is_ie){
                tmphght = document.getElementById(theElt).offsetWidth;
        }
        else{
                docObj = document.getElementById(theElt);
                var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("width");
                tmphght = tmphght1.split('px');
                tmphght = tmphght[0];
        }
        return tmphght;
}

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));
  });
}