CODEWITHSUNDEEP
javascriptcsshtml
Joheo
Joheo

Reputation: 352

Regarding the use of ".style.something" - javascript

I have the following javascript code:

function createDiv(id){
      var temp = document.createElement('div');
      temp.setAttribute("id", id); 
      document.getElementsByTagName('body')[0].appendChild(temp);
    }

createDiv('upper_outer');

function /*ABSTRACTION*/(e)
    {

          /* Part not shown of the function is working correctly */

          var upper = document.getElementById("upper_outer");

          upper.style.display = "block";
          upper.style.position = "absolute";
          upper.style.height = $(document).height() - init_co[0] + "px";
          upper.style.width = s_box.style.width + "px";
          upper.style.left =  init_co[0] + "px";
          upper.style.top = init_co[1] + "px";
}

By the dev console I can check that the div has been created in fact with the proper id, but there haven't been any changes as it should be supposed to regarding the style attribute. Any ideas on this one? (please ignore the variables not displayed in this code, they are correctly implemented).

EDIT:

The function is called. Part of the function is actually working.

Upvotes: 0

Views: 73

Answers (2)

flagoworld
flagoworld

Reputation: 3194

Regardless of the answer to your issue in regular javascript, I notice that you are using a mixture of jQuery and plain old Javascript. Since you are already using jQuery, you might as well use it. (I know, right?)

Try this:

function createDiv(id)
{
    $('<div></div>').attr('id',id).appendTo('body');
}

createDiv('upper_outer');

//I'm assuming this is created in response to some sort of event.
//Perhaps the event isn't being triggered?
//Are you sure all your variables are defined? - init_co and s_box
function /*ABSTRACTION*/(e)
{
    $('#upper_outer').css(
    {
        'display':'block',
        'position':'absolute',
        'height':$(document).height() - init_co[0] + 'px',
        'width':s_box.css('width'),
        'left':init_co[0] + 'px',
        'top':init_co[1] + 'px'
    });
}

Please note: There can only be 1 (ONE!!!!) ID per page. IDs are unique. If this div, with this ID, is getting created multiple times, it is possible that you are not changing the style of the div that you think you are. If you meant to create multiple of these divs, use "class" instead. If you did not, perhaps you should consider checking to see if the element exists before creating it?

//Inside createDiv()
if($('#'+id).length)) return;

Upvotes: 2

Dvir
Dvir

Reputation: 3339

That's because you didn't call the function that changes the style.

anyway, there is another parameters in the function that not exist. who is s_box or init_col?

try this code, but add the paramters first:

function createDiv(id) {
      var temp = document.createElement('div');
      temp.setAttribute("id", id); 
      document.getElementsByTagName('body')[0].appendChild(temp);
}

createDiv('upper_outer');
addStyle();

function addStyle()
{

      var upper = document.getElementById("upper_outer");

      upper.style.display = "block";
      upper.style.position = "absolute";
      upper.style.height = $(document).height() - init_co[0] + "px";
      upper.style.width = s_box.style.width + "px";
      upper.style.left =  init_co[0] + "px";
      upper.style.top = init_co[1] + "px";
}

jsFiddle

Upvotes: 0

Related Questions